Netlify CMSのちょっとしたTips集

この記事は Gaji-Labo Advent Calendar 2019 18日目の記事です。

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回アドベントカレンダーの自分の記事で「Gaji-LaboのコーポレートサイトはNetlify CMSを使っています」「Gaji-Labo 的 Netlify CMS の運用方法」と続けて Netlify CMS の解説とどういう風に運用しているかについて書いてきました。
今回の記事ではもう少し細かい内容で、 Netlify CMS を使う上で「これは知っておきたかった」「これについての解説がどこかにあれば時間を費やさずに済んだかも」みたいなハマり所や Tips 的なことをいくつか書いていきたいと思います。

記事のファイル名を変更する

Netlify CMS で記事を新規作成した時は、config.yml 内のその collection の設定で、 folder で指定したディレクトリ以下に slug で指定した命名規則でファイルが生成されます。
この slug は設定で変更することが可能です。

collections:
  - name: 'Blog'
    label: 'blog'
    folder: 'src/pages/blog'
    create: true
    slug: '{{fields.slug}}'
    fields:
      - label: 'slug'
        name: 'slug'
        widget: 'string'

例えばこのように {{fields.slug}}とすると、 slug フィールドに入れた値でファイル名を生成することができます。
その他にも公式のドキュメントに載っている規則で命名することが可能です。

ただし注意点として、slug に入れた値はファイルを生成する時にファイル名として一回だけ使用されるのみで、その値を変更してもファイル名を変えることはできない点に注意が必要です。
slug をそのまま記事のパーマリンクとしている場合では、直接ファイル名を操作する必要があります。

また、別々の記事で slug を重複させた場合は 2019-12-17-2.md のように自動的に連番が付与されます。

管理画面に表示されるタイトルを変更する

管理画面のタイトルは 、name に title が指定されたものが自動で入ると前回の記事で書きましたが、このフィールドも自由に変更可能です。
collection の identifier_field を設定してタイトルを変更します。

- name: 'Blog'
  label: 'blog'
  folder: 'src/pages/blog'
  create: true
  slug: '{{fields.slug}}'
  identifier_field: slug
  fields:
    - {label: "Title", name: "title", widget: "string"}
    - {label: "Slug", name: "slug", widget: "string", default: "default-slug"}

以上のように設定すると、一覧のタイトルには default-slug と表示されます (slug フィールドに何も入れなかった場合)。

そのため、例えば以下のように、「投稿画面で編集はさせたくないけど一覧のタイトル用に値を持っておきたい」といった場合に hidden widget の field を identifier_field に指定することで、投稿画面では非表示の値を一覧のタイトルとして表示させることが可能です。

- name: "Blog"
  label: "blog"
  identifier_field: title
  ...
  fields:
    - {label: "Title", name: "title", widget: "hidden", default: "投稿一覧に出るタイトル"}
    - {label: "Slug", name: "slug", widget: "string", default: "default-slug"}
    ...

必須ではない項目を作る時の注意点

必須ではない項目は、無しにするとフィールド自体が生成されません。
GatsbyJS を使用している場合、 GraphQL で取得することも不可能になるため、ビルド時にエラーが発生します。
そのために、空のプレースホルダーを指定しておくとフィールドが生成され、空データとして取得することが可能になります。

- { label: 'Title',
    name: 'title',
    widget: 'string' 
    default: 'title'
  }
- {
    label: 'Description',
    name: 'description',
    widget: 'text',
    required: false,
    default: ''
  }

---
title: title
description: ''
---

まとめ

今回はNetlify CMSを使う上でのちょっとしたTipsを紹介しました。
ご紹介した3つはどれも日本語で書かれている参考ドキュメントがあまり無く、それなりにハマりどころだったため、同じようにハマっている方の手助けになればと思います！

シリーズ「Netlify CMSを実践で使ってみた」として、他にもNetlify CMSの感触・知見・TIPSについて書いた記事をまとめています。Netlify CMSやNetlify関連の周辺トピックに興味のある方は、シリーズの他の記事もぜひ読んでいただけたらと思います！

関連リンク

• Configuration Options | Netlify CMS | Open-Source Content Management System