前言

美化之前

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

引用站外地址
Hexo博客添加自定义css和js文件
Leonus

在添加完js、css后，一定要记得在_config.butterfly.yml的inject里引用

引用站外地址
Butterfly自用全局变量
June's Blog

效果

image-20240317222837219

参考链接

引用站外地址
基于butterfly主题的历史上的今天 2.0重置版
小冰博客
小小折腾了一下

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

54c1c04dbe80579454fce80eb302ee16

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

image-20240317223357738

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

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

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

image-20240317224437713

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

修改方案

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

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.yml的aside

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;
}