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

ishigaki

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

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

やりたかったこと

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

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

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

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

対応方法

URLを変えたい collectionslug オプションを設定することで、カスタムフィールドを使用して新規作成する記事の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となります。

CMSの編集画面に用意したフィールド。ここに入力したものと同じファイル名でファイルが生成される

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

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

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

まとめ

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

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

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。