Question

有没有一种简单的方法可以将前端内容转换为Gatsby上的html，而不仅仅是在缩减时将该内容设置为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分解为两个文件，一个用于描述，另一个用于内容。

description.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.

main.md

---
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

根据您的需求，您可以获得有关＆＃34; home＆＃34;的所有相关信息。具有相应graphql查询的组：

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

Answer 2

如果您通过Gatsby的graphql图层通过gatsby-transformer-remark访问您的降价标记，这是建议的方式，您可以在graphql查询中随机获取它（随机示例）：

allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      limit: 1000
    ) {
      edges {
        node {
          html
          id
          frontmatter {
            date
            path
            title
          }
        }
      }
    }

然后你可以通过组件中的道具访问它，例如： props.data.markdownRemark.frontmatter.description。

将frontmatter markdown转换为gatsby.js上的html

2 个答案: