这篇是用来给你看右侧「文章目录」导览窗口效果的示例文章——往下滚，注意看右边那张卡：当前所在章节会自动高亮，底部还有一条阅读进度条。看完直接删掉这篇文章就行。

一、这个导览窗口是怎么工作的

它会在页面加载时，自动扫一遍正文里的 h2 / h3 / h4 小标题，把它们按层级列成一张目录，放在右侧栏最顶上。点击任意一条，页面会平滑地滚到对应小节。

左侧栏则照样是站点概览和你的年份进度条，两者互不干扰。目录里的层级靠缩进区分：二级靠左、三级缩进一档、四级再缩一档，字号也依次收小。

二、滚动时的高亮

往下滚，你会看到目录里对应那一行变粗、变色（跟着你的主题色），这就是「当前章节」的高亮。它是靠比较标题的位置实时算出来的，不依赖浏览器兼容性。

2.1 高亮的判定方式

规则很简单：凡是滚动位置已经越过的标题，最后一个就是当前章节。所以标题越密集，高亮跳得越勤；长段落之间跳一次，更像「读到这里了」的提示。

2.2 底部的进度条

目录卡片最下面那条细线，是这篇文章的阅读进度：读到一半它就走到一半，读到底就满格。颜色也跟随主题色，跟左侧年份进度条是一套视觉语言。

三、什么情况下它不会出现

有三种情况它会自动隐藏，免得占地方：一，不是文章页（首页、归档、吐槽页都不显示）；二，正文里的小标题少于两个；三，页面宽度不够（窄屏时右侧栏本身就不显示）。

3.1 想让「页面」也显示目录

默认只在文章页显示。若你觉得「关于」「文件分类」这类页面也需要目录，跟奥利维耶说一声，改一行规则就行。

3.1.1 这一层是四级标题

四级标题默认也会进目录（缩进最多、字号最小）。如果你觉得太细，可以把 h4 从抓取范围里去掉，只留 h2 和 h3。

四、写文章时的小建议

尽量用 h2 做主线章节、h3 做小节，不要跳级（别从 h2 直接跳到 h4）。这样目录的缩进层次才好看，读者一眼就能看出结构。

另外，标题文字别太长——目录里一行放不下会省略号截断，鼠标悬停能看全文，但还是短一点更好认。

五、看完了可以删

这篇纯测试用，没有任何珍藏价值。确认效果正常之后，直接把它丢进回收站就好；目录窗口对正常文章一样生效。