标题和目录
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}
使用**write-heading-ids
** CLI 命令为您的所有 Markdown 文档添加显式 ID。
生成的标题 ID 将保证在每个页面上都是唯一的,但是如果您使用自定义 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
选项将应用于网站上的所有 TOC,包括 内联 TOC,但前置信息选项仅影响右上角的 TOC。您需要使用 minHeadingLevel
和 maxHeadingLevel
道具来自定义每个 <TOCInline />
组件。
内联目录
由于 MDX,您还可以直接在 Markdown 文档中显示内联目录。
toc
变量在任何 MDX 文档中都可用,并包含 MDX 文档的所有标题。默认情况下,TOC 中仅显示 h2
和 h3
标题。您可以通过设置 minHeadingLevel
或 maxHeadingLevel
来更改单个 TOCInline
组件的可见标题级别。
import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} />
toc
全局变量只是一个标题项列表
declare const toc: {
value: string;
id: string;
level: number;
}[];
请注意,toc
全局变量是一个扁平数组,因此您可以轻松地剪切掉不需要的节点或插入额外的节点,并创建一个新的 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 插件 解析 Markdown 源代码生成的。已知在某些边缘情况下,它会生成误报和漏报。
可隐藏区域内的 Markdown 标题仍将显示在 TOC 中。例如,Tabs
和 details
中的标题将不会被排除。
非 Markdown 标题不会显示在 TOC 中。这可以用来解决前面提到的问题。
<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