如你所见,我的这个博客里,稍长点的文章,都会生成目录树(Table of Content),并且配合有 Bootstrap 的 affix、ScrollSpy 效果,同样地,在 Jekyll 构建的静态博客上,我一样想生成目录树.

Jekyll 的 Plugins 页面中有提到一个插件 jekyll-toc-generator,但其实没有必要使用插件,因为 Jekyll 的 Markdown 渲染器 kramdown 已经具备这个功能,我们只需要启用它即可.

启用 kramdown#

打开 _config.yml 文件,确保以下一行存在:

markdown: kramdown

生成 TOC#

接下来是在文章中标识 toc 的生成位置:

1. * 目录 
2. {:toc} 
3. # 陈三 
4. ## 陈三的博客 

请注意,* 目录这一行是必需的,它表示目录树列表,至于星号后面写什么请随意,如果要把某标题从目录树中排除,则在该标题的下一行写上 {:.no_toc}.

目录深度可以通过 config.yml 文件中添加 toc_levels 选项来定制,默认为 1..6,表示标题一至标题六全部渲染.

{:toc} 默认生成的目录列表会添加 id 值 markdown-toc,我们可以自定义 id 值,比如 {:toc #chenxsan},生成的目录列表添加的 id 将会是 chenxsan.