gatsby - 在 gatsby.js 上将 frontmatter markdown 转换为 html

Question

有没有一种简单的方法可以在 Gatsby 上将 frontmatter 内容转换为 html，而不仅仅是在 Markdown 时将该内容设置为 html 本身？

所以在这个例子中:

---
about:
description: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in maximus lorem. Sed non neque eget augue eleifend ultricies ac cursus mauris. Aliquam sed lectus at ex ullamcorper euismod in a quam. Donec convallis nisl nec risus suscipit placerat. Proin bibendum, tellus aliquam condimentum vulputate, lacus augue egestas magna, quis iaculis nis


Lorem ipsum dolor sit amet, [Apply](asd.das.com) lorm sadf.
image: /img/new_screen.png
title: Everything you need to grow your audience.
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in maximus lorem. Sed non neque eget augue eleifend ultricies ac cursus mauris. Aliquam sed lectus at ex ullamcorper euismod in a quam. Donec convallis nisl nec risus suscipit placerat. Proin bibendum, tellus aliquam condimentum vulputate, lacus augue egestas magna, quis iaculis nisi ligula at ante. Duis sagittis suscipit felis, id posuere massa posuere et. Phasellus non diam consectetur, eleifend magna ac, facilisis metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent massa ipsum, pulvinar finibus ante 

以 html 形式访问“描述”的最佳方式是什么？

Answer 1

我不相信有一种简单的方法可以完成您的要求。作为替代方案，您可以将 Markdown 分成两个文件，一个用于描述，另一个用于内容。

说明.md

---
pageId: description
groupId: home
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in maximus lorem. Sed non neque eget augue eleifend ultricies ac cursus mauris. Aliquam sed lectus at ex ullamcorper euismod in a quam. Donec convallis nisl nec risus suscipit placerat. Proin bibendum, tellus aliquam condimentum vulputate, lacus augue egestas magna, quis iaculis nis


Lorem ipsum dolor sit amet, [Apply](asd.das.com) lorm sadf.

主文件

---
pageId: main
groupId: home
image: /img/new_screen.png
title: Everything you need to grow your audience.  
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in maximus lorem. Sed non neque eget augue eleifend ultricies ac cursus mauris. Aliquam sed lectus at ex ullamcorper euismod in a quam. Donec convallis nisl nec risus suscipit placerat. Proin bibendum, tellus aliquam condimentum vulputate, lacus augue egestas magna, quis iaculis nisi ligula at ante. Duis sagittis suscipit felis, id posuere massa posuere et. Phasellus non diam consectetur, eleifend magna ac, facilisis metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent massa ipsum, pulvinar finibus ante  

根据您的需要，您可以使用相应的 graphql 查询获取有关“home”组的所有相关信息:

{
  allMarkdownRemark(filter: {frontmatter: {groupId: {eq: "home"}}}) {
    edges {
      node {
        html
        frontmatter {
          pageId
        }
      }
    }
  }
}