内联目录

每份 markdown 文档都会在右上角显示一个当前文档的目录列表。

但是，借助 MDX，你可以直接在 markdown 文档中显示当前文档的一个内联的目录。

完整的目录

在任何 MDX 文档中都存在一个 toc 变量，并且包含了该 MDX 文档的所有顶级标题（Docusaurus 默认只把 h2 和 h3 当作目录条目）。

import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} />;

• 完整的目录
• 自定义目录
• Example Section 1
  • Example Subsection 1 a
  • Example Subsection 1 b
  • Example Subsection 1 c
• Example Section 2
  • Example Subsection 2 a
  • Example Subsection 2 b
  • Example Subsection 2 c
• Example Section 3
  • Example Subsection 3 a
  • Example Subsection 3 b
  • Example Subsection 3 c

自定义目录

toc 属性包含的只是目录条目列表：

type TOCItem = {
  value: string;
  id: string;
  children: TOCItem[];
};

你可以手动创建此目录树，或从 toc 变量派生一个新的目录树：

import TOCInline from '@theme/TOCInline';
<TOCInline
  toc={
    // 只展示第 3 个和第 5 个顶级标题（即 h2）及其子标题（即 h3）
    [toc[2], toc[4]]
  }
/>;

• Example Section 1
  • Example Subsection 1 a
  • Example Subsection 1 b
  • Example Subsection 1 c
• Example Section 3
  • Example Subsection 3 a
  • Example Subsection 3 b
  • Example Subsection 3 c

caution

以下内容只是为了演示内联目录而为当前页面填充的多个目录条目而已。

Example Section 1

Lorem ipsum

Example Subsection 1 a

Lorem ipsum

Example Subsection 1 b

Lorem ipsum

Example Subsection 1 c

Lorem ipsum

Example Section 2

Lorem ipsum

Example Subsection 2 a

Lorem ipsum

Example Subsection 2 b

Lorem ipsum

Example Subsection 2 c

Lorem ipsum

Example Section 3

Lorem ipsum

Example Subsection 3 a

Lorem ipsum

Example Subsection 3 b

Lorem ipsum

Example Subsection 3 c

Lorem ipsum