我如何通过 gatsby 和 Netlify CMS 使用数据收集

如何解决我如何通过 gatsby 和 Netlify CMS 使用数据收集

所以我只是用 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
   },},

我知道这是一个模糊的问题，但也许有人可以指出我正确的方向？

解决方法

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

注意：在开始收集之前，您需要设置一些强制性参数。由于它们是私有的，我省略了它们。

使用此代码段，您将创建一个页面的文件夹集合，其中包含一个联系人页面，其余字段一目了然，使用文档作为理解字段和默认/可选参数的支持每个实体。

在您的联系人页面中，您只需要使用由 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
                        }
                    }
                }
            }
        }
`;