Sidebar Card Clock
点击查看更新记录
更新记录
2021-02-07:正式版v4.0
- 基于冰老师的方案进行修改。
- 实现去jquery
- 将css转为styl
- 去除冗余结构和冗余样式
- 新增夜间模式
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
冰老师原教程 | 教程：基于Butterfly主题的模拟电子钟侧边栏小部件3.0版 |
天气API | openweathermap |
资源下载
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。静态资源包内的index.pug为butterfly_v3.5.1版本。其他版本改法详见教程正文。
预览效果
写在最前
本帖基于Butterfly_v3.6.2进行编写,对于低版本，在index.pug的写法上可能存在差异，请读者根据自己的版本自行修改。
申请API
- 访问OpenWeather,按照网站指示完成注册。
- 注册完成后，访问API Keys获取相应的API密钥。留待之后备用。
魔改正文
点击查看魔改正文
将下载的静态资源包内的文件夹放到目录下，即。
新建,
新建,
新建,记得更改的值为你之前获取的密钥,
修改,添加依赖项：
修改
- butterfly_3.1.0-3.2.0添加写法
- butterfly_3.3.0添加写法
- butterfly_3.4.0-3.5.1添加写法
- butterfly_3.6.0添加写法
#aside_content.aside_content
if theme.aside.card_author.enable
include ./card_author.pug
.sticky_layout
+ include ./card_clock.pug
if theme.aside.card_announcement.enable
include ./card_announcement.pug
if theme.aside.card_recent_post.enable
include ./card_recent_post.pug
if theme.newest_comments.enable
include ./card_newest_comment.pug
if theme.ad && theme.ad.aside此处写法是在站点页和文章页都添加了card_clock，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。
#aside_content.aside_content
if theme.aside.card_author.enable
!=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
if theme.aside.card_announcement.enable
!=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
.sticky_layout
if is_post()
if showToc
include ./card_post_toc.pug
+ !=partial('includes/widget/card_clock', {}, {cache:theme.fragment_cache})
if theme.aside.card_recent_post.enable
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
if theme.ad && theme.ad.aside
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
else
+ !=partial('includes/widget/card_clock', {}, {cache:theme.fragment_cache})
if theme.aside.card_recent_post.enable
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
if theme.ad && theme.ad.aside
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
if theme.newest_comments.enable
!=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
if theme.aside.card_categories.enable
!=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
if theme.aside.card_tags.enable
!=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
if theme.aside.card_archives.enable
!=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
if theme.aside.card_webinfo.enable
!=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})此处写法是在站点页和文章页都添加了card_clock，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。
#aside_content.aside_content
//- post
if is_post()
if showToc && theme.toc.style_simple
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
.sticky_layout
if showToc
include ./card_post_toc.pug
+ !=partial('includes/widget/card_clock', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
else
//- page
!=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
.sticky_layout
+ !=partial('includes/widget/card_clock', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
!=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache}) 此处写法是在站点页和文章页都添加了card_clock，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。
#aside_content.aside_content
//- post
if is_post()
if showToc && theme.toc.style_simple
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
.sticky_layout
if showToc
include ./card_post_toc.pug
+ !=partial('includes/widget/card_clock', {}, {cache: true})
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
else
//- page
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
.sticky_layout
+ !=partial('includes/widget/card_clock', {}, {cache: true})
!=partial('includes/widget/card_recent_post', {}, {cache: true})
!=partial('includes/widget/card_ad', {}, {cache: true})
!=partial('includes/widget/card_newest_comment', {}, {cache: true})
!=partial('includes/widget/card_categories', {}, {cache: true})
!=partial('includes/widget/card_tags', {}, {cache: true})
!=partial('includes/widget/card_archives', {}, {cache: true})
!=partial('includes/widget/card_webinfo', {}, {cache: true}) 修改,
TO DO
去jquery
适配pjax
新增夜间模式
完全重构pug和css，完美自适应
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-02-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录