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を使っている方の参考にしていただけるとうれしいです。
Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています
Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。
現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい！
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！
