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

Question

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

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

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

Config.yml

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, widget: hidden, 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 }

contact.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: 0987 123 456
fax: 333-333-3333
email: example@example.com

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
        }
      }
    }
  }
`

Answer 1

您没有在 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 中 phone 下 fax 的解构和渲染，其余代码应该单独工作。

"Cannot query field 'fax' on type 'MarkdownRemarkFrontmatter'"

在运行 gatsby clean 中并在 localhost:8000/___graphql 操场上测试您的查询。奇怪的是，您有一个名为 slug 的 hidden 字段（具有 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>
)

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

Add custom Netlify CMS widget to Gatsby starter Yellowcake

reactjs

graphql

gatsby

netlify

netlify-cms