吐槽改进日志

支持目录

字数统计: 521字   |   阅读时长: 2分

摘要: 初探在 Hexo 文章的前面自动生成目录的问题，尝试 hexo-toc，没有成功

【对算法，数学，计算机感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：算法题刷刷
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

打开一篇文章的时候，能不能根据 markdown 中的标题层次自动生成目录，显示在侧边栏。针对这个需求，一开始调研到了 hexo-toc 这个插件，但是这个插件生成的目录只能显示在文章前面而不是侧边栏。

后来发现 Hexo 2.4.1 版本以后已经在支持了 toc 的设置，只需要在文章前增加配置项 toc: true 即可，这也是目前用的方案。

弃用方案: hexo-toc 插件

安装 hexo-toc 插件

1
npm install hexo-toc --save

配置 _config.yml

1
2
3
4
5
6
7
8
9
toc:
  maxdepth: 3
  class: toc
  slugify: transliteration
  decodeEntities: false
  anchor:
    position: after
    symbol: '#'
    style: header-anchor

使用

在 Markdown 文章中加入TOC的占位符：

1
<!-- toc -->

效果

最终效果就是在 <!-- toc --> 的位置会有生成一个目录，且可以直接链接到内容所在位置。

不过当目录标题中有链接的话，在正文就不显示了，暂不清楚怎么解决，所以 hexo-toc 插件先弃用了。

1
npm uninstall hexo-toc

此外 Hexo 2.4.1 之后支持了 toc。但是 hexo-toc 与已具备 toc 功能的 Hexo 版本不能共存，因此删掉 hexo-toc 是对的。

最终方案: Hexo2.4.1 之后支持 toc

在文章前面的配置栏添加 toc: true 即可，例如这篇文章前面的配置栏如下：

1
2
3
4
5
6
7
8
9
10
11
---
title: 支持目录
top: 0
categories:
  - 吐槽
  - 改进日志
abbrlink: f03dcc27
date: 2020-09-06 23:01:44
toc: true
toc: true
---

默认的话 Catalog 会自动加上序号，如果要取消的话，打开 ./layout/widget/catalog.ejs，找到下面这一行：

1
<%- toc(post.content) %>

改成下面这行即可。

1
<%- toc(post.content, {class: "toc", list_number: false}) %>
Share