如何转换包含 Markdown 的 YAML 以在 Gatsby 中显示答案

【问题标题】：How to transform YAML containing Markdown for display in Gatsby如何转换包含 Markdown 的 YAML 以在 Gatsby 中显示
【发布时间】：2020-01-14 22:33:09
【问题描述】：

我正在为使用 GasbyJS 和 NetlifyCMS 内容的朋友开发一个商业网站。我在确定如何使用 CMS 来维护不像博客文章那样结构化的 Markdown 格式信息时遇到了一些问题，因为那里的许多教程都是从那里工作的。

我的 Netlify CMS 配置如下：

backend:
    name: github
    repo: my/repo

media_folder: static/assets
public_folder: assets

collections:
    - label: 'Pages'
      name: 'pages'
      files:
          - label: 'Home Page'
            name: 'home'
            file: 'content/home.yml'
            fields:
                - {
                      label: 'Home Banner Text',
                      name: home-banner-text,
                      widget: markdown,
                  }
                - {
                      label: 'Home Acting Text',
                      name: home-acting-text,
                      widget: markdown,
                  }
                - {
                      label: 'Home Costume Design Text',
                      name: home-costume-design-text,
                      widget: markdown,
                  }
                - {
                      label: 'Home Modeling Text',
                      name: home-modeling-text,
                      widget: markdown,
                  }

这会在C:/path/to/my/site/content/home.yml 生成一个 YML 文件，因此：

home-banner-text: 'Welcome to my site!'
home-acting-text: I **am an actor.** Click here to learn about my acting work.
home-costume-design-text: I am a costume designer. Click here to learn about my costume design work.
home-modeling-text: I am a model. Click here to learn about my modeling work.

这一切看起来相当简单，而且我认为合乎逻辑——该网站将有一个包含四个内容部分的主页，我希望网站所有者能够使用格式化的内容修改每个部分。

我想不通的是，一旦它通过gatsby-source-filesystem 获取，如何在 Gatsby 中对其进行转换。有一个 gatsby-transform-yaml 包，但它不会将 YML 字段值中的任何 Markdown 转换为 HTML，虽然我发现了一些通过添加 Markdown 支持来扩展它的包，但它们都需要在任何 Markdown 上添加某种前缀值（即home-acting-text: md//I **am an actor.**）以确定应该解析哪些值，我想不出任何方法让 Netlify CMS 注入它。

看来我可能不得不在gatsby-node.js 中做一些自定义逻辑，但我有点不知从何开始——这似乎是一个足够常见的用例，我想知道我是否错过了东西。

任何指导将不胜感激！ :)

【问题讨论】：

标签： yaml markdown gatsby netlify-cms

【解决方案1】：

您查看过 Gatsby 文档吗？我假设你有，但如果你还没有，那么我建议从那里开始。快速搜索发现：Sourcing from Netlify CMS

【讨论】：

我有，是的。正如我在问题中提到的那样 - 它与我的用例并不匹配。文档使用的示例是博客文章，它们表示为 Markdown 文件，带有一个 Markdown 格式的正文和一个未格式化的 frontmatter。相反，我有一个包含 Markdown 格式值的 YML（或 JSON）文件，我需要弄清楚如何用 Gatsby 解析它。