Tocbot -岩石教程

功能特点

自动生成目录：Tocbot 可以自动根据页面中的标题（如 <h1>, <h2>, <h3> 等）生成目录。
平滑滚动：点击目录中的链接后，页面会平滑滚动到对应的位置。
灵活配置：支持多种配置选项，可以自定义生成目录的行为和样式。
响应式：生成的目录在移动设备上同样表现良好。
动态内容支持：支持动态加载内容后重新生成目录。
无依赖：不依赖于任何第三方库，独立运行。

安装

可以通过 npm 安装 Tocbot，也可以直接引入 CDN 链接。

使用 npm 安装

npm install tocbot

使用 CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.css">
<script src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js"></script>

基本用法

HTML 结构

首先，在你的 HTML 文件中创建一个用于放置目录的容器，并确保内容中有需要生成目录的标题标签：

<div class="toc"></div>
<article class="content">
  <h1>Title 1</h1>
  <p>Some content here...</p>
  <h2>Sub-title 1.1</h2>
  <p>Some more content...</p>
  <h2>Sub-title 1.2</h2>
  <p>Even more content...</p>
  <h1>Title 2</h1>
  <p>Content under title 2...</p>
</article>

初始化 Tocbot

在你的 JavaScript 文件中或<script/> 标签中初始化 Tocbot：

tocbot.init({
  // Where to render the table of contents.
  tocSelector: '.toc',
  // Where to grab the headings to build the table of contents.
  contentSelector: '.content',
  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3'
});

配置选项

Tocbot 提供了多种配置选项，以下是一些常用的选项：

tocSelector: 目录容器的选择器（默认值为 .toc）。
contentSelector: 内容区域的选择器（默认值为 .content）。
headingSelector: 标题选择器，用于指定需要生成目录的标题（默认值为 h1, h2, h3）。
ignoreSelector: 忽略的选择器，指定不需要生成目录的标题（默认值为空）。
scrollSmooth: 是否启用平滑滚动（默认值为 true）。
scrollSmoothDuration: 平滑滚动的持续时间（默认值为 420 毫秒）。
scrollEndCallback: 滚动结束后的回调函数（默认值为空）。

示例配置

tocbot.init({
  tocSelector: '.toc',
  contentSelector: '.content',
  headingSelector: 'h1, h2, h3, h4',
  ignoreSelector: '.ignore',
  scrollSmooth: true,
  scrollSmoothDuration: 600,
  scrollEndCallback: function(e) { console.log('Scrolling finished!', e); }
});

样式定制

可以通过覆盖默认的 CSS 样式来定制目录的外观。以下是一些常见的样式调整：

/* 修改目录背景色 */
.toc {
  background-color: #f9f9f9;
}

/* 修改目录字体大小 */
.toc .toc-list-item {
  font-size: 14px;
}

/* 修改当前激活的目录项样式 */
.toc .is-active-link {
  color: #d9534f;
}

动态内容支持

如果页面中的内容是动态加载的，生成目录后需要手动刷新 Tocbot：

// 动态加载内容后，调用 refresh 方法
tocbot.refresh();

Tocbot