本文へスキップ
バージョン: 3.5.2

見出しと目次

Markdown見出し​

通常のMarkdown見出しを使用できます。

## Level 2 title

### Level 3 title

#### Level 4 title

各Markdown見出しは、目次エントリとして表示されます。

見出しID​

各見出しには、自動生成されるか、明示的に指定できるIDがあります。見出しIDを使用すると、MarkdownまたはJSX内で特定のドキュメントの見出しにリンクできます。

[link](#heading-id)
<Link to="#heading-id">link</Link>

デフォルトでは、Docusaurusは見出しテキストに基づいて見出しIDを自動生成します。たとえば、`### Hello World`のIDは`hello-world`になります。

生成されたIDには**いくつかの制限**があります。

  • IDが見栄えが悪くなる可能性があります。
  • 既存のIDを更新せずに、テキストを**変更または翻訳**したい場合があります。

特別なMarkdown構文を使用すると、**明示的な見出しID**を設定できます。

### Hello World {#my-explicit-id}
ヒント

すべてのMarkdownドキュメントに明示的なIDを追加するには、**`write-heading-ids`** CLIコマンドを使用します。

IDの衝突を避ける

生成された見出しIDは各ページで一意であることが保証されますが、カスタムIDを使用する場合は、各IDが各ページに正確に1回だけ表示されるようにしてください。そうでないと、同じIDを持つ2つのDOM要素が発生し、これは無効なHTMLセマンティクスとなり、見出しの1つがリンク不可能になります。

目次見出しレベル​

各Markdownドキュメントには、右上に目次が表示されます。デフォルトでは、この目次にはh2とh3の見出しのみが表示されますが、これはページ構造の概要としては十分です。表示する見出しの範囲を変更する必要がある場合は、ページごとまたはグローバルに見出しの最小レベルと最大レベルをカスタマイズできます。

特定のページの見出しレベルを設定するには、`toc_min_heading_level`と`toc_max_heading_level`のフロントマターを使用します。

myDoc.md
---
# Display h2 to h5 headings
toc_min_heading_level: 2
toc_max_heading_level: 5
---

すべてのページの見出しレベルを設定するには、`themeConfig.tableOfContents`オプションを使用します。

docusaurus.config.js
export default {
  themeConfig: {
    tableOfContents: {
      minHeadingLevel: 2,
      maxHeadingLevel: 5,
    },
  },
};

グローバルにオプションを設定した場合でも、フロントマターを使用してローカルで上書きできます。

注意

`themeConfig`オプションは、サイト上のすべての目次（インライン目次を含む）に適用されますが、フロントマターオプションは右上の目次にのみ影響します。各`<TOCInline />`コンポーネントをカスタマイズするには、`minHeadingLevel`と`maxHeadingLevel`のプロパティを使用する必要があります。

インライン目次​

MDXのおかげで、Markdownドキュメント内にインライン目次を直接表示することも可能です。

`toc`変数は、すべてのMDXドキュメントで使用でき、MDXドキュメントの見出しをすべて含んでいます。デフォルトでは、目次には`h2`と`h3`の見出しのみが表示されます。個々の`TOCInline`コンポーネントの`minHeadingLevel`または`maxHeadingLevel`を設定することで、表示する見出しレベルを変更できます。

import TOCInline from '@theme/TOCInline';

<TOCInline toc={toc} />
http://localhost:3000

グローバルな`toc`は、見出しアイテムのリストです

declare const toc: {
  value: string;
  id: string;
  level: number;
}[];

グローバルな`toc`はフラットな配列であるため、不要なノードを簡単に削除したり、追加のノードを挿入したりして、新しい目次ツリーを作成できます。

import TOCInline from '@theme/TOCInline';

<TOCInline
  // Only show h2 and h4 headings
  toc={toc.filter((node) => node.level === 2 || node.level === 4)}
  minHeadingLevel={2}
  // Show h4 headings in addition to the default h2 and h3 headings
  maxHeadingLevel={4}
/>
http://localhost:3000

目次生成のカスタマイズ​

目次は、Remarkプラグインを使用してMarkdownソースを解析することで生成されます。偽陽性と偽陰性が生成される既知のエッジケースがあります。

非表示可能な領域内のMarkdown見出しは、目次にも表示されます。`Tabs`や`details`内の見出しは除外されません。

Markdown以外の見出しは、目次に表示されません。これは、前述の問題に対処するために有利に使用できます。

<details>
<summary>Some details containing headings</summary>
<h2 id="#heading-id">I'm a heading that will not show up in the TOC</h2>

Some content...

</details>

追加の見出しを人間工学的に挿入したり、特定の見出しを無視したりする機能は、現在開発中です。この機能が重要な場合は、このissueでユースケースを報告してください。

警告

以下は、現在のページで使用可能な目次項目をより多く持つためのダミーコンテンツです。

例セクション1​

Lorem ipsum

例サブセクション1 a​

Lorem ipsum

例サブサブセクション1 a I​

例サブサブセクション1 a II​

例サブサブセクション1 a III​

例サブセクション1 b​

Lorem ipsum

例サブサブセクション1 b I​

例サブサブセクション1 b II​

例サブサブセクション1 b III​

例サブセクション1 c​

Lorem ipsum

例サブサブセクション1 c I​

例サブサブセクション1 c II​

例：小節 1 c III​

例：セクション 2​

Lorem ipsum

例：小節 2 a​

Lorem ipsum

例：小節 2 a I​

例：小節 2 a II​

例：小節 2 a III​

例：小節 2 b​

Lorem ipsum

例：小節 2 b I​

例：小節 2 b II​

例：小節 2 b III​

例：小節 2 c​

Lorem ipsum

例：小節 2 c I​

例：小節 2 c II​

例：小節 2 c III​

例：セクション 3​

Lorem ipsum

例：小節 3 a​

Lorem ipsum

例：小節 3 a I​

例：小節 3 a II​

例：小節 3 a III​

例：小節 3 b​

Lorem ipsum

例：小節 3 b I​

例：小節 3 b II​

例：小節 3 b III​

例：小節 3 c​

Lorem ipsum

例：小節 3 c I​

例：小節 3 c II​

例：小節 3 c III​