長い記事で目次を確認する

2026年10月8日923자약 3분ノートテスト目次

この記事は、h2 と h3 の見出しを多用して、左サイドバーの目次 (TOC) が正しく多段表示されることを確認するためのテスト記事です。

目次の抽出条件

目次には h2 と h3 のみが抽出されます。h1 (記事タイトル) と h4 以下は対象外です。

見出しが2件未満の記事では目次パネル自体が表示されません。

記事を長くするときは、h2 で大きな区切り、h3 でその中の小項目を分けるのが基本だ。

h4 以下を使いたい場合は、そのレベルの見出しが目次に現れないことを理解した上で使う。

テンプレートのレイアウトは BaseLayout を起点に、記事ページは post/[...slug].astro が担当している。

remark と rehype のプラグインチェーンで構文変換を行う。前処理として ::: +++ ;;; のようなブロック構文をパース前にHTMLへ変換している。

Shiki を使ったハイライトに加えて、メタ文字列でタイトルや行ハイライトを制御できる。

テンプレートの配色は src/styles/ 以下にCSSカスタムプロパティとして定義されている。

本文は prose クラス (Tailwind Typography) が適用され、見出し・段落・リストなどの既定スタイルが整えられている。

記事本文には data-pagefind-body が付与されており、ページ内検索のインデックス対象になる。

検索結果に出したくない要素は、pagefindの属性で制御する。

類似記事の計算には、タイトルと description (なければ本文冒頭500字) が使われる。

この記事には excludeFromSimilarities: true を指定しており、類似記事生成の対象から除外されている。類似記事パネルにこの記事が候補として現れないことを確認できる。

アーカイブページは frontmatter の date を元に月別で記事をまとめている。

年単位の集計も同じデータから組み立てられる。