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

Question

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

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

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

有没有类似的方法来使用 Gatsby 的“自定义”数据收集？我不希望每个员工都有一个单独的页面，只是一种让所有成员循环显示在页面上并与 Netlify-CMS 集成的方法，这样我就可以 ADD/UPDATE/DELETE 员工。（我想我想在一个名为 <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

there a similar way to use "custom" data collections with Gatsby?

当然有。在项目的根目录下创建一个 /static 文件夹（如果尚未创建）。在那里创建另一个 /admin 文件夹并在其中放置一个 config.yml。最终结构为：/static/admin/config.yml.

基本上，config.yml 文件是您的 collection 和 CMS 将根据广泛的 documentation from Netlify 配置的地方。它还公开了一个 localhost:8000/admin（或生产中的 yourDomain.com/admin）URL 以登录您的私人 CMS 并对您的 collection 执行 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}

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

使用此代码段，您将创建一个页面文件夹 collection，其中包含一个联系页面，其余字段相当 self-explanatory，请使用文档作为支持来理解每个实体的字段和 default/optional 参数。

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

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

How do i use data collection with gatsby and Netlify CMS

javascript

reactjs

gatsby

netlify

netlify-cms