自己搭建设计博客主题时候,采用了主栏与侧边栏的双栏设计,在博客文章页面,侧边栏可以用来呈现文章的目录(一级标题,二级标题等),方便读者了解文章整体结构脉络,也方便读者进行跳转操作。基础的目录html部分可以通过Hugo原生的{{ .TableOfContents }}
函数实现。除了基本的目录,自己还想为目录部分添加上动态跟随的工作,即,目录会高亮出目前读者所浏览部分的标题。博客原先采用的bootsrap框架自带的Scrollspy模块可以实现这个功能,但是如果页面元素发生高度变化(例如,评论功能的异步载入),该Scrollspy功能会出现位置定位不准的问题。经过一番尝试后,自己最后使用了gumshoe作为替代实现动态跟随目录的效果,本文记录整个相关实现的细节。