之前一直觉得自己博客文章详情页有几点不太友好：
这些问题其实大半年前都意识到了，但是一直没找到比较合适的解决办法，加上之前工作换了部门每天都很忙碌基本没空打理博客，因此这些优化项也基本都搁置了。
直到前几周，工作上比较着急的几个迭代上线后，稍微轻松了一些，得空看见春水煎茶大佬的博客给文章增加了自动生成目录的功能，并且里面还支持“回到顶部”、“跳转评论区”、“自定义快捷链接”等功能，完美解决了我之前的这些问题，而且样式也十分美观。于是 F12 看了下实现的代码，然后再根据自己的博客的样式微调了一下样式便抄过来了（本博客的样式当初也是完全参考这位大佬的博客然后自己敲出来的，对一些细节地方做了很多微调）。
先贴一张大佬的博客截图：
自己仿照的：
春水煎茶大佬的目录样式其实已经很完美了，但自己还是根据自己博客的情况以及自己的想法做了一点点自认为“锦上添花”的优化：
document.getElementById('comment-textarea-0').focus()，这样点击后评论输入框将会直接在屏幕中央且已获得焦点，直接输入评论即可，不需要再多进行一次点击原本预计是想在这个基础上搭配 GPT 再实现一个移动端的目录样式（预想的是：屏幕右边缘中间有一个悬浮球，点击后从右向左一个抽屉效果展示目录），奈何 CSS 真的是自己无法跨过的坎，即使是有 GPT 的帮忙，自己也只是实现了抽屉的效果，但是样式始终没法完美适配，折腾了两天后无奈放弃，暂时这样吧，如果有大佬有兴趣基于当前的样式实现一下感激不尽，这个博客的开源版地址：simple-blog～
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。