前言 本来想自己写教程的,无奈太简单了,都没什么好写,直接搬作者的教程过来好了。
原文:小冰博客:基于butterfly主题的历史上的今天 2.0重置版
什么是历史上的今天? 这个要从我还是一个小白说起,当时刚开始写博客,只会 jquery 的我为了练手,写了最初的历史上的今天项目。当时说实话,其实我的前端知识有限,套用了一个基于 jquery 的滚动模板,老实说只能是东拼西凑的产物。但这个作品却得到了好评,并在前几天还有人在问我有关历史上的今天部署的问题。考虑到 butterfly 已经完全去了 jquery 化,因此我用了半天的时间将这个项目进行了重构。
重构日志: 1.去除了 jquery,改而使用 swiperjs 进行滚动实现,通过原生 fetch 进行本地 json 数据请求 2.适配最新的 butterfly 主题版本Butterfly_v3.6.2
步骤一:下载资源包 前往Butterfly-card-history 下载资源包。
步骤二:修改配置文件 1.将pug
文件夹的card_history.pug
放置于[Blogroot]\themes\butterfly\layout\includes\widget\
中。
2.修改位于[Blogroot]\themes\butterfly\layout\includes\widget\
中的 index.pug。 这里为 3.6+的写法,其他版本写法请参考基于 Butterfly 主题的侧边栏电子钟 中的写法,将card_clock
换位card_history
进行配置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 #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_history', {}, {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_history', {}, {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})
③ 打开[Blogroot]\_config.butterfly.yml
搜索到inject:
处,进行以下修改:
1 2 3 4 5 6 7 8 inject: head: - <link rel="stylesheet" href="http://aciano.top/redirect/?target=https://unpkg.com/swiper/swiper-bundle.min.css"> - <link rel="stylesheet" href="http://aciano.top/redirect/?target=https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css"> bottom: - <script src="http://aciano.top/redirect/?target=https://unpkg.com/swiper/swiper-bundle.min.js"></script> - <script src="http://aciano.top/redirect/?target=https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script>
④ 打开[Blogroot]\_config.butterfly.yml
搜索到aside:
处,添加开关:
1 2 3 4 5 6 7 8 aside: enable: true mobile: true position: right card_history: enable: true card_author: enable: true
⑤ 进行 hexo clean && hexo g && hexo s 进行效果的预览
结语
原文:小冰博客:基于butterfly主题的历史上的今天 2.0重置版
End