サイドバーフィルター

リアルタイムサイドバーフィルターの仕組みと設定方法。

概要

サイドバーフィルターは、サイドバーの上部に表示されるテキスト入力フィールドで、入力に応じてナビゲーション項目をリアルタイムでフィルタリングします。大規模なドキュメントサイトで、サイドバーツリー全体をスクロールせずにページをすばやく見つけるのに役立ちます。

サイドバーフィルターは create-zudo-doc で作成されたプロジェクトではデフォルトで有効です。

仕組み

フィルター入力はサイドバーの上部、ナビゲーションツリーの上に表示されます。入力すると:

• カテゴリ名と個々のページタイトルの両方がクエリと照合されます
• 大文字小文字を区別しません
• カテゴリ名がマッチした場合、すべての子ページが表示されます
• 子ページのみがマッチした場合、親カテゴリはマッチした子ページだけを表示します
• フィルタリング中、マッチしたカテゴリはすべて自動的に展開されます
• 入力をクリアすると、完全なサイドバーツリーが復元されます

キーボードショートカット

Ctrl+/（Windows/Linux）または Cmd+/（macOS）を押すと、ページのどこからでもフィルター入力にフォーカスできます。これはサイドバーが表示されている場合（デスクトップビューポートまたはモバイルサイドバーが開いている場合）に機能します。

有効化・無効化

create-zudo-doc の場合

サイドバーフィルターはデフォルトで有効です。プロジェクト作成時に無効にするには:

pnpm create zudo-doc my-docs --no-sidebar-filter

明示的に有効にするには:

pnpm create zudo-doc my-docs --sidebar-filter

既存プロジェクトの場合

サイドバーフィルターは SidebarTree React コンポーネント（src/components/sidebar-tree.tsx）に組み込まれています。サイドバーの一部として常にレンダリングされ、settings.ts に個別の切り替え設定はありません。スキャフォールドされたプロジェクトから削除するには、コンポーネントを直接変更する必要があります。