博客装修(2023年3月)

最是一年春好处，绝胜烟柳满皇都。不知不觉又一年过去了，每年 3 月都是博客装修的季节，这次也不例外，这次的装修内容如下：

主题升级
支持隐藏文章
添加每日打卡
评论系统迁移
自定义 RSS 订阅模板
支持 algolia 搜索

hexo 和 butterfly 主题升级

hexo 升级

之前使用的还是老版本的 hexo 由于这次想要升级主题，而主题需要 hexo 5.0 以上版本，所以就顺便升级了 hexo

代码语言：javascript复制

# 确认当前版本
hexo version
# 升级 hexo
npm i hexo-cli -g
# 重新安装依赖
npm install -g npm-check
# 检查依赖
npm-check
# 更新依赖
npm install -g npm-upgrade
npm-upgrade
# 重新安装依赖
npm update -g
npm update --save

需要注意的是使用的 node 版本，以及其中一些命令需要以 sudo 权限执行版本对应

butterfly 主题升级

更新主题版本至 4.7.0 https://github.com/jerryc127/hexo-theme-butterfly

隐藏文章不展示在首页

有时一些文章还在撰写过程中，或者一些文章并非重点，无需占用首页版面资源，故想要隐藏

修改首页 pug

修改文件 themes/butterfly/layout/includes/mixins/post-ui.pug

代码语言：javascript复制

mixin postUI(posts)
  each article , index in page.posts.data
    if article.hide !== true
      .recent-post-item

其中添加 if article.hide !== true 这一行，并将其中下方所有代码缩进（一定注意缩进不要错了，拉一条竖线看看，不要把最下方不需要缩进的地方缩进了）

修改最新文章 pug

修改文件 themes/butterfly/layout/includes/widget/card_recent_post.pug

代码语言：javascript复制

- let no_cover = article.cover === false || !theme.cover.aside_enable ? 'no-cover' : ''
- let post_cover = article.cover
if article.hide !== true
  .aside-list-item(class=no_cover)
    if post_cover && theme.cover.aside_enable
      a.thumbnail(href=url_for(link) title=title)
        img(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
    .content

也是同样添加 if article.hide !== true 这一行，并且进行代码缩进

文章添加属性

对想要隐藏文章的 front-matter 中添加 hide: true

代码语言：javascript复制

---
title: 博客装修(2023年3月)
date: 2023-03-03 00:00:00
hide: true
---

注意点

此方法隐藏的文章仅不在首页展示，但文章内容依然被生成，可以通过链接访问
隐藏的文章还是会占用分页的一格，所以原来显示每页 10 条，如果其中有一条文章被隐藏，则会变成只有 9 条

评论系统

Twikoo 评论系统 https://github.com/imaegoo/twikoo 我记得在某个版本之后就支持私有化部署了，但由于我已经付费了，所以就没再去部署了。这次服务快到期了，正好就迁移一下到私有化部署的 Twikoo 上

我这边使用 docker 部署，飞快，一键部署，非常方便。迁移一下评论数据，就可以了。

跟着文档操作很容易：https://twikoo.js.org/quick-start.html#私有部署

每日打卡

之前一直想要做一个每日打卡的功能，但一直没有找到合适的方案，没有轮子就造轮子呗

在首页上方添加了每日打卡的链接

开源在了：https://github.com/LinkinStars/daily-cards

自定义 RSS 订阅模板

之前没有特别关注 RSS 订阅，只是开启了这个功能，但是实际上不太好用，内容被截断，展示格式也有问题

这次修改主要是关注在两个问题上，一个是让文章的内容能够完整展示，另一方面想要在 RSS 的内容最上方添加跳转链接，来提示用户跳转到原网页查看

RSS 插件我这里使用的是 https://github.com/hexojs/hexo-generator-feed

修改配置

修改 hexo 的 _config.yml

代码语言：javascript复制

# 排除文件
exclude:
  - 'custom-rss-tmpl.xml'

# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content: true
  content_limit: 140
  content_limit_delim: " "
  template:
    - ./source/custom-rss-tmpl.xml

这里我将 content 设定为了 true，并且添加了模板

创建模板

创建文件 ./source/custom-rss-tmpl.xml
并将原来的内容写入这个文件 https://github.com/hexojs/hexo-generator-feed/blob/master/atom.xml
修改其中 <content type="html"> 部分为下方样式即可

代码语言：javascript复制

<content type="html">
<![CDATA[<a href="{{ post.permalink | uriencode }}">RSS 阅读体验可能不太好，若喜欢本文请点此跳转原文查看~</a><br><br>]]>
<![CDATA[{{ post.content | noControlChars | safe }}]]>
</content>

支持 algolia 搜索

对于搜索的支持篇幅比较大，我就单独写了一篇，链接在下方

hexo butterfly 主题添加 algolia 搜索

迁移博客部署搜索系统

0 人点赞