サイドバーの制御
サイドバーは、Docsbookドキュメントサイトの左側にあるナビゲーションパネルです。ページツリーに加えて、検索、パンくずリスト、言語切り替え、ページごとのアイコンを任意で表示できます。ここで設定する項目はすべて表示に関する選択であり、プロジェクトの残高を消費しません。
サイドバーの設定#
| 設定 | 内容 |
|---|---|
| サイドバーの言語切り替え | 左サイドバー内に言語セレクターを表示します |
| サイドバー内の検索 | 左サイドバー内に検索ボックスを表示します |
| パンくずリスト | ページコンテンツの上にパンくずリストを表示します |
| サイドバーのアイコン | 特定のページまたはフォルダーの横にlucideアイコンを表示します |
| サブヘッダーのフォルダーアイコン | サブヘッダー内のフォルダーのタブにlucideアイコンを表示します |
サイドバーの設定方法#
- ドキュメントサイトを開きます。
- Float Widget → デザイン → 左サイドバータブに移動します。
- 必要なオプションを切り替えます。
- 保存します。
ページからサイドバーを編集する#
以下の操作のほとんどは、設定パネルを開かなくても変更できます。ドキュメントサイトで、ツールバーのエディターを押し、次に変更したいサイドバーの項目をクリックします。その上に小さなアクションバーが表示され、次の操作を選べます。
- 名前を変更 — サイドバーに表示されるラベルを変更します。
- アイコン — アイコンを選択するか、使用したいアイコンを説明するか、削除します。
- アナリティクス — 読者が実際にそのページで何をしているかを確認します。
ここで名前を変更しても変わるのはラベルだけです。ページのアドレスはそのままなので、自分のドキュメント、Google、他の人のブログなど、そこを指すすべてのリンクは引き続き機能します。URL自体を変更したい場合は、代わりにリポジトリ内のファイル名を変更してください。
各アクションはリクエストとしてAIチャットに送信され、そこで適用されます。何が依頼され、何が変更されたかを確認でき、同じ会話で「元に戻して」と伝えることもできます。
サイドバーの言語切り替え#
サイドバーの言語切り替えは、左パネル内に表示される言語セレクターで、読者が翻訳言語を切り替えられるようにします。
使用するタイミング: ヘッダーがすでに他の要素で混み合っている場合に有効にします。
注: サイドバーの切り替えまたはヘッダーの言語セレクターのいずれか一方だけを有効にしてください。両方に表示すると重複します。
少なくとも1つの翻訳言語を有効にする必要があります。それまでは、自分のサイトで切り替えを開くと、翻訳設定に直接移動できる言語を有効にするが表示されます。一方、読者には単に言語が追加されていませんという通知が表示されます。 翻訳を設定 →
サイドバー内を検索#
サイドバー検索は、Docsbookサイトの左サイドバーパネル内に表示される検索入力ボックスです。
これはヘッダー検索ボタンの代替機能です。ページのコンテンツを覆わないため、サイドバー検索を好む読者もいます。
パンくずリスト#
パンくずリストは、ページタイトルの上に、ドキュメント内の現在のページの位置を階層として表示します。
Home > Guides > Custom Domainパンくずリストがあると、大規模なドキュメントサイトで読者が現在位置を把握し、すぐに1つ上の階層へ移動できます。
推奨: 20ページを超えるドキュメント、または複数のネストされたセクションがあるドキュメントでは、パンくずリストを有効にしてください。
サイドバーアイコン#
左サイドバーの任意のページやフォルダーの横にアイコンを追加すると、ラベルだけでなく視覚的にツリーを見渡せるようになります。
設定方法
- ドキュメントサイトを開きます。
- Float Widget → デザイン → 左サイドバータブの順に選択します。
- サイドバーアイコンカードで、マークしたいページまたはフォルダーを検索し、対応するlucideアイコン(例:
rocket、book-open)を選択します。 - ほかのページやフォルダーについても同じ操作を繰り返します。
- 保存します。
ピッカーに表示されるのは、現在のlucideアイコンセットに含まれるアイコン名だけです。名前(例:「rocket」「book」「folder」)で検索すると、結果を絞り込めます。アイコンの割り当ては1つのページまたは1つのフォルダーに適用されます。フォルダー内のページには、フォルダーとは別にアイコンを割り当ててください。
使用するタイミング:アイコンを使うと、長いサイドバーや深くネストされたサイドバーでも、重要なセクション(はじめに、APIリファレンス、FAQ)を一目で見つけやすくなります。トップレベルのページが少数しかない小規模なドキュメントサイトでは、アイコンは任意です。
サブヘッダーフォルダー#
サブヘッダーフォルダーを使用すると、最上位のリポジトリフォルダーをそれぞれ独自のタブとしてサブヘッダー(ドキュメントページでメインヘッダーの下に表示されるタブの行)に表示できます。有効にしたフォルダーのタブには、lucideアイコンを設定することもできます。
設定方法
- ドキュメントサイトを開きます。
- Float Widget → デザイン → ヘッダータブの順に移動します。
- サブヘッダーフォルダーカードで、サブヘッダータブとして表示する最上位フォルダーをオンにします。
- 必要に応じて、有効にしたフォルダーの横にあるアイコンボタンをクリックし、タブに表示するlucideアイコンを選択します(またはアイコンを削除をクリックして、設定済みのアイコンを削除します)。
- 保存します。
サブヘッダーに表示されるフォルダーは、左サイドバーから個別に非表示にしたり、表示したままにしたりすることもできます。この切り替えは、サブヘッダーフォルダーの横にあるフォルダーの表示設定カードで行います。
例外が1つあります。はじめには常にサイドバーに表示され、切り替えはオンに固定されています。ここは、導入を早めに閉じた読者が戻る場所であるため、非表示にすると戻る方法がなくなってしまいます。
関連#
- ヘッダーレイアウトとナビゲーション — 上部バーと、言語スイッチャーを配置できるもう一つの場所
- 検索オプション — サイドバーの検索ボックスで検索される対象
- 翻訳設定 — スイッチャーで選択できる言語
- テーマ設定 — ライト、ダーク、システム — テーマ切り替えを配置できるもう一つの場所