如何从单个 Markdown 文件创建多个页面？

Question

在 Gatsby 中，我有 file.md，我想生成多个页面——file.md 的每个部分一个页面。

gatsby-transformer-remark

使用gatsby-transformer-remark 时，我可以使用allMarkdownRemark.nodes.html 获取整个markdown 文件的HTML。如何获取文件每个部分的 HTML？例如：

file.md:

# section 1

**bold**

# section 2

foo

我想获得一组 HTML 部分，例如：

[
  '<div><h1>section 1</h1><b>bold</b></div>', 
  '<div><h1>section 2</h1>foo</div>'
]

gatsby-plugin-mdx

有了gatsby-plugin-mdx，我什么时候做

query MyQuery {
  mdx {
    headings {
      value
      depth
    }
  }
}

我明白了

{
  "data": {
    "mdx": {
      "headings": [
        {
          "value": "Section1",
          "depth": 1
        },
        {
          "value": "Section2",
          "depth": 1
        },
      ]
    }
  },
  "extensions": {}
}

但是当我这样做时：

query MyQuery {
  mdx(headings: {elemMatch: {value: {eq: "Section1"}}}) {
    body
  }
}

body 是整个文件，而不仅仅是 Section1。

Answer 1

在您的降价文件中，file.md 之后的所有内容都位于--- 之后是降价的主体，您可以直接获取其中的一部分。

我会建议使用 MDX (Markdown + JSX) 的不同解决方法，它允许您将 React 的逻辑添加到降价文件。 Gatsby 有一个详细的插件：https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/

不使用 MDX 的另一种解决方法是在降价中使用“部分”。比如这样的结构：

---
title: Test
section1:
  description: some description 
section2:
    title: Some **bold title** for the section 2
---
The rest of the body content

将为每个部分创建一个节点，因此您的对象将分别类似于allMarkdownRemark.nodes.section1.description 和allMarkdownRemark.nodes.section2.title。

请注意，您可以添加所有支持 Markdown 的样式。