Netlify CMSで生成されるマークダウンのファイル名を変更する方法

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、Netlify CMSで、生成されるマークダウンのファイル名を変更する方法についてまとめたいと思います。

やりたかったこと

Netlify CMSを使っていて、新規作成する記事のURLを自由に指定したいということがありました。

例えば、未来に出す記事を前もって予約投稿しておきたいものの、URLは投稿予定日のものにしておきたい時などです。

デフォルトでは記事を新規作成すると、自動的に投稿時の日付と記事名を含むファイル名でマークダウンが作成され、GatsbyJSを静的サイトジェネレーターに使用している場合はそのファイル名がそのままURLとなります。

自動で生成されるものを後から変更するのは手間が掛かるため、ファイル名を事前に任意のものに出来るように設定し、 URL を自由に決定できるようにしました。

対応方法

URLを変えたい collection の slug オプションを設定することで、カスタムフィールドを使用して新規作成する記事のURLを自由に指定することが出来ます。

static/admin/config.yml

collection:
  - name: 'model-cases'
...
    slug: '{{fields.slug}}'
    fields:
      - {
          label: 'URL (必須)',
          name: 'slug',
          widget: 'string',
          default: 'model-case-',
          hint: '/model-cases/hoge/ の hoge に入る URL となる文字列。e.g. 「model-case-001」「model-case-020」',
        }

{{fields.slug}} と指定すると、 name フィールドが slug になっているフィールドを参照します。

このフィールドに入力した文字列が、そのままファイル名 = URLとなります。

slug を指定すると、入力したものと同じファイル名でファイルが生成されます。

他にも、{{year}} {{month}} {{day}} などの専用のテンプレートタグを使用してファイル名を決めることが可能です。

詳しくは公式のドキュメントをご参照ください。

まとめ

今回はNetlify CMSで生成されるマークダウンのファイル名を変更する方法まとめました。Netlify CMSを使っている方の参考にしていただけるとうれしいです。

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