如何给网站文章页前面自动加个目录导航

一些网站文章正文前有个目录导航，这是根据本文的h标签自动添加上去的，一些朋友可能需要这样的功能，其实本站文章页面也是如此显示，但此种写法只适用Zblog系统，下面给出个通用方案。

要实现的效果类似下图

修改简要文字说明

本文分享具体代码，主要涉及正文html, JS, CSS三部分文件，请参考自己实际程序修改。使用说明

将HTML中的<div id="toc-container"></div>放在你想要显示目录的位置

确保文章内容包含在<article class="content">中（可修改配置中的选择器）

标题需要包含在配置的heading标签内（默认h2-h4）

可选功能：

修改config.scrollOffset调整滚动偏移量

设置config.collapseDepth控制默认折叠层级

通过CSS自定义目录样式

正文HTML模板文件

<!-- HTML 部分 -->
<div id="toc-container"></div> <!-- 目录将插入到这里 -->
<article class="content">
  <!-- 你的文章内容，包含 h2/h3/h4 等标题 -->
</article>

CSS样式部分代码

/* CSS 样式 */
#toc-container {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  max-width: 300px;
  max-height: 80vh;
  overflow-y: auto;
}
.toc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.toc-list li {
  margin: 5px 0;
  line-height: 1.4;
}
.toc-list a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}
.toc-list a:hover {
  color: #007bff;
}
.toc-list .active > a {
  color: #007bff;
  font-weight: bold;
}
/* 嵌套列表缩进 */
.toc-list ul {
  padding-left: 1em;
  list-style: none;
  border-left: 1px solid #ddd;
}

JS文件增加或者修改

function generateTOC() {
  // 配置参数
  const config = {
    container: '#toc-container', // 目录插入位置
    content: '.content',         // 内容区域选择器
    headings: ['h2', 'h3', 'h4'], // 要包含的标题标签
    scrollSmooth: true,          // 是否平滑滚动
    scrollOffset: 20,            // 滚动偏移量（px）
    collapseDepth: 0             // 默认展开层级（0=全部展开）
  };
  // 获取所有目标标题
  const headings = document.querySelectorAll(config.content + ' ' + config.headings.join(', '));
  if (headings.length === 0) return;
  // 创建目录容器
  const container = document.querySelector(config.container);
  const tocWrapper = document.createElement('div');
  tocWrapper.className = 'toc-wrapper';
  
  // 创建列表
  const tocList = document.createElement('ul');
  tocList.className = 'toc-list';
  let currentUl = tocList;
  const stack = [tocList];
  let previousLevel = 0;
  headings.forEach((heading, index) => {
    // 确保标题有ID
    if (!heading.id) {
      heading.id = 'heading-' + index;
    }
    // 获取标题级别
    const level = parseInt(heading.tagName.substring(1));
    // 创建列表项
    const listItem = document.createElement('li');
    const link = document.createElement('a');
    link.href = '#' + heading.id;
    link.textContent = heading.textContent;
    
    // 添加点击事件
    link.addEventListener('click', (e) => {
      e.preventDefault();
      scrollToHeading(heading);
    });
    // 处理嵌套层级
    if (level > previousLevel) {
      const newUl = document.createElement('ul');
      newUl.className = 'toc-list';
      listItem.appendChild(newUl);
      stack.push(newUl);
      currentUl = newUl;
    } else if (level < previousLevel) {
      const popCount = previousLevel - level;
      for (let i = 0; i < popCount; i++) {
        stack.pop();
      }
      currentUl = stack[stack.length - 1];
    }
    listItem.appendChild(link);
    currentUl.appendChild(listItem);
    previousLevel = level;
  });
  // 插入目录
  tocWrapper.appendChild(tocList);
  container.appendChild(tocWrapper);
  // 平滑滚动函数
  function scrollToHeading(heading) {
    const offset = heading.getBoundingClientRect().top + window.scrollY - config.scrollOffset;
    window.scrollTo({
      top: offset,
      behavior: config.scrollSmooth ? 'smooth' : 'auto'
    });
  }
  // 高亮当前章节（可选）
  function updateActiveLink() {
    const links = tocWrapper.querySelectorAll('a');
    links.forEach(link => {
      const section = document.querySelector(link.getAttribute('href'));
      const rect = section.getBoundingClientRect();
      if (rect.top <= config.scrollOffset && rect.bottom >= 0) {
        link.parentElement.classList.add('active');
      } else {
        link.parentElement.classList.remove('active');
      }
    });
  }
  // 滚动监听
  window.addEventListener('scroll', () => {
    updateActiveLink();
  });
}
// 初始化目录生成
document.addEventListener('DOMContentLoaded', generateTOC);

进一步完善代码

通过上面的代码修改已经实现了基本需求功能，下面代码是让显示更加完美。

这个实现方案有以下特点：

自动识别标题层级并生成嵌套目录

支持平滑滚动定位

自动添加锚点ID

当前阅读位置高亮

响应式设计

可通过CSS完全自定义样式

你可以根据实际需求调整配置参数和样式表现。要修改包含的标题级别，只需修改配置中的headings数组即可（例如改为['h2', 'h3']）

JS增加部分代码实现点击展开折叠

// 在link.addEventListener点击事件中添加：
if (e.target.nextElementSibling?.tagName === 'UL') {
  e.target.nextElementSibling.classList.toggle('collapsed');
}

在CSS中添加下面代码实现自动添加序号和自适应

.toc-list li {
  counter-increment: section;
}
.toc-list li a::before {
  content: counters(section, ".") ". ";
}
@media (max-width: 768px) {
  #toc-container {
    position: static;
    max-width: 100%;
  }
}