将自定义 Netlify CMS 小部件添加到 Gatsby starter Yellowcake

如何解决将自定义 Netlify CMS 小部件添加到 Gatsby starter Yellowcake

我正在使用 Gatsby starter 'YellowCake'，其中包含 Netlify CMS。

我正在尝试向初学者联系页面添加另一个自定义小部件。我想在“电话”下添加“传真”。我已将其添加到 config.yml 文件中，并将传真号码添加到我的 contact.md 文件中，并将其添加到我的 ContactPage.js 模板中。但它没有显示在页面上。

我不确定我遗漏了什么或做错了什么。希望得到任何帮助。

配置文件

collections: # A list of collections the CMS should be able to edit
  - name: 'pages'
    label: 'Page'
    delete: false # Prevent users from deleting documents in this collection
    editor:
      preview: true
    files:
      - file: 'content/pages/contact.md'
        label: 'Contact Page'
        name: 'contact-page'
        fields:
          - {
              label: Template,name: template,widget: hidden,default: ContactPage,}
          - { label: Slug,name: slug,default: 'contact' }
          - { label: Title,name: title,widget: string }
          - {
              label: Featured Image,name: featuredImage,widget: image,options:
                { media_library: { config: { imageShrink: 2600x2600 } } },}
          - { label: Subtitle,name: subtitle,widget: markdown }
          - { label: Body,name: body,widget: markdown }
          - { label: Address,name: address,widget: text }
          - { label: Phone,name: phone,widget: string }
          - { label: Fax,name: fax,widget: string }
          - { label: Email Address,name: email,widget: string }

联系.md

template: ContactPage
slug: contact
title: Contact Page
featuredImage: https://ucarecdn.com/e22a858a-b420-47af-99f6-ed54b6860333/
subtitle: This is the contact page subtitle.
address: '404 James St,Burleigh Heads QLD 4220'
phone: [phone]
fax: [phone]
email: [e-mail]

ContactPage.js（模板）

import React from 'react'
import { MapPin,Smartphone,Mail,Printer } from 'react-feather'
import { graphql } from 'gatsby'

import PageHeader from '../components/PageHeader'
import FormSimpleAjax from '../components/FormSimpleAjax'
import Content from '../components/Content'
import GoogleMap from '../components/GoogleMap'
import Layout from '../components/Layout'
import './ContactPage.css'

// Export Template for use in CMS preview
export const ContactPageTemplate = ({
  body,title,subtitle,featuredImage,address,phone,fax,email,locations
}) => (
  <main className="Contact">
    <PageHeader
      title={title}
      subtitle={subtitle}
      backgroundImage={featuredImage}
    />
    <section className="section Contact--Section1">
      <div className="container Contact--Section1--Container">
        <div>
          <Content source={body} />
          <div className="Contact--Details">
            {address && (
              <a
                className="Contact--Details--Item"
                href={`https://www.google.com/maps/search/${encodeURI(
                  address
                )}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                <MapPin /> {address}
              </a>
            )}
            {phone && (
              <a className="Contact--Details--Item" href={`tel:${phone}`}>
                <Smartphone /> {phone}
              </a>
            )}
            {fax && (
              <a className="Contact--Details--Item" href={`fax:${fax}`}>
                <Printer /> {fax}
              </a>
            )}
            {email && (
              <a className="Contact--Details--Item" href={`mailto:${email}`}>
                <Mail /> {email}
              </a>
            )}
          </div>
        </div>

        <div>
          <FormSimpleAjax name="Simple Form Ajax" />
        </div>
      </div>
    </section>

    <GoogleMap locations={locations} />
  </main>
)

const ContactPage = ({ data: { page } }) => (
  <Layout
    meta={page.frontmatter.meta || false}
    title={page.frontmatter.title || false}
  >
    <ContactPageTemplate {...page.frontmatter} body={page.html} />
  </Layout>
)

export default ContactPage

export const pageQuery = graphql`
  query ContactPage($id: String!) {
    page: markdownRemark(id: { eq: $id }) {
      ...Meta
      html
      frontmatter {
        title
        template
        subtitle
        featuredImage
        address
        phone
        email
        locations {
          mapLink
          lat
          lng
        }
      }
    }
  }
`

解决方法

您没有在 GraphQL 查询中获取 fax 字段：

export const pageQuery = graphql`
  query ContactPage($id: String!) {
    page: markdownRemark(id: { eq: $id }) {
      ...Meta
      html
      frontmatter {
        title
        template
        subtitle
        featuredImage
        address
        phone
        email
        fax # <-- here
        locations {
          mapLink
          lat
          lng
        }
      }
    }
  }
`

由于 JSX 中 fax 下 phone 的解构和呈现，其余代码应该单独工作。

“无法在类型 'MarkdownRemarkFrontmatter' 上查询字段 'fax'”

运行 gatsby clean 和在 localhost:8000/___graphql 游乐场中测试您的查询。奇怪的是，您有一个名为 hidden（具有 slug 值）的 contact 字段，但您没有使用它。在您的情况下，我将使用页面查询，例如：

export const contactData = graphql`
    query getContactData {
        page: allMarkdownRemark(
            filter: { frontmatter: { slug: { eq: "contact" }}}) {
            edges {
                node {
                 ...Meta
                 html
                 frontmatter {
                   title
                   template
                   subtitle
                   featuredImage
                   address
                   phone
                   fax
                   email
                   locations {
                      mapLink
                      lat
                      lng
                     }
                  }
               }
            }
        }
    }
`;

然后是这样的：

const ContactPage = ({ data: { page: {
      edges: [{
        node: {
          html,frontmatter
        }
      }]
    }}}) => (
  <Layout
    meta={frontmatter.meta || false}
    title={frontmatter.title || false}
  >
    <ContactPageTemplate {...frontmatter} body={html} />
  </Layout>
)