Gatsby 自动链接标头不生成锚链接答案

【问题标题】：Gatsby autolink headers not generating anchor linksGatsby 自动链接标头不生成锚链接
【发布时间】：2021-03-01 19:45:53
【问题描述】：

我正在尝试让自动链接标题为我的一个项目工作。

参考：https://www.gatsbyjs.com/plugins/gatsby-remark-autolink-headers/#gatsby-remark-autolink-headers

这是我的示例 code 提交：5ae7114

示例 mdx 托管在 http://localhost:8000/sampleyarn start 上。

gatsby-config.js

plugins: [
    `gatsby-plugin-mdx`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `./src/pages/`,
      },
      __key: `pages`,
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `sample`,
        path: `./src/content/sample/docs/`,
      },
    },
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        name: `sample`,
        path: `./src/content/sample/docs/`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {},
          },
        ],
      },
    },
  ]

【问题讨论】：

删除了不必要的代码。抱歉，我赶时间。
您是否尝试过删除空选项对象{}？
@FerranBuireu 是的。没有帮助。我试图传递参数，但都是可选的。
尝试左右移动整个gatsby-transformer-remark插件的位置
@FerranBuireu 我遇到了插件订购问题，但这里不是这种情况。不过谢谢。

标签： gatsby

【解决方案1】：

需要考虑的事项

gatsby-plugin-page-creator 不会从graphql 节点mdx 而不是markdownRemark 创建remark 处理的html 页面而不是普通的md/mdx 文件（我用它来发布示例问题）（尽管文档找不到备注此版本或配置）

我必须创建 gatsby-node.js 以创建新页面并使用路径更新 graphql 节点。

示例博客模板

import { graphql } from "gatsby";
import React from "react";

export default (props) => {
  const { html} = props.data.markdownRemark;
  return (
          <section dangerouslySetInnerHTML={{ __html: html }} />
  );
};

export const query = graphql`
  query PostsBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
    }
  }
`;

Code

【讨论】：

将内容文件夹移出 src，仅将 md 文件分开，将 md 扩展名添加到 gatsby-plugin-mdx，md 对我来说已经足够了。