注：本文已发布超过一年，请注意您所使用工具的相关版本是否适用

改造

从去年开始写 Go 设计模式 系列文章的时候就在使用 hexo-fluid 主题了，随着专题的文章越来越多就发现，文章之间其实很多是有一些关联性的，但是来回跳转很不方便，每次写文章的时候都手动把之前的文章链接给带上，但是随着文章的数量变多，这么做就越来越麻烦。

正好，博客主题的右侧是目录，但是左侧是空白的，可以用来放章节信息

1
2
3
categories:
  - Go进阶训练营
  - "Week02: Go错误处理"

通过查看 hexo 的相关 api 我们可以发现，我们在文章中的 categories 字段，在主题中使用的时候，是可以获取到的，并且还具有层级关系，数组的前一个元素是后一个元素的父分类

1
2
// 获取子分类
site.categories.find({ parent: cat._id });

分类有了，我们只需要获取到当前文章的分类信息，以及分类下的所有文章列表，就可以组成一个目录结构

1
2
// 分类下的文章
cat.posts;

剩下的就是使用分类信息和 ejs 模板生成对应的 html 结构了

我这里就不贴代码了，总共两三百行，感兴趣可以看这个 PR: https://github.com/fluid-dev/hexo-theme-fluid/pull/621/files

安装使用主题

主题配置参考官方文档，在 PR 没有合并之前，可以直接使用 我的分支

配置开启章节显示

修改主题配置

1
2
3
4
5
6
7
8
9
10
11
post:
  # 分类，是否展示左侧分类目录
  # categories
  categories:
    # 设置为 true 表示全局开启，为 false 可以在每篇文章进行单独设置
    enable: false
# 建议配置
category:
  order_by: "name" # 章节根据名称正序
  post_order_by: "date" # 文章根据发布时间正序

如果要单独为每篇文章进行设置，在文章的 yaml frontmatter 配置中添加

1
show_category: true # 表示强制开启

最终效果

关注我获取更新

wechat

知乎

github

猜你喜欢