一、概览

用于验证：

  • 目录按标题级数嵌套（h2/h3/h4/h5）
  • 点击目录项：正文对应标题背景高亮，目录项高亮
  • 滚动正文：目录自动跟随当前标题高亮

1.1 背景

随便写一些段落，让页面产生滚动。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at augue vel risus consequat aliquet. Nunc a diam ac arcu sodales posuere.

1.1.1 目标

进一步的描述文字：Vivamus sed lectus ut arcu fermentum faucibus. Mauris non ipsum non elit vehicula iaculis.

1.1.1.1 范围

这里是更深一层的内容，用于测试 h5。Praesent ultricies, justo a sodales gravida, augue sem gravida arcu.

二、实现

实现说明及注意事项。

2.1 目录生成

  • 如果 Hugo .TableOfContents 有输出，则直接渲染
  • 否则由前端 JS 根据 h2~h6 动态生成

2.1.1 TOC 嵌套

嵌套规则：h2 为一级，h3 为二级，h4 为三级，h5 为四级。

2.1.1.1 渲染

子级链接与父级链接在目录中缩进显示。

2.2 平滑滚动与高亮

  • 点击目录项：平滑滚动到对应标题
  • 对应标题添加背景高亮（短暂/持续均可展示）
  • 目录项同时加激活态

三、更多内容

为了制造滚动，添加若干段落：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lorem eget arcu laoreet cursus. Sed id gravida dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer dictum, lorem quis mattis mattis, nisi felis porttitor augue, et cursus arcu risus sed ante.

3.1 段落一

Aliquam erat volutpat. Sed aliquet, nibh vitae lacinia pulvinar, sapien nibh interdum nisi, non feugiat justo ipsum ac arcu. Proin pretium, mauris a fringilla convallis, purus nunc iaculis orci, vel hendrerit nibh neque non nisl.

3.2 段落二

Donec ultricies, sem non sodales pulvinar, augue justo consectetur lectus, sed viverra sapien diam non tortor. Donec id sapien pretium, luctus lorem in, dapibus risus.

3.2.1 细节

Morbi sed hendrerit nibh. Integer posuere maxi mus fermentum. Quisque commodo, dolor sed vehicula aliquet, urna arcu tincidunt ligula.

3.2.1.1 更细节

Nam porta, lorem ut dapibus volutpat, ligula massa placerat lorem, non luctus mi arcu a mi.

四、结论

测试完毕后，目录应正确反映层级，点击可高亮标题并平滑滚动，滚动时目录自动跟随当前标题高亮。