第10回 Astroブログにカテゴリ・連載・タグの導線を追加する―Frontmatterから記事一覧を自動生成

第9回では、第1回から第8回までのMarkdownにsubcategory、series、seriesOrderを追加し、カテゴリと連載を別の軸で扱える状態にした。

今回は、そのFrontmatterをサイト側で読み取り、カテゴリ、細分化カテゴリ、連載、タグから記事を探せる構成へ反映する。

カテゴリ一覧や件数は手作業で更新せず、Markdownの記事情報から自動生成する。

変更前のサイト#

デザイン変更前のトップページでは、ヘッダーのメニューはHome、記事一覧、Aboutの3つ。

記事一覧では、公開日、タイトル、概要、タグを確認できる一方、カテゴリ表示はWEB制作まで。

記事詳細も同様で、タイトル上にはWEB制作だけを表示する。

記事が9件程度ならこの状態でも一覧から探せるが、今後記事数が増えることを考えると、WEB制作の中をさらに分ける導線が必要になる。

記事詳細に細分化カテゴリを表示#

新しい記事詳細では、タイトル上のカテゴリ表示を

WEB制作 › デザイン・UI

のような階層表示へ変更する。

第8回はFrontmatterで次の属性を持つ。

category: 'web-development'
subcategory: 'design'
series: 'astro-cloudflare-site-build'
seriesOrder: 8

サイト側では内部値をそのまま表示せず、

web-development → WEB制作
design          → デザイン・UI

のように表示名へ変換する。

これで同じWEB制作の記事でも、初期構築なのか、デプロイなのか、デザインなのかを記事を開いた時点で確認できる。

記事を探すための導線を追加#

カテゴリやタグの一覧ページでは、上部に次のメニューを表示する。

記事一覧　カテゴリ　連載　タグ

記事一覧に加え、目的に合わせて記事を探す入口を分ける構成。

このナビゲーションはカテゴリページやタグページで共通して表示する。

WEB制作の中を細分化#

大カテゴリWEB制作のページでは、現在の記事数を自動集計する。

現在は9件の記事を表示し、その内訳は次の通り。

細分化カテゴリ	記事数
初期構築	3件
デプロイ・インフラ	3件
デザイン・UI	2件
運用・改善	1件

この数字はコードへ直接書かず、各Markdownのsubcategoryから集計する。

第10回をoperationとして追加すると、運用・改善の記事数にも自動で反映できる構成になる。

細分化カテゴリだけの記事一覧#

デザイン・UIを開くと、subcategory: 'design'の記事だけを一覧表示する。

現在該当するのは第7回と第8回の2件。

大カテゴリは同じWEB制作でも、記事の内容に応じて一覧を分けられる。

一方、第7回と第8回は同じ連載にも所属するため、カテゴリを分ける仕組みと連載順を管理する仕組みは別に保つ。

タグからも記事を探せるようにする#

タグもFrontmatterのtagsから自動生成する。

たとえばMarkdownタグを開くと、該当する記事だけを表示する。

現在は第9回と第5回の2件。

カテゴリは「記事の主題」、タグは「記事で扱う技術やキーワード」という役割に分ける。

同じ記事が、

WEB制作 › 運用・改善
#Astro
#Markdown
#Frontmatter

のように複数の入口から見つかる形になる。

タグ一覧は記事から自動集計#

タグ一覧ページでは、現在使われているタグと件数をまとめて表示する。

Astro 8件、Cloudflare Workers 5件、Markdown 2件など、既存記事のFrontmatterを基準に件数を計算する。

新しい記事へ既存タグを付ければ件数が増え、新しいタグを使えば一覧へ自動で追加される。

「連載 1件」と表示される理由#

タグ一覧を確認すると、#連載 1件という表示がある。

第1回から第9回まではすべて同じ連載に所属するため、一見すると9件になるように見える。

ただし、ここで数えているのはseries属性ではなくtags。

第1回から第8回は、

series: 'astro-cloudflare-site-build'

を持つ一方、tagsにはseriesを入れていない。

第9回だけ、次のようにseriesをタグにも含めている。

tags:
  - astro
  - markdown
  - frontmatter
  - taxonomy
  - series

そのためタグ一覧では連載 1件になる。

これは連載情報が1件しか存在しないという意味ではなく、seriesというタグを持つ記事が第9回だけという意味。

seriesはタグにしない#

今回の構成では、連載はすでに専用の属性として管理する。

series: 'astro-cloudflare-site-build'
seriesOrder: 9

そのため、同じ意味のseriesをタグにも持たせる必要はない。

第9回のタグからseriesを外し、次の形に修正する。

tags:
  - astro
  - markdown
  - frontmatter
  - taxonomy

これでタグ一覧の連載 1件は消え、連載はseries属性と連載ページ側で管理する形に統一できる。

役割は次のように分ける。

category / subcategory
→ 記事の内容を分類

series / seriesOrder
→ 続き物の記事を順番に管理

tags
→ Astro、Markdown、Cloudflareなどの技術・キーワード

Markdownを追加するだけで一覧へ反映#

今後の記事追加では、Frontmatterへ必要な属性を付ける。

category: 'web-development'
subcategory: 'operation'
series: 'astro-cloudflare-site-build'
seriesOrder: 10
tags:
  - astro
  - frontmatter
  - taxonomy
  - web-design

サイト側はこの情報を読み取り、

• WEB制作の記事数
• 運用・改善の記事数
• タグごとの件数
• カテゴリ別の記事一覧
• タグ別の記事一覧
• 連載内の順番

へ自動で反映する。

記事を増やすたびにカテゴリページのHTMLや記事数を手作業で修正する必要はない。

Markdownから一覧を自動生成する形になった#

今回の修正で、記事の入口を記事一覧だけに限定しない構成になる。

• 記事詳細へWEB制作 › デザイン・UIの階層表示を追加
• WEB制作から細分化カテゴリへ移動できるようにする
• カテゴリごとの記事数を自動集計
• 細分化カテゴリの記事一覧を自動生成
• タグ別の記事一覧を自動生成
• タグ一覧と件数を自動生成
• カテゴリ、連載、タグの入口を分離
• seriesをタグとして重複管理しない

第9回でMarkdown側へ持たせる記事属性を、第10回ではサイトのナビゲーションとして使う。

記事数が増えても、Markdownへ属性を追加するだけで分類と導線へ反映できる構成になる。