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

Posted 2023-03-08

【中文标题】如何在 Gatsby 中将 markdown frontmatter 显示为 HTML

【英文标题】：How to display markdown frontmatter as HTML in Gatsby

【发布时间】：2021-05-13 02:42:31

【问题描述】：

我的索引页面显示带有图像和文本的简介。 但我无法将文本格式化为 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

【参考方案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  />

【参考方案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/查看完整教程

【讨论】：

问题是我在 md 文件的 HTML 部分中没有文本数据。据我了解，HTML 是结尾 === 之后的代码。我希望它在文本 frontmatter key/value 中，但呈现为 html。如果这有意义？

在这种情况下，frontmatter 内必须有一个项目，如果你的对象。如果您查询它（在localhost:8000/___graphql 中），它应该显示 HTML。该字段可以使用dangerouslySetInnerHTML

显示

“blurbs”是一个对象数组，但我在那个嵌套级别中找不到 html。只能查询图片、标题和文字?

该字段是否在widget中设置为markdown？

是的！由于它位于列表小部件中，会不会是一些问题？