Hugo Book主题实现目录当前章节高亮效果

在Hugo Book主题中实现目录(TOC)当前章节高亮是一个常见的需求，这能显著提升用户体验，让读者清晰地知道自己当前阅读的位置。本文将详细介绍实现这一功能的多种方法。

基本原理

目录高亮功能的实现原理主要基于JavaScript监听页面滚动事件，计算当前视口中显示的章节标题，然后为对应的目录项添加高亮样式。这需要以下几个关键步骤：

1. 获取页面所有章节标题元素
2. 监听页面滚动事件
3. 计算当前视口中显示的章节
4. 为对应的目录项添加高亮类

实现方法

方法一：使用Intersection Observer API

现代浏览器提供了Intersection Observer API，可以更高效地检测元素是否进入视口：

document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      const id = entry.target.getAttribute('id');
      if (entry.intersectionRatio > 0) {
        document.querySelector(`nav a[href="#${id}"]`).classList.add('active');
      } else {
        document.querySelector(`nav a[href="#${id}"]`).classList.remove('active');
      }
    });
  }, { threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0] });

  // 观察所有标题元素
  document.querySelectorAll('h1[id], h2[id], h3[id], h4[id]').forEach(section => {
    observer.observe(section);
  });
});

方法二：滚动事件监听

传统的实现方式是监听滚动事件，计算各章节位置：

window.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      const id = entry.target.getAttribute('id');
      if (entry.intersectionRatio > 0) {
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
      } else {
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
      }
    });
  });
  
  // 跟踪所有包含id的标题
  document.querySelectorAll('h1[id], h2[id], h3[id], h4[id]').forEach((section) => {
    observer.observe(section);
  });
});

CSS样式配置

无论采用哪种JavaScript实现方式，都需要为高亮状态定义CSS样式：

.book-menu nav ul li.active > a {
  color: var(--color-link);
  font-weight: bold;
  background: rgba(0,0,0,0.05);
}

.book-menu nav ul li.active > a:hover {
  opacity: 1;
}

性能优化建议

1. 节流处理：对于滚动事件监听，建议添加节流(throttle)函数，避免频繁触发
2. 缓存选择器：缓存DOM查询结果，避免重复查询
3. 使用现代API：优先使用Intersection Observer API，性能更好
4. 限制观察范围：只观察实际需要的标题元素

注意事项

1. 确保所有章节标题都有唯一的ID属性
2. 目录结构与页面标题结构需要保持一致
3. 在移动端需要考虑触摸滚动的情况
4. 对于长文档，可能需要分段加载以提高性能

通过以上方法，可以有效地在Hugo Book主题中实现目录当前章节高亮功能，提升用户的阅读体验。根据项目具体需求，可以选择最适合的实现方式。