发表于"2026年09月"的文章

文章记录将 Fumadocs 风格曲线目录迁入 ShokaX 的实现。复用现有目录结构，以视口内标题控制高亮和分支展开，用 SVG 曲线及裁剪窗口绘制随层级变化的轨道。文中讲解动画同步、主题配色、单篇配置覆盖和 PJAX 清理，并提供 TypeScript、Stylus 与 Pug 的接入代码。

本文记录为 ShokaX 博客主题实现 Fumadocs 风格曲线目录的过程。核心是将高亮从阅读进度改为当前视口内标题范围，命中标题同时控制高亮和子目录展开；用 SVG 绘制底线、弯折路径与裁剪高亮区间，配合 TypeScript 监听滚动、动画和 PJAX 清理，并保留层级编号、点击跳转、主题配色、长标题换行及全局和单篇开关，最后给出按文件接入的完整方案。

这篇文章记录了作者为 Hexo 博客主题 ShokaX 移植 Fumadocs 风格“曲线目录”的过程。核心思路是不引入整套框架，而是复用 Hexo 原有的目录结构，在其上叠加展示逻辑：通过判断标题是否进入视口来决定高亮范围（可同时高亮多个标题，无命中时取最近标题兜底），并用同一份命中结果控制子目录的展开收起；左侧细线用 SVG 绘制，横坐标变化处用贝塞尔曲线拐弯，高亮区间通过 clipPath 裁剪窗口实现移动。文章还处理了展开动画与线条同步、主题配色变量、长标题换行、PJAX 切页时的实例清理与事件监听管理，并提供了全局配置加文章级覆盖的开关方案，最后给出按文件接入的完整代码。

多出去看看，见的多了，就知道该折腾啥了~ 这次盯上的，是文章右侧那块平时不怎么起眼的 目录。 折腾博客主题迁移的时候，看到 Fumadocs 的文章目录：左边一根细线，遇到子标题会拐个弯，当前阅读位置对应的那一段还会亮起来。 好看，想要，安排 🤣 不过真开始做才发现，这东西不是给目录加一个 就完事了。线会随着阅读位置 游走，同屏几个标题可以同时高亮，目录展开和收起的时候，线还得跟着变。 于是乎，又有了这篇折腾记录。 本文右侧目录就是效果展示，往下滚动即可体验；窄屏需要先打开主题侧栏。 第一眼看过去，很容易把那根线理解成 阅读进度条：读到哪儿，就从头亮到哪儿。 我第一版还真就是这么做的，然后对着参考页面一滚，发现不对劲。 它表达的是 …