使用 Gatsby.js 搭建静态博客 7 文章目录
内容提要
本文介绍如何用 Gatsby.js 为静态博客生成文章目录：通过 gatsby-transformer-remark 插件的 tableOfContents 获取目录数据，安装 gatsby-remark-autolink-headers 为标题注入锚点使目录可跳转（该插件须置于 prismjs 之前），最后用 CSS 调整样式并在大屏下固定到左下角。
延伸解读
目录数据获取与锚点配置
文章目录的数据来自 gatsby-transformer-remark 插件的 tableOfContents 字段，在 GraphQL 查询中添加即可获得 HTML 字符串。其中 pathToSlugField 参数用于指定锚点链接的前缀，默认使用当前文章的 slug。作者提到即使修改该参数，实际地址也未变化，原因不明。因此配置时需注意：若博客地址本就基于 slug，则无需修改，直接使用 tableOfContents 即可。
锚点注入与插件顺序
仅获取目录字符串还不够，因为 Markdown 转 HTML 后标题没有 id，点击目录无法跳转。需要安装 gatsby-remark-autolink-headers 插件为标题自动注入锚点。配置时需将其放在 gatsby-transformer-remark 的 plugins 数组中。若同时使用 prismjs 代码高亮插件，必须将 autolink 放在 prismjs 之前，否则会产生冲突，导致锚点功能异常。
样式调整与固定定位
目录的样式需要额外处理，因为全局样式可能影响 ul 和 li 的默认表现。作者提供的 CSS 中重置了列表样式、边距等，并利用媒体查询在屏幕宽度大于 1045px 时将目录固定到左下角，设置宽度、最大高度和滚动。这样在大屏下目录不会随内容滚动，方便读者随时跳转，但小屏下仍保持文档流内显示。
Q&A
如何用 Gatsby.js 为静态博客生成文章目录？
使用 gatsby-transformer-remark 插件的 tableOfContents 字段获取目录数据，再安装 gatsby-remark-autolink-headers 为标题注入锚点，最后用 CSS 调整样式。
gatsby-transformer-remark 的 tableOfContents 怎么用？
在 GraphQL 查询中添加 tableOfContents 字段，可传入 pathToSlugField 参数指定锚点链接地址，默认使用当前文章的 slug。
为什么点击目录链接没有跳转？
因为 Markdown 转 HTML 后标题没有 id 锚点，需要安装 gatsby-remark-autolink-headers 插件为标题注入锚点。
gatsby-remark-autolink-headers 和 prismjs 插件冲突怎么办？
必须将 gatsby-remark-autolink-headers 放在 gatsby-remark-prismjs 之前，否则会有冲突。
如何调整 Gatsby 博客目录的样式？
使用 CSS 类 .css-toc 设置颜色、内边距、背景等，并通过媒体查询在大屏（min-width: 1045px）时将目录固定到左下角。
tableOfContents 的 pathToSlugField 参数有什么作用？
用于生成锚点链接地址，默认值为当前文章的 slug。如果地址本来就是 slug，则无需修改。
