首页 文章

netlify gatsby - 列表小部件上的markdownRemark

提问于
浏览
0

我在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" }

然后我在我的cv-page组件中查询数据:

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供参考

1 回答

  • 0

    gatsby-transformer-remark 变换只会转换 .md 文件正文中的markdown . 它不知道转换 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是空的,因为正文是空的 .

相关问题