给博客添加章节目录

注:本文所有示例代码都可以在 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 没有合并之前,可以直接使用 我的分支

配置开启章节显示

修改主题配置

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

猜你喜欢