如何使用gatsby和Netlify CMS进行数据收集

Question

因此，我刚刚设置了一个点击安装的盖茨比与Netlify CMS。

我试图找出如何实现一种将工作人员添加到默认联系人页面的方法。

在jekyllrb中，有一个在_config.yml中定义的简单集合内容，您可以从中获取数据。

有类似的方法来使用Gatsby的“自定义”数据收集吗？我不想为每个工作人员单独的网页，只是循环所有成员在页面上显示，并与Netlify-CMS集成，以便我可以添加/更新/删除工作人员。(我想我想在一个名为<Staff />或类似的react组件中这样做。

我试图添加一个数据文件夹，我认为该文件夹可以保存一个md文件来获取集合。但是我得到了一个错误，src/data/collection.md文件需要一个模板(例如templateKey: product-page)

{
 resolve: `gatsby-source-filesystem`,
 options: {
   name: `data`,
   path: `${__dirname}/src/data/`,
   ignore: [`**/\.*`], // ignore files starting with a dot
   },
 },

我知道这是个模糊的问题，但也许有人能给我指明正确的方向？

Answer 1

是否有类似的方法来使用Gatsby的“自定义”数据收集？

当然有。在项目的根处创建一个/static文件夹(如果您还没有创建它)。在那里创建另一个/admin文件夹并在那里放置一个config.yml。最后的结构是：/static/admin/config.yml。

基本上，config.yml文件是您的集合和CMS将根据广泛的来自Netlify的文档配置的位置。它还公开了一个localhost:8000/admin (或生产上的yourDomain.com/admin ) URL，以登录到您的私有CMS并对您的集合执行CRUD操作。

您所描述的情况可能如下所示：

collections:
  - label: "Pages"
    name: "pages"
    files:
      - label: "Contact"
        name: "contact"
        file: "site/content/about.yml"
        fields:
          - {name: templateKey, label: Template Key, required: true, widget: hidden, default: contact}
          - {label: Title, name: title, widget: string}
          - label: Team
            name: team
            widget: list
            fields:
              - {label: Name, name: name, widget: string}
              - {label: Position, name: position, widget: string}
              - {label: Photo, name: photo, widget: image}

注意:在开始收集之前，您需要设置一些强制参数。因为它们是私人的，所以我忽略了它们。

使用这个片段，您将创建一个文件夹页面集合，其中包含一个联系人页面，其余的字段都是不言自明的，使用文档作为支持来理解每个实体的字段和默认/可选参数。

在联系人页面中，只需使用由页面查询字段过滤的templateKey：

import { graphql } from 'gatsby';
import React, { useState } from 'react';
import Layout from '../components/templates/Layout/Layout';

const Contact = ({ data }) => {
   console.log("your staff data is", data)

  return <Layout>
          <Staff staff={data.team}/>
  </Layout>;
};

export const contactData = graphql`
    query getContactData {
        contact: allMarkdownRemark (
            filter: { frontmatter: { templateKey: { eq: "contact" }}}) {
            edges {
                node {
                    html
                    frontmatter {
                        team {
                          name
                          position
                          photo
                        }
                    }
                }
            }
        }
`;