TOC功能测试页面
这是一个测试页面，用于验证目录（TOC）功能是否正常工作。
第一章：简介
欢迎来到TOC功能测试页面。这个页面包含多个层级的标题，用于测试目录生成和跳转功能。
1.1 功能特性
目录功能包含以下特性：
- 自动生成目录索引
- 支持多层级标题
- 平滑滚动效果
- 响应式设计
1.2 技术实现
TOC功能使用了以下技术：
- Jekyll模板引擎
- JavaScript动态处理
- CSS响应式布局
第二章：主要功能
2.1 目录生成
目录会自动扫描文章中的所有标题并生成对应的目录项。
2.1.1 支持的标题类型
支持以下HTML标题标签：
- h1: 一级标题
- h2: 二级标题
- h3: 三级标题
- h4: 四级标题
- h5: 五级标题
- h6: 六级标题
2.1.1.1 标题ID生成
系统会自动为没有ID的标题生成唯一的ID，确保锚点跳转功能正常工作。
2.1.1.2 中文支持
完全支持中文标题的ID生成和显示。
2.1.2 目录样式
目录具有美观的样式设计：
- 层级缩进显示
- 悬停效果
- 活动状态高亮
- 响应式布局
2.2 交互功能
点击跳转
点击目录项会平滑滚动到对应章节：
// 平滑滚动实现
window.scrollTo({
top: targetElement.offsetTop - 120,
behavior: 'smooth'
});
滚动高亮
当用户滚动页面时，目录会自动高亮当前阅读位置的章节。
2.3 响应式设计
TOC功能在不同设备上都有良好的显示效果：
- 桌面端：右侧固定目录
- 平板端：顶部可折叠目录
- 手机端：移动端优化样式
第三章：使用方法
3.1 默认启用
默认情况下，TOC功能会在所有博文页面启用。
3.2 禁用TOC
如果需要在特定页面禁用TOC功能，可以在front matter中添加：
---
layout: post
title: "无目录的文章"
toc: false
---
第四章：总结
TOC功能为用户提供了便捷的文章导航体验，特别是在阅读长篇技术文章时非常有用。
4.1 优势
- 提升用户体验
- 改善文章可读性
- 便于快速定位内容
4.2 后续改进
未来可以考虑添加以下功能：
- 目录搜索功能
- 自定义样式选项
- 目录导出功能
感谢使用TOC功能！