ぺんすけブログ

Netlify CMSの Widgets を見ていると色々あって面白いなと思い、試していこうと思います。

今回は一番気になったRelationというフィールドを試したいと思います。

先に今回の記事分のPRと完成後サイトを掲載しておきますのでサクッと見たい方はこちらをどうぞ

使い方の例を挙げると「記事のカテゴリを予め作成されたカテゴリ一覧から選択する」みたいなことができる機能です。

The relation widget allows you to reference items from another collection. It provides a search input with a list of entries from the collection you're referencing, and the list automatically updates with matched entries based on what you've typed.
relation | Netlify CMS

さっそくやってみましょう。記事（posts）において、カテゴリを選択できるようにします。

collectionsにcategoriesを追加して、もともとあった記事(posts)部分にrelation widgetとしてcategoryを追加します。

collections:
  - name: "posts"
    # ...
    fields:
      # ...
      - label: "カテゴリ"
        name: "category"
        widget: "relation"
        collection: "categories" # 別のcollectionのnameと一致させて紐づけ
        searchFields: ["title", "body"] # 選択する時に検索できるフィールド
        valueField: "title" # 選択後に表示されるフィールド
        displayFields: ["title"] # 選択中に一覧に表示されるフィールド

  - name: 'categories'
    label: 'カテゴリ'
    folder: 'categories'
    create: true
    fields:
      - { label: 'カテゴリ名', name: 'title', widget: 'string' }
      - { label: '説明文', name: 'body', widget: 'text' }

これによって出来上がるカテゴリフィールドが下記です。

カテゴリを追加

一応カテゴリ一覧ページはこんな感じです。

カテゴリ一覧

カテゴリ編集ページ

カテゴリ編集

所感

searchFieldを設定して検索して選択できるのは便利ですね。

他にも色んなフィールドがあります。Netlify公式がデモを置いているので触ってみると良いかも知れません

Netlify CMSのRelationを使って記事にカテゴリを追加する

relation widgetとは

カテゴリ一覧を作成、投稿記事にrelation widget追加

所感