博客侧边栏添加那年今日

本文修改主题为Butterfly主题，若使用其他主题，请自行确认修改位置。

原文出处

https://zfe.space/post/history-card.html

效果预览

查看图片

history-card

修改步骤

1. 新建文件

新建[Blogroot]\themes\butterfly\layout\includes\widget\card_history.pug

1
2
3
4
5
6
7
8
9
if theme.aside.card_history.enable
  .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. 修改文件

修改[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
    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})
+     !=partial('includes/widget/card_history', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        if page.series
          include ./card_post_series.pug
        !=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})
+   !=partial('includes/widget/card_history', {}, {cache: true})

    .sticky_layout
      if showToc
        include ./card_post_toc.pug
      !=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. 引入样式

在[Blogroot]\_config.butterfly.yml中引入

注意：此 js 每页都需要加载 ，故插入 js 时应当加入 data-pjax 标签排除 pjax

1
2
3
4
5
6
7
inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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

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: right # left or right
  display:
    archive: true
    tag: true
    category: true
+ card_history:
+   enable: true
  card_author:
    enable: true
    description:

4. 自定义样式

根据博客样式修改自定义的index.css中的样式

由于直接用jsdiliver插入css样式，而原本样式定义了背景颜色，可能与博客背景冲突，若与博客的颜色不和，则可以自定义其背景样式并插入CSS来解决

1
2
3
.history_slide {
    background: #fff0 !important;
}
1
2
3
inject:
  head:
+   - <link rel="stylesheet" href="/style/custom_css.css">