资讯动态

TOC:HTML 标题转目录的一键生成目录轻量方案

发布时间:2026/8/24 4:21:04 来源:尧图企业网站定制
TOCHTML 标题转目录的一键生成目录轻量方案【免费下载链接】tocTable of Contents Plugin项目地址: https://gitcode.com/gh_mirrors/toc2/tocTOC 是一个用 JavaScript 编写的浏览器端插件能把网页里现成的 HTML 标题标签自动汇总成一份页面目录。写长文档的人大多被这件事折腾过读者上下滚半天找不到想看的章节作者还得手动维护一份目录。TOC 把目录生成这件重复劳动接了过去。它具体能帮你做什么HTML 标题转目录目录随标题自动长出来把页面里的 h1、h2、h3 交给它扫描它就按层级拼出一份带缩进的目录列表标题文字还能自定义替换。比如发一篇几十屏的技术文档目录不用手写一个字章节怎么调整目录就怎么跟着变。点击目录项平滑滚动到对应章节读者点一下目录里的条目页面会匀速滑到那个位置而不是瞬间跳走。读者点「部署步骤」视线跟着页面滑过去阅读节奏不断档。滚动浏览时自动高亮当前章节你往下滚目录里对应的条目会被实时标记出来。翻到一篇长文档的中段瞄一眼侧边栏就知道自己正处在哪个部分。一个页面可以同时放多个目录区域它不限制目录只有一处页面里放几个容器就生成几份目录。比如左侧挂一份全文总览目录右侧再挂一份本章内的细目录互不干扰。样式与行为都可以按自己的页面调扫哪些标题、在哪个容器里找标题、触发偏移量、目录项显示的文字都通过几个 data 属性控制。把它做成固定在侧边的目录栏只需顺手改一下属性就能嵌进现有版式里。上手前扫一眼这几条技术栈JavaScript 编写的浏览器端插件npm 包名为 firstandthird/toc页面引入即可用获取代码git clone https://gitcode.com/gh_mirrors/toc2/toc仓库里自带示例页面和测试文件clone 下来就能跑起来看效果许可协议MIT商项目里直接用没有额外授权顾虑维护者John Gallant账号 jgallen23最近它在忙什么手头没有可靠的提交日志和发布记录这里就不替你脑补它近期改了什么。仓库中 package.json 登记的版本号是 2.1.0可作当前版本的参照想确认最近的具体改动请以仓库 Release 记录里的说明为准。写在最后如果你的长文档还在靠手写目录维持秩序去仓库把它 clone 下来套到自己的页面上试一次顺手给维护者一个 Star ⭐【免费下载链接】tocTable of Contents Plugin项目地址: https://gitcode.com/gh_mirrors/toc2/toc创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价