前言

美化之前

美化的时候需要修改网站的源文件、添加样式、js之类的,需要一点基础,可以参考

在添加完js、css后,一定要记得在_config.butterfly.ymlinject里引用

效果

那年今日侧栏

参考链接

小小折腾了一下

一开始就对冰老师的历史上的今天蛮感兴趣的,但是按照两个教程(插件版、源码版)来都不行,我还只是个小趴菜

cdn访问不了

无奈找到了店长的售后群,在群里咨询了大佬

甜梨酱,嘿嘿嘿,我的甜梨酱🤤🤤🤤

了解到要换反代后,就去找了下,于是将源码版教程里的cdn.jsdelivr.net换成了gcore.jsdelivr.net

感谢大佬:记录一些优质的反向代理:反代Jsdelivr、反代Github Raw - 勿埋我心 (skyqian.com)

换完教程里的链接后,结果又报错

js里面的cdn也要换

这里面的访问不了,那我就只能把源码拿下来改改了😓

修改方案

前三段和冰老师的一样,只是后面稍微改了一下

1. 添加card_history.pug

添加[blogRoot]\themes\butterfly\layout\includes\widget\card_history.pug

1
2
3
4
5
6
7
8
.card-widget.card-history
.card-content
.item-headline
i.fas.fa-clock.fa-spin
span= _p('那年今日')
#history-baidu(style='height: 100px;overflow: hidden;')
#history-container.history_swiper-container(style="width: 100%;height: 100%;")
#history_container_wrapper.swiper-wrapper(style="height:20px" )

2. 修改index.pug

修改[blogRoot]\themes\butterfly\layout\includes\widget\index.pug

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
29
30
31
32
33
34
35
36
#aside-content.aside-content
//- post
if is_post()
- const tocStyle = page.toc_style_simple
- const tocStyleVal = tocStyle === true || tocStyle === false ? tocStyle : theme.toc.style_simple
if showToc && tocStyleVal
.sticky_layout
include ./card_post_toc.pug
else
!=partial('includes/widget/card_author', {}, {cache: true})
!=partial('includes/widget/card_announcement', {}, {cache: true})
!=partial('includes/widget/card_top_self', {}, {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})
!=partial('includes/widget/card_top_self', {}, {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})
!=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})
!=partial('includes/widget/card_bottom_self', {}, {cache: true})

3. 修改_config.butterfly.yml

修改_config.butterfly.ymlaside

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: left # left or right
display:
archive: false
tag: false
category: false
flink: false # 友链页隐藏侧栏
+ card_history: # 添加开关名称
+ enable: true # 打开card_history开关
card_author:
enable: true

4. 引入inject

这里因为cdn.jsdelivr.net访问不了了,所以只需要引入下面的

1
2
3
4
5
6
inject:
head:
- <link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css">

bottom:
- <script data-pjax type="text/javascript" src="https://gcore.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

5. 添加baiduhistory.js

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
if(document.getElementById('history-container')){
function append(parent, text) {
if (typeof text === 'string') {
var temp = document.createElement('div');
temp.innerHTML = text;
// 防止元素太多 进行提速
var frag = document.createDocumentFragment();
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
parent.appendChild(frag);
}
else {
parent.appendChild(text);
}
}

function history_get_data(){
var myDate = new Date();
var myMonth = myDate.getMonth() + 1;
if (myMonth < 10) {
getMonth = "0" + String(myMonth);
} else {
getMonth = String(myMonth);
}
var getDate = String(myDate.getDate());
if (getDate < 10) {
getDate = "0" + String(getDate);
} else {
getDate = String(getDate);
}
var getMonthDate = "S" + getMonth + getDate;
return ["https://gcore.jsdelivr.net/gh/Zfour/Butterfly-card-history@latest/baiduhistory/json/" + getMonth + ".json",getMonthDate]
}
var history_data = history_get_data()
fetch(history_data[0]).then(data=>data.json()).then(data=>{
console.log(data[history_data[1]])
html_item =''
for (var item of data[history_data[1]]){
html_item += '<div class="swiper-slide history_slide"><span class="history_slide_time">A.D.' +
item.year +'</span>' + '<span class="history_slide_link">'+ item.title +'</span></div>'

}
var history_container_wrapper = document.getElementById('history_container_wrapper')
append(history_container_wrapper, html_item);
var swiper_history = new Swiper('.history_swiper-container', {
passiveListeners:true,
spaceBetween: 30,
effect: 'coverflow',
coverflowEffect: {
rotate: 30,
slideShadows: false,
},
loop: true,
direction: 'vertical',
autoplay: {
disableOnInteraction: true,
delay:5000
},

mousewheel:false,
// autoHeight: true,

});

var history_comtainer = document.getElementById('history-container');
history_comtainer.onmouseenter = function () {
swiper_history.autoplay.stop();
};
history_comtainer.onmouseleave = function () {
swiper_history.autoplay.start();
}
})}

6. 添加baiduhistory.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.swiper-slide.history_slide {
display: flex;
flex-direction:column !important;
}
.history_slide {
text-align:left;
font-size: 16px;
background: var(--card-bg);
display: flex;
flex-direction:column !important;
align-items: flex-start;
}
#history-baidu > .blog-slider__pagination{
display:none
}
.history_slide_time{
color: #858585;
Font-style: italic;
font-weight: lighter;
}