page-outline/test.html at master · Shadowzzh/page-outline · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Outline 测试页面</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
      line-height: 1.6;
      color: #333;
    }
    h1 { color: #1a1a1a; border-bottom: 2px solid #eee; padding-bottom: 10px; }
    h2 { color: #2a2a2a; margin-top: 40px; }
    h3 { color: #3a3a3a; }
    h4 { color: #4a4a4a; }
    h5 { color: #5a5a5a; }
    h6 { color: #6a6a6a; }
    p { margin: 16px 0; }
    section { margin: 30px 0; }
    .spacer { height: 500px; }
  </style>
</head>
<body>

<h1>Page Outline 测试文档</h1>
<p>这是一个用于测试 Page Outline 扩展的 HTML 文件，包含多级标题结构。</p>

<div class="spacer"></div>

<h2>第一章：快速开始</h2>
<p>这是第一章的内容，介绍如何快速开始使用。</p>

<h3>1.1 安装</h3>
<p>安装步骤说明...</p>

<h4>1.1.1 系统要求</h4>
<p>需要 Chrome 88 或更高版本。</p>

<h4>1.1.2 下载方式</h4>
<p>可以从 Chrome Web Store 下载。</p>

<h3>1.2 配置</h3>
<p>配置相关说明...</p>

<div class="spacer"></div>

<h2>第二章：核心功能</h2>
<p>这是第二章的内容，介绍核心功能。</p>

<h3>2.1 大纲生成</h3>
<p>自动从页面提取标题生成大纲。</p>

<h4>2.1.1 标题识别</h4>
<p>支持 h1-h6 所有标题级别。</p>

<h4>2.1.2 树形结构</h4>
<p>自动构建层级树形结构。</p>

<h3>2.2 滚动追踪</h3>
<p>滚动页面时自动高亮当前位置。</p>

<h3>2.3 面板拖拽</h3>
<p>可以自由拖拽面板位置。</p>

<div class="spacer"></div>

<h2>第三章：高级功能</h2>
<p>这是第三章的内容，介绍高级功能。</p>

<h3>3.1 层级过滤</h3>
<p>可以按标题级别过滤显示。</p>

<h3>3.2 主题切换</h3>
<p>支持亮色/暗色/跟随系统三种主题。</p>

<h4>3.2.1 亮色主题</h4>
<p>默认的亮色主题。</p>

<h4>3.2.2 暗色主题</h4>
<p>护眼的暗色主题。</p>

<h4>3.2.3 跟随系统</h4>
<p>自动跟随系统主题设置。</p>

<h3>3.3 展开折叠</h3>
<p>可以展开或折叠大纲节点。</p>

<div class="spacer"></div>

<h2>第四章：常见问题</h2>

<h3>4.1 为什么没有显示大纲？</h3>
<p>可能是页面没有使用标准的标题标签。</p>

<h3>4.2 如何调整面板大小？</h3>
<p>拖拽面板边缘即可调整大小。</p>

<div class="spacer"></div>

<h2>第五章：更新日志</h2>

<h3>v1.0.0</h3>
<p>初始版本发布。</p>

<h4>新功能</h4>
<ul>
  <li>大纲生成</li>
  <li>滚动追踪</li>
  <li>面板拖拽</li>
</ul>

<h4>修复</h4>
<ul>
  <li>修复若干 bug</li>
</ul>

<div class="spacer"></div>

<h2>附录</h2>

<h3>A. 技术栈</h3>
<p>WXT + React + Zustand + Tailwind CSS</p>

<h3>B. 参考资料</h3>
<p>相关链接和文档。</p>

<h5>深层嵌套标题 H5</h5>
<p>测试 H5 标题。</p>

<h6>最深层标题 H6</h6>
<p>测试 H6 标题。</p>

<div class="spacer"></div>

<footer style="text-align: center; color: #999; padding: 40px 0;">
  Page Outline 测试页面 - 滚动查看效果
</footer>

</body>
</html>