Блог

Итак, я просто настроил установщик Gatsby в один клик с помощью Netlify CMS.

Я пытаюсь выяснить, как реализовать способ добавления сотрудников на страницу контактов по умолчанию.

в jekyllrb было определено простое содержимое коллекции _config.yml , из которого вы могли извлекать данные.

существует ли аналогичный способ использования «пользовательских» наборов данных с Gatsby? мне не нужна отдельная страница для каждого сотрудника, просто способ зациклить всех участников для отображения на странице и интеграции с Netlify-CMS, чтобы я мог ДОБАВЛЯТЬ / ОБНОВЛЯТЬ / УДАЛЯТЬ сотрудника. (я думаю, я хочу сделать это в вызываемом компоненте react <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 будут настроены на основе обширной документации от Netlify. Он также предоставляет localhost:8000/admin URL-адрес (или yourDomain.com/admin на рабочем месте) для входа в вашу частную 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
                        }
                    }
                }
            }
        }
`;