跳到本頁主要內容
版本:3.5.2

標題和目錄

Markdown 標題

可以使用 regular 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。例如,### 哈囉,世界! 會產生 ID 哈囉-世界

產生的 ID 會有一些限制

  • ID 看起來可能不太好
  • 您可能想在不更新現有 ID 的情況下更改或翻譯文字

Markdown 中有特殊的用語法讓您能設定明確的標題 ID

### Hello World {#my-explicit-id}
提示

使用write-heading-ids CLI 命令將明確的 ID 加入所有 Markdown 文件。

避免出現重疊 ID

建立的標題 ID 保證在每頁都是唯一的,但如果您使用自訂 ID,請確定每頁只出現一次,否則會出現兩個相同 ID 的 DOM 元素,這是非法的 HTML 語意,而且會導致一個標題無法連結。

目錄標題層級

每個 Markdown 文件都會在右上角顯示目錄。預設情況下,這個目錄只會顯示 h2 和 h3 標題,這對於了解頁面結構已經夠用。如果您需要變更顯示的標題範圍,則可以自訂最小的和最大的標題層級,而且可以針對各別的頁面或整體設定。

若要設定特定頁面的標題層級,請使用toc_min_heading_leveltoc_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 選項將套用至網站中的所有目錄表,包括 內嵌目錄表,但標題區塊選項僅會影響右上角的目錄表。您需要使用 minHeadingLevelmaxHeadingLevel 屬性自訂每個 <TOCInline /> 元件。

內嵌目錄表

使用 MDX,也可以直接在降價文件內顯示內嵌目錄表。

toc 變數在任何 MDX 文件中都是可用的,且包含了 MDX 文件中的所有標題。預設情況下,目錄表中只會顯示 h2h3 標題。您可以為個別的 TOCInline 元件設定 minHeadingLevelmaxHeadingLevel 來變更哪些標題層級會顯示。

import TOCInline from '@theme/TOCInline';

<TOCInline toc={toc} />

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}
/>

客製化目錄產生

目錄是使用 Remark plugin 解析 Markdown 來源產生的。已知會產生誤判和漏判的邊緣情況。

在可隱藏區域內的 Markdown 標題仍會在目錄中顯示。例如,Tabsdetails 中的標題將不會被排除。

非 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>

人體工學地插入額外標題或忽略某些標題的能力正在進行中。如果您很重視這項功能,請在 這個問題 中回報您的使用案例。


警告

以下為一些虛擬內容,目的是讓目前的頁面有更多可用的目錄項目。

範例區塊 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