能否在页面右侧实现类似Android文档的可自定义皮肤目录？如何实现？

核心实现思路 #

• 提取页面中的标题元素（如h2-h6），动态生成目录列表
• 将目录容器固定在页面右侧，随页面滚动时保持位置，同时高亮当前视口中的标题对应的目录项
• 通过CSS实现自定义皮肤，支持样式调整

具体实现步骤 #

1. 结构搭建 #

首先在页面中添加目录容器：

<div class="sidebar-toc">
  <h3>On this page</h3>
  <ul class="toc-list"></ul>
</div>

2. 动态生成目录项 #

使用JavaScript遍历页面标题，生成可点击的目录链接：

// 获取页面所有标题元素
const headings = document.querySelectorAll('h2, h3');
const tocList = document.querySelector('.toc-list');

headings.forEach(heading => {
  // 给标题添加唯一ID（如果没有的话）
  if (!heading.id) {
    heading.id = `toc-${heading.textContent.trim().toLowerCase().replace(/\s+/g, '-')}`;
  }
  // 创建目录项
  const listItem = document.createElement('li');
  const link = document.createElement('a');
  link.href = `#${heading.id}`;
  link.textContent = heading.textContent;
  listItem.appendChild(link);
  tocList.appendChild(listItem);
});

3. 固定定位与滚动高亮 #

通过CSS固定目录位置，再用JS监听滚动事件，高亮当前活跃的目录项：

CSS样式（基础皮肤）

.sidebar-toc {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 280px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 16px;
}

.sidebar-toc h3 {
  margin-top: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.toc-list li {
  margin-bottom: 8px;
}

.toc-list a {
  text-decoration: none;
  color: #666;
  font-size: 13px;
  display: block;
  padding: 4px 0;
}

.toc-list a.active {
  color: #1a73e8;
  font-weight: 500;
}

滚动监听JS

// 监听滚动事件，更新活跃目录项
window.addEventListener('scroll', () => {
  let currentHeading = '';
  headings.forEach(heading => {
    const headingTop = heading.offsetTop;
    if (window.scrollY >= headingTop - 100) {
      currentHeading = heading.id;
    }
  });

  // 移除所有活跃状态，给当前项添加
  document.querySelectorAll('.toc-list a').forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === `#${currentHeading}`) {
      link.classList.add('active');
    }
  });
});

4. 自定义皮肤实现 #

通过修改CSS变量或者新增皮肤类来实现自定义样式，比如：

深色皮肤示例

.sidebar-toc.dark-theme {
  background: #1e1e1e;
  box-shadow: 0 2px 8px rgba(255,255,255,0.1);
}

.sidebar-toc.dark-theme h3 {
  color: #fff;
  border-bottom-color: #333;
}

.sidebar-toc.dark-theme .toc-list a {
  color: #ccc;
}

.sidebar-toc.dark-theme .toc-list a.active {
  color: #64b5f6;
}

然后给目录容器添加dark-theme类即可切换皮肤：

<div class="sidebar-toc dark-theme">...</div>

补充说明 #

• 如果使用静态站点生成器（如Jekyll、VuePress），很多工具自带类似的TOC插件，可直接配置使用，无需手动编写代码
• 对于复杂的文档站点，也可以使用成熟的库来简化实现，减少自定义开发量

内容的提问来源于stack exchange，提问作者EfficientCoconut2739