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

Aciano2021-02-212022-02-17

前言

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

什么是历史上的今天？

这个要从我还是一个小白说起，当时刚开始写博客，只会 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进行配置。

    #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