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

Question

在 Gatsby 中，我file.md有file.md.

盖茨比变压器备注

使用时gatsby-transformer-remark，我可以使用allMarkdownRemark.nodes.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>'
]

盖茨比插件 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是整个文件，而不仅仅是第 1 节。

Answer 1

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

我会建议使用 MDX ( Mark d own + JS X ) 的不同解决方法，它允许您在Markdown 文件中添加 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。

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