不生成锚链接的Gatsby自动链接头

Question

我试图让autolink头为我的一个项目工作。

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

下面是我的示例代码提交: 5ae7114

示例mdx托管在http://localhost:8000/sample on yarn 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: {},
          },
        ],
      },
    },
  ]

Answer 1

需要考虑的事情

gatsby-plugin-page-creator没有从graphql节点mdx而不是markdownRemark创建注释处理的html页面，而是普通的md/mdx文件(我用它来发布示例问题)(尽管文档找不到这个或配置的备注版本)，我不得不为新页面的创建和带有路径的graphql节点更新创建gatsby-node.js。

示例博客模板

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
    }
  }
`;

代码