CategoryNav

カテゴリインデックスページに子ページのカードグリッドを表示する、サーバーレンダリングのPreactコンポーネント。

概要

CategoryNavは、カテゴリの子ページをカードグリッドとして自動的に一覧表示する、サーバーレンダリングのPreactコンポーネントです。カテゴリのindex.mdxファイルで使用し、すべての子ページへのリンクを含むランディングページを作成するために設計されています。

ライブデモ

以下はCategoryNavで「はじめに」カテゴリを表示した例です：

使い方

カテゴリのindex.mdxでCategoryNavを使用してランディングページを作成します：

---
title: Getting Started
sidebar_position: 0
---

Welcome to the Getting Started section. Choose a topic below to begin.

<CategoryNav category="getting-started" />

CategoryNavは完全にサーバー側でレンダリングされ、クライアントサイドJavaScriptはゼロです — ハイドレートディレクティブは不要です。

プロップ

categoryまたはcategoriesのいずれかを指定します。両方を指定した場合はcategoriesが優先され、categoryは無視されます。どちらも指定しない場合は、コンポーネントは何も表示しません。

langプロップは現在のURLパスから自動的に検出されるため、通常は設定する必要はありません。

categoriesプロップ

デフォルトでは、CategoryNavは単一の親を推測し、その直下の子を一覧表示します。対象が1つの共通の親の子ではなく、ナビゲーションツリー上の最上位の兄弟である場合は、代わりにcategoriesを渡します。たとえばclaude-mdとclaude-skillsはclaudeの子ではなく、claudeと同じ最上位の階層に並ぶ兄弟です：

<CategoryNav categories={["claude-md", "claude-skills", "claude-agents"]} />

各スラッグは対応するナビゲーションノードに解決され、カードとして表示されます。ツリー内で見つからないスラッグは、エラーにならず単に無視されます。no-pageカテゴリ（index.mdx の category_no_page: true、またはレガシーの _category_.json の noPage: true）はそれ自体のルートを持たないため、カードのリンク先はそのカテゴリ配下で最初にルートを持つ子ページになります。到達可能なページがない no-page カテゴリは、リンク切れを出力する代わりにスキップされます。

特徴

• 2カラムグリッド — デスクトップではsm:grid-cols-2、モバイルではシングルカラムで表示

• カード表示 — 各カードにはページタイトル（リンク付き）とdescription（frontmatterから取得）を表示

• ホバーエフェクト — ホバー時にカードのボーダーがハイライトされ、タイトルリンクは常に下線付き

• インデックス自動除外 — カテゴリ自身のインデックスページは自動的にフィルタリング

• ポジション順ソート — カードはfrontmatterのsidebar_position順に並びます

使用場所

任意のカテゴリのindex.mdxにCategoryNavを追加してランディングページを生成できます。例えば、「はじめに」セクションでは以下のように使用されています：

src/content/docs/
  getting-started/
    index.mdx              ← <CategoryNav category="getting-started" /> を使用
    introduction.mdx
    installation.mdx
    writing-docs.mdx

ソース

コンポーネントはpages/lib/_category-nav.tsxに定義されています。