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

前言

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

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

什么是历史上的今天?

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

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

步骤一:下载资源包

前往Butterfly-card-history下载资源包。

在这里插入图片描述

步骤二:修改配置文件

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

在这里插入图片描述

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

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

在这里插入图片描述

结语

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值