メインコンテンツにスキップ
バージョン: 3.5.2

複数のサイドバーの使用

**まとめてグループ化**したい**Markdownファイルのセット**ごとにサイドバーを作成できます。

ヒント

Docusaurusサイトは、複数のサイドバーを使用する良い例です。

次の例を考えてみましょう。

sidebars.js
export default {
  tutorialSidebar: {
    'Category A': ['doc1', 'doc2'],
  },
  apiSidebar: ['doc3', 'doc4'],
};

doc1 または doc2 を閲覧しているときは、tutorialSidebar が表示されます。 doc3 または doc4 を閲覧しているときは、apiSidebar が表示されます。

上記の例に従って、commonDoc が両方のサイドバーに含まれている場合

sidebars.js
export default {
  tutorialSidebar: {
    'Category A': ['doc1', 'doc2', 'commonDoc'],
  },
  apiSidebar: ['doc3', 'doc4', 'commonDoc'],
};

Docusaurus は、commonDoc を閲覧しているときにどのサイドバーを表示するかをどのように認識するのでしょうか？ 答え: 認識しません。どちらのサイドバーが選択されるかは保証されません。

ドキュメントYをサイドバーXに追加すると、双方向バインディングが作成されます。サイドバーXにはドキュメントYへのリンクが含まれ、ドキュメントYを閲覧するとサイドバーXが表示されます。ただし、暗黙的なバインディングを解除したい場合があります。

  1. サイドバーXにドキュメントYを表示させずに、サイドバーXにドキュメントYへのリンクを生成するにはどうすればよいですか？ たとえば、上記の例のようにドキュメントYを複数のサイドバーに含め、Docusaurusに特定のサイドバーを表示するように明示的に指示したい場合。
  2. ドキュメントYを閲覧しているときにサイドバーXを表示させたいが、サイドバーXにYへのリンクを含めないようにするにはどうすればよいですか？ たとえば、Yが「ドキュメントのホームページ」であり、サイドバーが純粋にナビゲーションに使用される場合。

frontmatter オプション displayed_sidebar は、サイドバーの関連付けを強制的に設定します。同じ例では、特別な設定なしでドキュメントの省略形を使用できます。

sidebars.js
export default {
  tutorialSidebar: {
    'Category A': ['doc1', 'doc2'],
  },
  apiSidebar: ['doc3', 'doc4'],
};

そして、frontmatterを追加します。

commonDoc.md
---
displayed_sidebar: apiSidebar
---

これは、commonDoc を閲覧しているときに apiSidebar を表示するように Docusaurus に明示的に指示します。同じ方法を使用して、ドキュメントYを含まないサイドバーXをドキュメントYに表示させることができます。

home.md
---
displayed_sidebar: tutorialSidebar
---

tutorialSidebar に home へのリンクが含まれていなくても、home を表示しているときに表示されます。

displayed_sidebar: null を設定すると、このページにはサイドバーが表示されず、その結果、ページネーションも表示されません。

ページネーションの生成​

Docusaurus は、サイドバーを使用して、各ドキュメントページの下部に「次へ」および「前へ」のページネーションリンクを生成します。表示されているサイドバーを厳密に使用します。サイドバーが関連付けられていない場合は、ページネーションも生成されません。ただし、「次へ」および「前へ」としてリンクされているドキュメントが同じサイドバーを表示するとは限りません。これらのドキュメントはこのサイドバーに含まれていますが、frontmatterで異なる displayed_sidebar が設定されている場合があります。

displayed_sidebar frontmatter を設定することによってサイドバーが表示され、このサイドバーにドキュメント自体が含まれていない場合、ページネーションは表示されません。

frontmatter pagination_next および pagination_prev を使用してページネーションをカスタマイズできます。次のサイドバーを考えてみましょう。

sidebars.js
export default {
  tutorial: [
    'introduction',
    {
      installation: ['windows', 'linux', 'macos'],
    },
    'getting-started',
  ],
};

「windows」の次のページネーションリンクは「linux」を指していますが、これは理にかなっていません。インストール後に読者が「はじめに」に進むようにしたい場合があります。この場合は、ページネーションを手動で設定できます。

windows.md
---
pagination_next: getting-started
---

# Installation on Windows

pagination_next: null または pagination_prev: null を使用して、ページネーションリンクの表示を無効にすることもできます。

デフォルトでは、ページネーションラベルはサイドバーラベルです。 frontmatter pagination_label を使用して、このドキュメントがページネーションにどのように表示されるかをカスタマイズできます。

ref タイプは、ナビゲーションメタデータの生成に関与しないことを除いて、あらゆる点で doc タイプ と同じです。リンクとしてのみ登録されます。ページネーションの生成 と サイドバーの表示 では、ref アイテムは完全に無視されます。

複数のサイドバーから同じドキュメントにリンクする場合に特に役立ちます。ドキュメントは1つのサイドバー（type: 'doc' として登録されているサイドバー、または自動生成されたディレクトリからのサイドバー）にのみ属しますが、そのリンクは登録されているすべてのサイドバーに表示されます。

次の例を考えてみましょう。

sidebars.js
export default {
  tutorialSidebar: {
    'Category A': [
      'doc1',
      'doc2',
      {type: 'ref', id: 'commonDoc'},
      'doc5',
    ],
  },
  apiSidebar: ['doc3', 'doc4', 'commonDoc'],
};

ref タイプは、次を実行することと同等であると考えることができます。

  • commonDoc に displayed_sidebar: tutorialSidebar を設定する（サイドバーの関連付けでは ref は無視されます）
  • doc2 に pagination_next: doc5 を設定し、doc5 に pagination_prev: doc2 を設定する（ページネーションの生成では ref は無視されます）