標題和目錄
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 的 DOM 元素,這是非法的 HTML 語意,而且會導致一個標題無法連結。
目錄標題層級
每個 Markdown 文件都會在右上角顯示目錄。預設情況下,這個目錄只會顯示 h2 和 h3 標題,這對於了解頁面結構已經夠用。如果您需要變更顯示的標題範圍,則可以自訂最小的和最大的標題層級,而且可以針對各別的頁面或整體設定。
若要設定特定頁面的標題層級,請使用toc_min_heading_level
和toc_max_heading_level
前言。
---
# Display h2 to h5 headings
toc_min_heading_level: 2
toc_max_heading_level: 5
---
若要設定所有頁面的標題層級,請使用themeConfig.tableOfContents
選項。
export default {
themeConfig: {
tableOfContents: {
minHeadingLevel: 2,
maxHeadingLevel: 5,
},
},
};
如果您已經整體設定選項,但還是可以使用前言局部覆寫。
themeConfig
選項將套用至網站中的所有目錄表,包括 內嵌目錄表,但標題區塊選項僅會影響右上角的目錄表。您需要使用 minHeadingLevel
和 maxHeadingLevel
屬性自訂每個 <TOCInline />
元件。
內嵌目錄表
使用 MDX,也可以直接在降價文件內顯示內嵌目錄表。
toc
變數在任何 MDX 文件中都是可用的,且包含了 MDX 文件中的所有標題。預設情況下,目錄表中只會顯示 h2
和 h3
標題。您可以為個別的 TOCInline
元件設定 minHeadingLevel
或 maxHeadingLevel
來變更哪些標題層級會顯示。
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 標題仍會在目錄中顯示。例如,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>
人體工學地插入額外標題或忽略某些標題的能力正在進行中。如果您很重視這項功能,請在 這個問題 中回報您的使用案例。
以下為一些虛擬內容,目的是讓目前的頁面有更多可用的目錄項目。
範例區塊 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