TableOfContents
TableOfContents 组件是一个目录导航组件,用于显示页面内容的标题结构。它会自动检测页面中的标题元素,生成目录列表,并在用户滚动页面时高亮当前可见的标题。当页面只有一个标题或没有足够的标题结构时,组件会自动隐藏。
基础用法
默认情况下,组件会自动检测页面中的 h2 和 h3 标题,生成目录列表:
<TableOfContents />
自定义标题和选择器
您可以自定义目录的标题文本和要检测的标题选择器:
<TableOfContents
title="章节导航"
selector="h2, h3, h4"
maxDepth={4}
/>
非固定位置
默认情况下,目录会固定在右侧,您也可以设置为非固定位置:
<TableOfContents fixed={false} />
自定义内容容器
您可以指定一个特定的内容容器,组件将只在该容器内查找标题:
<TableOfContents containerSelector=".article-content" />