Site cover image
Notion Blogで記事をタグ付けしてタグごとに一覧表示する

Notion Blogにはデフォルトでタグやカテゴリといった機能はありませんが、自分で作ることはできます。

このエントリでは実際のコード例をコミットで紹介しつつ、Notion Blogでタグ付けした記事をタグ別に表示する方法を紹介します。

まず最初に、Notionの記事一覧のあるブログページにタグの項目を追加します。

今回は下記画像のように Tags という名前で Multi-select のカラムを追加します。

Image in a image block
"Tags" という名前でタグ用の列を追加した

タグなので複数付けることができます。

Notionで付与したタグはカンマ区切りのデータになっています。そのままだと使いにくいので配列に変換しておきましょう。

実は空白も付いているので trim して綺麗にしています。

タグごとの記事一覧のURLを決めます。

今回は /blog/tag/<タグ名> というURLで考えていきます。

このページのURLを返すヘルパー関数を追加しましょう。

タグ名はマルチバイト文字(日本語など)も許可したいので encodeURIComponent() でパーセントエンコードしています。

いよいよタグごとの記事一覧ページを作っていきます。

考え方としてはは、

  1. /blog/[slug].tsx がURLからslug を取得しているように /blog/tags/[tag].tsx でURLからタグを取得
  2. /blog/index.tsx のように取得した記事から複数の記事を選んで表示する

という流れです。

タグページへのリンクには先ほど追加したヘルパー関数を使います。

最後にタグの一覧を表示しておきましょう。

タグの一覧は原始的ですが、全ての記事のタグを集めて重複を除外することによって取得しています。

これでタグごとの記事一覧ページとタグの一覧ができました。

最終的なコミットだけを再度載せておきます。

  1. Convert Tags to array - otoyo/notion-blog
  2. Add getTagLink - otoyo/notion-blog
  3. Display tags and add tag page - otoyo/notion-blog
  4. Display tag index - otoyo/notion-blog

以上です。このエントリでは実際のコード例をコミットで紹介しつつ、Notion Blogでタグ付けした記事をタグ別に表示する方法を紹介しました。

Thank you!
Thank you!
URLをコピーしました

コメントを送る

コメントはブログオーナーのみ閲覧できます