GatsbyJS で構築しているサイトの一部分を Netlify CMS で編集できるようにする

---
title: CMS編集箇所サンプル
type: cms-editable-content
contents:
  - title: |-
      コンテンツ1タイトル
    content: |-
      コンテンツ1内容
  - title: |-
      コンテンツ2タイトル
    content: |-
      コンテンツ2内容
---

collections:
  - name: 'cms-editable-content' // マークダウンの type と合致させます
    label: 'CMS編集箇所サンプル' // CMSで表示されるコレクション名です
    folder: 'src/pages/sample' // マークダウンを置いたディレクトリを指定します
    create: false // 記事ではなく、新しく作成する必要がないため、新規作成を禁止します
    slug: 'cms-editable-content' // マークダウンのファイル名と合致させます
    identifier_field: '{fields.title}'
    fields:
      - {
          label: 'Title',
          name: 'title',
          widget: 'hidden',
          default: 'CMS編集箇所サンプル',
        }
      - {
          label: 'Template type',
          name: 'type',
          widget: 'hidden',
          default: 'cms-editable-content', // マークダウンの type と合致させます
        }
      - label: 'コンテンツ' // 以下、編集可能にするコンテンツのフィールド設定です
        name: 'contents'
        widget: 'list'
        fields:
          - { label: 'タイトル (必須)', name: 'title', widget: 'markdown' }
          - {
              label: '内容 (必須)',
              name: 'content',
              widget: 'markdown',
            }

contentsList: allMarkdownRemark(
  filter: { frontmatter: { type: { eq: "cms-editable-content" } } }
) {
  edges {
    node {
      id
      frontmatter {
        contents {
          title
          content
        }
      }
    }
  }
}