前言
本来想自己写教程的,无奈太简单了,都没什么好写,直接搬作者的教程过来好了。
原文:小冰博客:基于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
进行配置。
#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:
处,进行以下修改:
inject:
head:
- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css">
bottom:
- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
- <script src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script>
④ 打开[Blogroot]\_config.butterfly.yml
搜索到aside:
处,添加开关:
aside:
enable: true
mobile: true # display on mobile
position: right # left or right
card_history: # 添加开关名称
enable: true # 打开card_history开关
card_author:
enable: true
⑤ 进行 hexo clean && hexo g && hexo s 进行效果的预览