netlify gatsby - 列表小部件上的 markdownRemark答案

【问题标题】：netlify gatsby - markdownRemark on a list widgetnetlify gatsby - 列表小部件上的 markdownRemark
【发布时间】：2019-03-25 05:28:45
【问题描述】：

我从gatsby netlify started repo 向config.yml 文件添加了一个新页面：

  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/CV/index.md"
        label: "CV"
        name: "CV"
        fields:
          - {
              label: "Template Key",
              name: "templateKey",
              widget: "hidden",
              default: "cv-page",
            }
          - { label: "Name", name: "name", widget: "string" }
          - { label: "Portrait", name: "portrait", widget: "image" }
          - label: "Categories"
            name: "categories"
            widget: "list"
            fields:
              - { label: Title, name: title, widget: string }
              - { label: "Body", name: "body", widget: "markdown" }

然后我在我的简历页面组件中查询数据：

export const cvPageQuery = graphql`
  query CVPage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        name
        portrait
        categories {
          title
          body
        }
      }
    }
  }
`;

现在我希望 gatsby-transformer-remark 将类别正文从 markdown 解析为 html - 但查询只是返回一个 markdown 字符串（例如 body: "* one↵* two↵* three↵* four"）。

之前，当我将 markdown 小部件作为字段直接放在页面上时，我只需在 frontmatter 之外查询 html，数据就会在那里。为什么这不适用于嵌套在列表中的小部件？

感谢您的帮助。

编辑：repo with my code 供参考

【问题讨论】：

标签： graphql gatsby netlify netlify-cms

【解决方案1】：

gatsby-transformer-remark 转换只会转换 .md 文件正文中的降价。它不知道在您的frontmatter 中转换字段。

pages/CV/index.md

---
templateKey: cv-page
name: Miha Šušteršič
portrait: /img/headshot.png
categories:
  - body: |-
      * one
      * two
      * three
      * four
    title: Work experience
  - body: |-
      * one
      * two 
      * three
      * four
    title: Education and training
---

来自查询：

{
  "markdownRemark": {
    "html": "",
    "frontmatter": {
      "name": "Miha Šušteršič",
      "portrait": "/img/headshot.png",
      "categories": [{
          "title": "Work experience",
          "body": "* one\n* two\n* three\n* four"
        },
        {
          "title": "Education and training",
          "body": "* one\n* two \n* three\n* four"
        }
      ]
    }
  }
}

从上面的查询结果可以看出，你的html是空的，因为body是空的。

【讨论】：