在 Gatsby NetlifyCMS 项目中从 frontmatter 渲染 markdown/HTML答案

【问题标题】：Render markdown/HTML from frontmatter in a Gatsby NetlifyCMS project在 Gatsby NetlifyCMS 项目中从 frontmatter 渲染 markdown/HTML
【发布时间】：2020-04-01 10:25:10
【问题描述】：

NetlifyCMS 提供了一个 markdown 编辑器，允许在 frontmatter 中插入 markdown（和代码块）。

生成的降价文件可能包含如下内容：

---
featureSubtitle: |-
  ![fdsaf](/img/cdc-w9keokhajkw-unsplash.jpg "blah")

  # Markdown H1

  ## Markdown H2


  <h1>Test</h1>
  <p>Paragraph</p>
---

然后通过 graphql 查询从 frontmatter 将其加载到页面上，例如：

export const pageQuery = graphql`
  query FeaturePageByID($id: String!) {
    markdownRemark(id: { eq: $id }) {
      id
      html
      frontmatter {
        title
        description
        featureSubtitle
      }
    }
  }
`;

和

{featureSubtitle && featureSubtitle ? (
                  <div
                    dangerouslySetInnerHTML={{ __html: featureSubtitle }}
                  />
                ) : null}

然而，这似乎可以正确呈现 HTML，但不能正确呈现降价。

【问题讨论】：

标签： reactjs markdown gatsby netlify-cms

【解决方案1】：

gatsby transformer remark plugin 确实将 markdown 转换为您的 markdown 文件正文中的 html，并在您的 markdown 文件的顶部获取 frontmatter 数据。 frontmatter 主要用于元数据。但是，您可以自己将 frontmatter 字段转换为 html。请参阅this 链接。

或者确保您在 config.yml 中为 netlify cms 使用降价字段的正文：

fields:
      - { label: "featureSubtitle", name: "body", widget: "markdown" }

然后可以在您的graphql查询中使用html字段将其检索为html并像这样使用：

<div dangerouslySetInnerHTML={{ __html: html}} />

【讨论】：

线程中的链接有一个非常适合我需要的解决方案。谢谢你。