Netlify CMS で記事投稿画面をカスタマイズする(連載機能とリスト表示も)

連載一覧 : Gatsby.jsで超爆速なブログを作ろう！
目次

Netlify CMSの記事投稿画面のカスタマイズには公式のリファレンスマニュアルがあります。

しかし、実際に細かい設定についてはマニュアルに書いてなかったり、わかりにくかったのでまとめておきます。

管理画面の設定画面は「\code-labo\static\admin\config.yml」ファイルを編集して機能を更新します。

最後にソースコード全体を載せているので参考にしてください。

投稿ファイル名

コレクション内のSlugを編集します。

{{year}}や{{month}}などが使えます。

collections:
  - name: "posts"
    label: "Posts"
    folder: "content/posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{hour}}-{{minute}}-{{second}}---{{slug}}"
    preview_path: "posts/{{fields.slug}}"
    fields:
      - {label: "Template", name: "template", widget: "hidden", default: "post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Thumbnail", name: "socialImage", widget: image}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}

カテゴリ欄やタグ欄を追加するときは2通りの書き方がある

collections:
  - name: "posts"
    label: "Posts"
    ......
    fields:
      - label: "カテゴリ"
        name: "category"
        widget: "relation"

と

collections:
  - name: "posts"
    label: "Posts"
    ......
    fields:
      - {label: "カテゴリ", name: "category", widget: "relation"}

の2通りの書き方があります。

知らないと混乱します。

Slugは場所によって意味合いが違う

collections:
  - name: "posts"
    ......。
    slug: "{{year}}-{{month}}-{{day}}-{{hour}}-{{minute}}-{{second}}---{{slug}}"
    preview_path: "posts/{{fields.slug}}"

slug: “{{yea…のslugは投稿内容を保存するファイル名を設定します。

cond}}---{{slug}}“のslugは、Gatsby.jsで設定したタイトルドットなどが変換されてはいるんだっけ？忘れました。

…posts/{{fields.slug}}“のslugは、Gatsby.jsで設定したfields.slugの値です。

タグなどで複数選択をする

collections:
  - name: "posts"
    ......
    fields:
      ......
      - label: "タグ"
        name: "tags"
        widget: "relation"
        required: false
        collection: "tags"
        searchFields: ["title"]
        valueField: "title"
        displayFields: ["title"]
        multiple: true

multiple: trueで指定します。

入力を任意にする(必須入力ではなくする)

collections:
  - name: "posts"
    ......
    fields:
      ......
      - label: "タグ"
        name: "tags"
        widget: "relation"
        required: false
        collection: "tags"
        searchFields: ["title"]
        valueField: "title"
        displayFields: ["title"]
        multiple: true

required: falseで設定します。

リスト選択する

投稿や固定ページの様にカテゴリ投稿画面を作ります。

  - name: "categories"
    label: "categories"
    folder: "categories"
    create: true
    fields:
      - { label: "カテゴリ名", name: "title", widget: "string" }

その中から選択できるようにします。

collections:
  - name: "posts"
    ......
    preview_path: "posts/{{fields.slug}}"
    fields:
      ......
      - label: "カテゴリ"
        name: "category"
        widget: "relation"
        collection: "categories"
        searchFields: ["title"]
        valueField: "title"
        displayFields: ["title"]

この機能を用いて、連載機能も作ってます。

全体のソースコード

backend:
  name: git-gateway
  branch: master

media_folder: "static/media"
public_folder: "/media"

locale: 'ja'

# Uncomment to leverage Netlify CMS UI authoring flow
# see: https://www.netlifycms.org/docs/configuration-options/#publish-mode
# publish_mode: editorial_workflow

collections:
  - name: "posts"
    label: "Posts"
    folder: "content/posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{hour}}-{{minute}}-{{second}}---{{slug}}"
    preview_path: "posts/{{fields.slug}}"
    fields:
      - {label: "Template", name: "template", widget: "hidden", default: "post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Thumbnail", name: "socialImage", widget: image}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      #- {label: "Category", name: "category", widget: "string"}
      - label: "カテゴリ"
        name: "category"
        widget: "relation"
        collection: "categories"
        searchFields: ["title"]
        valueField: "title"
        displayFields: ["title"]
      #- {label: "Tags", name: "tags", widget: "list"}
      - label: "タグ"
        name: "tags"
        widget: "relation"
        required: false
        collection: "tags"
        searchFields: ["title"] 
        valueField: "title"
        displayFields: ["title"]
        multiple: true # 複数選択可能
      - {label: "Body", name: "body", widget: "markdown"}
      - label: "連載"
        name: "series"
        widget: "relation"
        default: ""
        required: false
        collection: "series"
        searchFields: ["title"]
        valueField: "title"
        displayFields: ["title"]
      - label: "連載番号"
        name: "seriesNumber"
        widget: "number"
        min: 0
        default: 1
        valueType: "float"
        step: 1

  - name: "pages"
    label: "Pages"
    folder: "content/pages"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Template", name: "template", widget: "hidden", default: "page"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string"}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "markdown"}

  - name: "categories"
    label: "categories"
    folder: "categories"
    create: true
    fields:
      - { label: "カテゴリ名", name: "title", widget: "string" }

  - name: "tags"
    label: "tags"
    folder: "tags"
    create: true
    fields:
      - { label: "タグ名", name: "title", widget: "string" }

  - name: "series"
    label: "series"
    folder: "series"
    create: true
    fields:
      - { label: "連載名", name: "title", widget: "string" }
連載一覧 : Gatsby.jsで超爆速なブログを作ろう！

Published 4 4月 2020

yosi

yosi

programmer. CG関係で修士、Web系で勤務します。

    © All rights reserved.
    プライバシーポリシー
    Contact me