Hexo博客技巧:侧边栏添加历史上的今天卡片

前言

本来想自己写教程的,无奈太简单了,都没什么好写,直接搬作者的教程过来好了。

原文:小冰博客:基于butterfly主题的历史上的今天 2.0重置版

什么是历史上的今天?

这个要从我还是一个小白说起,当时刚开始写博客,只会 jquery 的我为了练手,写了最初的历史上的今天项目。当时说实话,其实我的前端知识有限,套用了一个基于 jquery 的滚动模板,老实说只能是东拼西凑的产物。但这个作品却得到了好评,并在前几天还有人在问我有关历史上的今天部署的问题。考虑到 butterfly 已经完全去了 jquery 化,因此我用了半天的时间将这个项目进行了重构。

history

重构日志:
1.去除了 jquery,改而使用 swiperjs 进行滚动实现,通过原生 fetch 进行本地 json 数据请求
2.适配最新的 butterfly 主题版本Butterfly_v3.6.2

步骤一:下载资源包

前往Butterfly-card-history下载资源包。
仓库.png

步骤二:修改配置文件

1.将pug文件夹的card_history.pug放置于[Blogroot]\themes\butterfly\layout\includes\widget\中。
修改配置文件.png

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 # display on mobile
position: right # left or right
card_history: # 添加开关名称
enable: true # 打开card_history开关
card_author:
enable: true

⑤ 进行 hexo clean && hexo g && hexo s 进行效果的预览

封面.png

结语

原文:小冰博客:基于butterfly主题的历史上的今天 2.0重置版

End