Skip to main content
Version: 3.7.0

标题和目录

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

使用write-heading-ids CLI命令为所有Markdown文档添加显式ID。

Avoid colliding IDs

生成的标题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,
},
},
};

如果您已经全局设置了选项,您仍然可以通过前置内容在本地覆盖它们。

note

themeConfig 选项将应用于网站上的所有目录,包括 内联目录,但前置选项仅影响右上角的目录。您需要使用 minHeadingLevelmaxHeadingLevel 属性来自定义每个 组件。

内联目录

由于MDX的存在,也可以在Markdown文档中直接显示内联目录。

toc 变量在任何 MDX 文档中都可用,并包含 MDX 文档的所有标题。默认情况下,TOC 中只显示 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插件解析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>

能够符合人体工程学地插入额外的标题或忽略某些标题的功能正在开发中。如果这个功能对您很重要,请在此问题中报告您的使用案例。


warning

以下只是一些虚拟内容,以便在当前页面上有更多的目录项可用。

示例部分 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