test

一、Tocbot 基础介绍

Tocbot 是一款轻量、无依赖、易用的 JavaScript 目录生成插件，专为博客、文档、教程类页面设计。它能自动抓取页面中的标题标签，生成可点击、可高亮、平滑滚动的侧边目录，大幅提升读者的阅读体验。

相比其他目录插件，Tocbot 体积小、配置简单、兼容性强，支持自定义文本、固定展开层级、滚动偏移适配等高级功能，是前端搭建博客目录的首选工具。

二、Tocbot 自定义目录文本+不折叠配置

默认 Tocbot 会直接抓取标题原文作为目录文本，但实际博客场景中，我们常需要精简目录展示、隐藏冗余内容，同时希望目录永久展开不折叠，这就需要用到自定义回调与折叠深度配置。

核心配置项详解

Tocbot 的核心配置分为三大类：容器选择器、滚动适配、目录行为。其中 tocSelector 定义目录容器，contentSelector 定义文章区域，headingSelector 控制抓取的标题层级，是最基础的必填配置。

滚动偏移配置是适配固定导航的关键，headingsOffset 与 scrollSmoothOffset 需与导航栏高度保持一致，避免标题被遮挡。

完整代码复制即用

我们通过 headingObjectCallback 实现自定义目录文本，优先读取标题的 data-toc 属性，无属性则使用原文；通过 collapseDepth:6 实现所有层级永久不折叠，搭配 CSS 隐藏折叠箭头，让目录更简洁。

三、常见问题解决

在使用 Tocbot 搭建博客目录时，新手常遇到滚动遮挡、目录折叠、锚点失效等问题，以下是最实用的解决方案。

3.1 滚动后标题被遮挡

问题原因：顶部固定导航栏覆盖了标题区域。解决方案：将 headingsOffset 和 scrollSmoothOffset 设置为导航栏实际高度，让滚动锚点自动向上偏移，完美避开导航。

3.2 目录层级自动折叠

问题原因：Tocbot 默认 collapseDepth:0，仅展开一级标题。解决方案：将参数修改为 collapseDepth:6，大于所有标题层级，即可实现永久展开、永不折叠的目录效果。

四、总结

Tocbot 凭借轻量、灵活、易用的特性，成为博客目录搭建的最优解。通过自定义 ID 保证锚点生效、data-toc 自定义展示文本、偏移配置适配导航、折叠深度控制展开状态，就能打造出专业、流畅的博客目录系统。

这套配置可直接用于个人博客、技术文档、在线教程，零修改即可上线使用。