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

Question

所以我只需使用 Netlify CMS 设置 Gatsby 的一键式安装程序。

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

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

是否有类似的方法可以在 Gatsby 中使用“自定义”数据集合？我不希望每个员工都有单独的页面，只是一种循环所有成员以显示在页面上并与 Netlify-CMS 集成的方式，这样我就可以添加/更新/删除员工。 （我想我想在一个名为 <Staff /> 或类似的反应组件中做到这一点

我尝试添加一个我认为可以保存 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 将根据广泛的 documentation from 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}

注意：在开始使用集合之前，您需要设置一些强制性参数。因为它们是私有的，所以我省略了它们。

使用这个sn-p，你正在创建一个页面的文件夹集合，里面有一个联系页面，其余的字段是不言自明的，使用文档作为理解字段的支持和默认/可选每个实体的参数。

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

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