Gatsby.js + Netlify CMSのブログのURLを日付から指定した文字列に変更する

アイキャッチ

こんにちは！Web エンジニアのたけです！

前回は Gatsby.js と NetlifyCMS でブログを構築した話をしました！やはり、ページ遷移が爆速で気持ちいい。。サンキュー SPA！

しかし、ブログを見ると URL が作成した日の日付けになっている。。これはいけてないな。。

なので、URL を指定した文字列に変更しよう思い調べてみたら簡単にできそうだったのでカスタマイズしてみる事にしました！

今回は、自分が行った設定の方法を備忘録として残したいと思います！

すべきことは単純で、admin/config.ymlの設定を変えるだけでした。ありがたい。。

collections:
  - name: blog
    label: Blog
    folder: src/pages/blog
    create: true
    slug: "{{fields.url}}"      ←ここを変更
    fields:
      - {
          label: "Template Key",
          name: "templateKey",
          widget: "hidden",
          default: "blog-post",
        }
      - { name: title, label: Title }
      - { name: date, label: Date, widget: datetime }
      - { label: "Description", name: "description", widget: "text" }
      - { label: "Thumbnail Image", name: "thumbnail", widget: "image" }
      - { name: body, label: Body, widget: markdown }
      - { name: url, label: URL, widget: "string" }           ←この行を追加

url-field-image

このように設定をすると、CMS 上にこのような URL というフィールドが追加されます。

あとは、URL のフィールドに文字列を入れれば終わり！（この記事の場合だと「cms-url-settings」）

めちゃめちゃ簡単ですな・・🤟

NetlifyCMS で URL を変更したい方の参考になれば幸いです。。

日本語の記事がまだ少ないのでこんな小ネタでも役に立てたらと思い書いてみました！

では皆さん良いコーディングライフを〜🙌

©️2021 TakeLab