0

我正在尝试使用 Gatsby + MDX 设置我的站点。我正在查看此处的文档并希望使用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

4

1 回答 1

1

自述文件rehype-autolink-headings提到：

此软件包适用于具有 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行，但它没有说明它的用途。

于 2021-06-26T19:12:40.800 回答