示例文章：验证目录

这是一篇用于验证目录（TOC）功能的示例文章，包含多级标题、长段落与代码块，以便观察滚动高亮与锚点跳转。

一、引言#

在内容型网站中，目录能帮助读者快速了解页面结构并在章节间高效跳转。

背景与动机#

• 长文档的可达性与定位问题
• 移动端的可用性与折叠展示

读者预期#

• 清晰的分层缩进
• 平滑的滚动与实时高亮

二、方法#

2.1 标题与锚点#

rehype-slug 将为标题生成稳定 id，例如 #示例文章-验证目录 之类。点击目录项应跳转至对应内容。

2.2 可见性与高亮#

在滚动中计算章节的可见性。当一个或多个章节同时可见时，高亮条应连续覆盖它们在 TOC 中的项。

2.2.1 边界处理#

• 顶部或底部临界位置
• 多个标题连续很近

2.3 交互与可访问性#

• 键盘可达性与焦点管理
• 可读的 aria-label

三、实践#

Demo 代码块#

export function calc(a: number, b: number) {
  return a * (a + b)
}
console.log(calc(2, 4))

再加一些段落#

为让页面更长，我们补充一些文字。你可以慢慢滚动页面，观察右侧目录的激活条是否跟随，并在移动端查看折叠表现。

四、结论与展望#

目前方案已覆盖核心场景。后续可考虑：

• 在 TOC 内支持搜索
• 根据阅读深度动态收起低优先级章节