带有 rehype-autolink-headers 的 gatsby-plugin-mdx 仅适用于 wrap 选项

Question

我正在尝试使用 Gatsby + MDX 设置我的网站。我正在查看文档here 并希望使用autolink-header-option。我已经尝试为此使用 rehype 和 remark 插件，但我只能使用 Rehype 插件并且只能使用 wrap 选项。我更喜欢标题前有链接的 GitHub（默认）样式。

我在gatsby-config.js 中使用以下配置，并在更新文件后清除了.cache 和public，以确保没有缓存任何内容。我也没有收到任何错误，一切都成功构建并运行，只是没有任何指向标题的链接。

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    rehypePlugins: [
      // To pass options, use a 2-element array with the
      // configuration in an object in the second element
      require("rehype-autolink-headings"),
    ],
  },
},

更新

在尝试了多种配置后，我能够让它按预期工作的方法是使用不同的插件配置。

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    gatsbyRemarkPlugins: [ `gatsby-remark-autolink-headers` ],
    plugins: [ `gatsby-remark-autolink-headers` ],
  },
}

gatsbyRemarkPlugins 和 plugins 都是必需的：https://github.com/gatsbyjs/gatsby/issues/15486

Answer 1

rehype-autolink-headings 的 README 提到：

此软件包适用于具有 ID 的标题。向标题添加 ID 的一种方法是在此插件之前使用 remark-slug。

将您的配置更改为以下内容应该可以解决它：

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    rehypePlugins: [
      require("rehype-slug"),
      // To pass options, use a 2-element array with the
      // configuration in an object in the second element
      require("rehype-autolink-headings"),
    ],
  },
},

事实上，您链接到的文档也有这个额外的require 行，但它没有说明它的用途。