想要这种目录

其实昨天就很好奇了,别人的博客都有很好看的目录(例:Visual Studio Code Remote Development从 Arch Linux 启动 Windows 10),

悬浮比较常见,但这个悬浮可以自标题头图下开始,至页尾部分上端为止(约束在文章部分)

当前项高亮功能比较常见就不说了。。

最亮眼的是缩进显示,默认只显示最外层标题,但进入该级标题覆盖范围后自动展开下一级目录,真的太美观了,令人很震撼。

我也想整一个。。

本来以为这不是公共项目,于是想自己模仿一个。毕竟有很多现成的函数封装好了,所以应该并不难

省流助手

弄了半天(真的半天),发现事情没那么简单。。还好最后找到了源项目,感谢他们的贡献,让我得以用上现成的。。。

--->>>Tocbot<<<---

从动手到放弃

上网搜了一下,大部分都是用Table of Content plus 和 Q2W3 Fixed Widget来实现,试了一下。。。怎么会是呢。。

咱们sakura主题默认的小工具栏只有一个左下角的,于是去主题文件里添加了一下,又调整了一下。。

这是让我最崩溃的地方,调整了半天style.css,但是网页一点反应都没有,折腾了好久好久,来回翻了好多代码,终于发现调用的css文件来自于Mashiro的cdn而不是本地。。虽然很感谢,不过一直没注意这点,太折磨了。。

目录窜到顶上了

又弄了一会,把间距和位置调整好了,但是没办法做到“目录不越过文章上下端”,我现在还是前端小白,感觉纯css应该做不到吧。。其实有一个舍近求远的办法,就是把头图的两边裁去不显示。。

以及最重要的按标题等级折叠,一下就开始头疼了。。感觉工程量不小

最后又看了一下别人的博客,发现好多人都有这个目录用。。心情很复杂,因为知道了这个目录项目应该是公共的,可以用现成的了,又很难过自己白费了一下午加一晚上(中间上了一节课)

顺藤摸瓜,终于找到了源项目,甚至Mashiro已经帮忙封装好了,可以直接调用。。感谢各位前辈的付出