Hugo侧边目录实现：页面双列布局 + Sticky + ScrollSpy 高亮

前段时间，写了篇 2025年终总结 ，但整篇博客没有经过成熟的归纳、整理，导致最终内容过长，在没有成熟的索引目录加持下，阅读体验很不好。 虽然在正文开头启用了目录功能，但只能实现一次性地快速定位，如需再定位另一标题，则需再返回顶部，重新点击目录中的标题。 关于通过目录快速索引页面位置，特别是在电脑端下已非常普遍，而我之前的目录固定在顶部并没起到很好的索引作用，因此花费 2 天时间，对电脑端（宽度达到 1450px）访问下的目录样式进行重构。 下面的内容完整复盘了我在 Hugo 博客里实现侧边目录的整个流程，从 页面布局改变 到 CSS 的 Sticky 与样式美化，再到 通过 JS 实现 ScrollSpy 跟随滚动高亮 。 实现效果 可以概括为 5 点： 桌面端（宽屏）出现侧边目录：目录位于正文右侧，不挤压正文宽度。 目录可粘性定位（sticky）：滚动正文时目录一直在视窗内。 目录独立滚动：目录过长时只滚目录，不影响正文滚动。 目录样式清晰且兼容复杂标题：标题里含 code 等内联元素时，目录排版不乱。 ScrollSpy 高亮当前章节（仅侧边栏生效）：随滚动自动高亮当前标题；高亮是“加粗 + 圆点颜色”。 其中最后一点是“锦上添花”，但前四点是长期可用的基础。 具体效果可通过电脑端访问本篇博客时看到。 HTML: 重构目录在页面中的结构 确定目录在整个模版文件中的位置，是所有工作的前提。 之前目录是统一放在了页面内容正文流里面，但这样的结构会给后期的进一步优化造成很多困难，所以在调整初期，从整页布局上就把“正文”与“目录”作为两个明确区域进行构建。 页面结构 整体采用“左正文 + 右侧边栏“布局 文章页的核心结构在 themes/xiaoten/layouts/_default/single.html： <div class="post-main-container"> <div class="post-left-column"> <div class="page-content"> {{ .Content }} </div> </div> <aside class="post-right-column"> {{ partial "toc.html" .}} </aside> </div> 剩余 6 行代码 展开剩余代码 这里我没有把目录“塞进正文流的某个位置”，而是把它作为单独的 aside。