如你所见,我的这个博客里,稍长点的文章,都会生成目录树(Table of Content),并且配合有 Bootstrap 的 affix、ScrollSpy 效果,同样地,在 Jekyll 构建的静态博客上,我一样想生成目录树.
Jekyll 的 Plugins 页面中有提到一个插件 jekyll-toc-generator,但其实没有必要使用插件,因为 Jekyll 的 Markdown 渲染器 kramdown 已经具备这个功能,我们只需要启用它即可.
启用 kramdown#
打开 _config.yml 文件,确保以下一行存在:
markdown: kramdown
生成 TOC#
接下来是在文章中标识 toc 的生成位置:
- *目录
- {:toc}
- #陈三
- ##陈三的博客
请注意,* 目录这一行是必需的,它表示目录树列表,至于星号后面写什么请随意,如果要把某标题从目录树中排除,则在该标题的下一行写上 {:.no_toc}.
目录深度可以通过 config.yml 文件中添加 toc_levels 选项来定制,默认为 1..6,表示标题一至标题六全部渲染.
{:toc} 默认生成的目录列表会添加 id 值 markdown-toc,我们可以自定义 id 值,比如 {:toc #chenxsan},生成的目录列表添加的 id 将会是 chenxsan.
