背景

所谓的 自动生成索引 在 markdown 中指的是 TOC(Table of Contents),我们知道,在 markdown 语法中可以使用 # 表示一级标题,## 表示二级标题,以此类推…

通过 TOC 可以让我们在文章的开头就把文章中的标题单独显示出来。这个特性可以帮助读者更好的理解文章的结构,从而更好的理解作者的文章内容。

现在市面上很多使用 markdown 作为文档的网站都支持 TOC ,但是使用 jekyll 生成的 Github Pages 并不支持这一特性,这让很多像笔者一样的使用 jekyll 生成博客的作者很是苦恼。

探索

那么有没有什么方法可以让使用 jekyllGithub Pages 也支持 TOC 特性吗?

原理

经过查阅资料,我们发现 jekyll 默认使用 Kramdown 来解析 markdown 并且将其转换成 HTML 页面。

Kramdown 在转换时默认会将标题生成一个对应的 ID,同时也会将自动生成的 ID 添加到索引中。

有关 Kramdown 自动生成 ID 的规则以及 ID 对应的顶部索引,可以在 Automatic Generation of Header IDsAutomatic “Table of Contents” Generation 查询到。

实现

Kramdown 索引支持 有序列表无序列表 两种表现形式,实际使用时,只需要将以下格式添加到自己的文章中,格式如下:

1. 有序列表(此处可写任意字符串)
{:toc}
* 无序列表(此处可写任意字符串)
{:toc}

特殊情况

Kramdown 也支持不将某些标题显示在索引上,此时只需要在 该标题 下方加上 {:.no_toc} 即可。

实例介绍

* toc
{:toc}

# 一号标题

## 二号标题

### 三号标题
{:.no_toc}

参考链接

How to generate a Table of Contents (ToC) on a rendered Github Pages README.md?

Jekyll Markdown Options

How I Add a Table of Contents to my Jekyll Blog Written in Markdown

Kramdown HTML Converter