可拖拽关闭自动生成网页目录插件

188 阅读1分钟

image.png

前言

近期,再次频繁使用到 element 组件库查阅官网,后知后觉站点没有组件示例的相关目录,翻看了历史 issue 和 PR,发现一直都没有但又想要的一个功能,然后就提交了一个 [add TOC](docs: add TOC by Efrice · Pull Request #22731 · ElemeFE/element (github.com)) PR,到目前为止没合入,应该是不维护了。可又特别想要在内容网站上有这样一个目录方便跳转,于是换了种方式,使用浏览器插件的方式给它实现了。

实现原理

一句话原理:获取页面上的 h2 和 h3 标签并排序展示,逻辑是使用锚点定位。

特性

  1. 展开收起,方便简洁;
  2. 拖拽移动位置,想去哪就去哪儿;
  3. 可控制关闭启用;
  4. 深色模式,你值得拥有。

已支持的站点

  1. 掘金
  2. 阮一峰博客/网道教程
  3. element-ui 官网
  4. 待补充

欢迎使用,点赞和评论 Efrice/chrome-toc: Chrome extension to generate TOC for the current page. (github.com)