如何在 Gatsby 中将 markdown frontmatter 显示为 HTML

Question

我的索引页面显示带有图像和文本的简介。 但我无法将文本格式化为 HTML。我在 Netlify CMS 中使用 markdown-widget，并希望在管理视图中分隔内容时换行。 我也尝试过使用dangerouslySetInnerHTML={item.text}，但没有任何运气。

item 只是所有简介的映射。

<p> {item.text} </p>

graphql：

markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        intro {
          blurbs {
            image {
              childImageSharp {
                fluid(maxWidth: 2048, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            heading
            text
          }
          heading
          description
        }
      }
    }
  }

config.yml 中的标签：

- {label: "Intro", name: "intro", widget: "object", fields: [{label: "Heading", name: "heading", widget: "string"}, {label: "Description", name: "description", widget: text}, {label: Blurbs, name: blurbs, widget: "list", fields: [{label: "Image", name: "image", widget: "image"}, {label: "Rubrik", name: "heading", widget: "string"}, {label: "Text", name: "text", widget: "markdown"}]}]}

我想从中读取的 Index.md（我想这是可行的，因为我得到了要显示的数据，而不是 html 形式）

  blurbs:
    - image: /img/img1.jpg
      heading: heading one
      text: >-
        This is the content i want in HTML
    
    - image: /img/img2.jpg
      heading: heading two
      text: >-
        This is also the content i want in HTML
       
        And this should give me a linebreak

Answer 1

您可以使用gatsby-transformer-remark-frontmatter 插件来实现这一点。

安装插件并将其添加到您的 gatsby-config.js：

$ npm install gatsby-transformer-remark-frontmatter

// in your gatsby-config.js
plugins: [
  'gatsby-transformer-remark',
  'gatsby-transformer-remark-frontmatter'
]

要告诉 Gatsby 每个简介中的文本字段包含 markdown，并且您希望将字符串转换为 html，您需要在架构中添加一个 @md 指令。为此，请将以下代码添加到 gatsby-node.js 文件中。

// in your gatsby-node.js

exports.createSchemaCustomization = ({ actions }) => {
  const {createTypes} = actions
  const typeDefs = `
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }

    type Frontmatter {
      intro: Intro
    }

    type Intro {
      blurbs: [Blurb]
    }

    type Blurb {
      text: String @md
    }
  `
  createTypes(typeDefs)
}

现在，简介的 text 字段将有一个特殊的 html 字段，您可以将其包含在查询中：

markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        intro {
          blurbs {
            text {
              html
            }
          }
        }
      }
    }
  }

最后，在您的组件中，您应该能够像这样遍历简介并呈现 html：

...
<div dangerouslySetInnerHTML={{ __html: blurb.text.html }} />

Answer 2

假设一切都已正确设置，看起来如此。

默认情况下，frontmatter 内部有一个 html 属性：

markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        html
        intro {
          blurbs {
            image {
              childImageSharp {
                fluid(maxWidth: 2048, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            heading
            text
          }
        }
      }
    }
  }

注意：在localhost:8000/___graphql测试您的查询

一旦你查询了它，就照你做的那样显示它，嵌套到正确的属性：

dangerouslySetInnerHTML={html}

您可以在https://www.gatsbyjs.com/docs/how-to/sourcing-data/sourcing-from-netlify-cms/查看完整教程