本文用于测试目录组件的层级显示效果，包含从 H1 到 H6 的所有标题层级。

第一章：基础概念

这是第一个 H1 标题，通常作为主要章节。

1.1 介绍与背景

这是 H2 标题，作为二级章节。

1.1.1 历史发展

这是 H3 标题，展示三级层次。

1.1.1.1 早期阶段

这是 H4 标题，更细致的分类。

1.1.1.1.1 初始尝试

这是 H5 标题，非常详细的小节。

1.1.1.1.1.1 第一次实验

这是 H6 标题，最深层级的内容。

1.1.1.1.1.2 第二次实验

同级的另一个 H6 标题。

1.1.1.1.2 改进方案

回到 H5 层级。

1.1.1.2 中期发展

另一个 H4 标题。

1.1.2 核心概念

回到 H3 层级，展示层级跳转。

1.2 技术架构

第二个 H2 标题。

1.2.1 前端技术栈

包含技术细节的章节。

1.2.2 后端架构

同级的另一个 H3。

第二章：实践应用

新的 H1 章节开始。

2.1 环境搭建

开始实践部分。

2.1.1 安装 Node.js 环境

标题中包含代码。

2.1.2 配置 VS Code

开发工具配置。

2.2 项目初始化

另一个二级标题。

2.2.1 创建项目结构

项目结构说明。

2.2.1.1 目录规划

详细的目录规划。

2.2.1.1.1 源代码目录

源码组织方式。

2.2.1.1.2 配置文件

配置文件说明。

2.2.1.2 依赖管理

包管理相关。

第三章：高级特性

第三个主要章节。

3.1 性能优化

性能相关内容。

3.1.1 缓存策略

缓存实现方案。

3.1.1.1 内存缓存

内存级别的缓存。

3.1.1.2 磁盘缓存

持久化缓存。

3.1.2 代码分割

代码优化技术。

3.2 安全性考虑

安全相关内容。

3.2.1 XSS 防护

跨站脚本攻击防护。

3.2.2 CSRF 防护

跨站请求伪造防护。

3.2.2.1 Token 验证

使用 Token 进行验证。

3.2.2.1.1 生成策略

Token 生成算法。

3.2.2.1.1.1 随机数生成器

最底层的实现细节。

3.3 部署方案

部署相关内容。

第四章：案例分析与最佳实践

实际案例分析。

4.1 企业级应用案例

大型项目经验。

4.1.1 电商平台架构

电商系统设计。

4.1.2 社交网络优化

社交应用优化。

4.2 开源项目贡献

开源社区参与。

4.2.1 如何提交 PR

Pull Request 流程。

4.2.2 代码审查标准

Code Review 要点。

第五章：跳级测试

这章用于测试标题跳级的情况。

5.1 从 H2 直接跳到 H4

5.1.1 正常的 H3

5.1.1.1 正常的 H4

5.2 另一个 H2

5.2.0.0.0.1 直接跳到 H6

5.2.1 回到 H3

正常的层级恢复。

第六章：特殊字符测试

6.1 包含特殊字符的标题 & 符号 | 管道符

6.1.1 数学公式𝑎2+𝑏2=𝑐2

6.1.1.1 包含 HTML 标签 测试

6.1.1.1.1 包含表情 😊 和 Unicode ™

6.1.1.1.1.1 混合内容 code 粗体 斜体

第七章：长标题测试

7.1 这是一个非常非常非常长的标题，用于测试目录组件对于超长标题的处理能力，看看是否会正确地截断或者换行显示

7.1.1 中等长度的标题，但也包含一些内容

7.1.1.1 短标题

7.1.1.1.1 a

7.1.1.1.1.1 最短

总结

本文测试了目录组件的各种层级显示效果，包括：

• 完整的 H1 到 H6 六个层级
• 正常的层级嵌套
• 标题跳级情况
• 特殊字符和代码
• 长短不同的标题
• 同级多个标题的显示

通过这些测试，可以全面验证目录组件的渲染效果和交互功能。