Question

对盖茨比和Netlify来说都是新手。到目前为止，我设法实现的目标是：

设置基本的盖茨比项目
已将其同步到Netlify
产生了GraphiQL查询

我有一个admin> config.yml文件，该文件填充了我可以在netlify中使用的字段

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/subscription/index.md"
        label: "Subscription Page"
        name: "Subscription Page"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "subscription-page"}
          - { label: 'Features Header Title', name: 'featuresHeaderTitle', widget: 'string' }
          - { label: 'Features List', name: 'featuresList', widget: 'list', 
              fields: [ 
                {label: Feature Title, name: featureTitle, widget: text},
                {label: Feature Description, name: featureDescription, widget: markdown}
                {label: Feature Published, name: featurePublished, widget: boolean}
              ] 
            }
          - { label: 'Seconday Features Header Title', name: 'secondaryFeaturesHeaderTitle', widget: 'string' }
          - { label: 'Secondary Features List', name: 'secondaryFeaturesList', widget: 'list', 
              fields: [ 
                {label: Secondary Feature Title, name: secondaryFeatureTitle, widget: text},
                {label: Secondary Feature Description, name: secondaryFeatureDescription, widget: markdown}
                {label: Secondary Feature Published, name: secondaryFeaturePublished, widget: boolean}
              ] 
            }

一旦我在Netlify中发布了一个页面并将其同步到我的GitHub帐户，它就会生成一个带有以下内容的md文件：

---
title: Subscription
featuresHeaderTitle: 24 June - Features Header Title Again
featuresList:
  - featureTitle: Feature Title 1
    featureDescription: Feature Description 1
  - featureTitle: Feature Title 2
    featureDescription: Feature Description 2
secondaryFeaturesHeaderTitle: 24 June - Subscription Secondary Features Header Title
secondaryFeaturesList:
  - secondaryFeatureTitle: Secondary Feature Title
    secondaryFeatureDescription: Secondary Feature Description
  - secondaryFeatureTitle: Secondary feature title
    secondaryFeatureDescription: Secondary feature description
  - secondaryFeatureTitle: Secondary feature title 3
    secondaryFeatureDescription: Secondary feature description 3
---

在GraphiQL中，我有一个查询，我认为它是正确的，它在代码导出器中产生以下内容：

import React from "react"
import { graphql } from "gatsby"

const ComponentName = ({ data }) => <pre>{JSON.stringify(data, null, 4)}</pre>

export const query = graphql`
  {
    markdownRemark(frontmatter: {title: {eq: "Subscription"}}) {
      frontmatter {
        featuresHeaderTitle
        featuresList {
          featureDescription
          featureTitle
        }
        secondaryFeaturesHeaderTitle
        secondaryFeaturesList {
          secondaryFeatureDescription
          secondaryFeatureTitle
        }
      }
    }
  }
`

export default ComponentName

我的问题是，如何在带有HTML的模板中显示以上查询？我想显示如下内容：

功能标题标题
功能列表中的物品列表（ul / li）
次要功能标题标题
次要功能列表中项目的列表（ul / li）

component.js

import * as React from 'react'
import { graphql } from 'gatsby'


const ComponentName = ({data}) => {
  return (
    <div>
      {data.markdownRemark.frontmatter.featuresHeaderTitle}
    </div>
  )
}

export const query = graphql`
  {
    markdownRemark(frontmatter: {title: {eq: "Subscription"}}) {
      frontmatter {
        featuresHeaderTitle
        featuresList {
          featureDescription
          featureTitle
        }
        secondaryFeaturesHeaderTitle
        secondaryFeaturesList {
          secondaryFeatureDescription
          secondaryFeatureTitle
        }
      }
    }
  }
`


export default ComponentName```

GraphiQL / Gatsby / Netlify CMS-将netlify查询转换为模板

0 个答案: