给博客添加章节目录

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

注：本文所有示例代码都可以在 blog-code 仓库中找到

改造

从去年开始写 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 没有合并之前，可以直接使用我的分支

下载代码: https://github.com/mohuishou/hexo-theme-fluid/archive/refs/heads/develop.zip
解压到 themes 目录，并将解压出的文件夹重命名为 fluid
剩余步骤参考: https://hexo.fluid-dev.com/docs/start/#指定主题

配置开启章节显示

修改主题配置

post:
  # 分类，是否展示左侧分类目录
  # categories
  categories:
    # 设置为 true 表示全局开启，为 false 可以在每篇文章进行单独设置
    enable: false

# 建议配置
category:
  order_by: "name" # 章节根据名称正序
  post_order_by: "date" # 文章根据发布时间正序