页面布局与阅读体验
为了给读者提供舒服、高效的阅读体验，EpoCanvas Docs 采用了经典而清晰的三栏式页面布局。读者在翻阅长篇文章时，随时能掌握”自己在整个站点的哪个位置”以及”正在阅读本文的哪个小节”。
整体界面分区说明
打开任意一篇文档，页面分为四个主要功能区域：
图：以《渲染规则详解》页为例的三栏布局标注图。① 顶部全局导航栏；② 左侧分类目录；③ 中央正文阅读区；④ 右侧”本页目录”大纲。四个区域在图中以边框和序号标出。
图：三栏布局的结构示意，标注了各区域的名称与职责。
1. 顶部全局导航栏 (Header)
位于页面最上方，固定悬浮，在向下滚动浏览时始终保持可见，高度为 3.5rem。顶栏从左到右依次排列着以下元素（对照下方标注图）：
图：顶栏元素标注特写。① Logo 与站点名；② 全局搜索框；③ 主导航按钮组；④ 版本徽标；⑤ 语言切换器；⑥ 深浅色主题切换；⑦ GitHub 仓库入口；⑧ Telegram 社群入口。
- 站点 Logo 与标题（①）：左侧展示 EpoCanvas 图标与项目名称，点击可快速回到文档站首页。
- 全局搜索框（②）：在框内输入关键词直接查找当前页面内容；按
Ctrl+K/Cmd+K打开全站检索弹窗，详见 全文搜索与快捷键使用。 - 主导航按钮（③）：提供”首页”、“产品说明”、“快速上手”等常用功能快速跳转链接，当前所在板块自动高亮。
- 版本徽标（④）：显示当前文档对应的发布版本号（如
v1.2.0），点击可查看 GitHub 上的详细更新记录。 - 多语言切换器（⑤）：点击语言按钮展开 10 种可选语言，选择后跳转到同一篇文章的目标语言版本，导航、侧边栏与正文一起切换。
- 深浅色主题切换（⑥）：提供太阳/月亮图标，在亮色模式和暗色模式间切换。
- GitHub 与 Telegram（⑦⑧）：右侧图标分别跳转到开源仓库与技术社群。
2. 左侧分类目录 (Sidebar)
位于页面左侧（宽度 16.5rem，约 264 像素），按逻辑层级展示所有的文档章节：
- 分组折叠：文档按”产品概览与入门”、“核心功能与使用指南”等分组整理，点击分组名可展开或收起。
- 当前页高亮：当前正在阅读的文章会在左侧菜单中以主题色胶囊背景高亮。
- 滚动位置记忆：从一篇文章跳转到另一篇时，左侧侧边栏的滚动条位置保持不变，不会跳回顶部。
3. 中央正文阅读区 (Main Content)
位于屏幕中央，是承载技术文档内容的核心区域：
- 页面标题与更新时间：正文顶部展示文章标题（取自 Frontmatter 的
title字段）以及”最后更新于”日期，方便判断内容时效。 - 适宜的阅读宽度：正文区域最大宽度限制为
60rem，避免显示器过宽导致一行文字过长、阅读串行。 - 底部翻页链接：每篇文档末尾自动生成”上一篇”和”下一篇”链接，按侧边栏顺序连续阅读。
- 代码块复制按钮：每个代码块右上角有复制按钮，一键复制代码原文。
4. 右侧文章大纲 (Table of Contents)
位于正文右侧：
- 自动抓取标题：系统在渲染页面时自动解析当前文档中的二级标题（
##）和三级标题（###），生成”本页目录”。 - 随动高亮追踪：阅读过程中随着页面向下滚动，大纲会自动高亮当前正在阅读的小节。
- 点击平滑直达：点击大纲中的任意小标题，页面平滑滚动到对应段落，并更新地址栏锚点（如
#整体界面分区说明），方便复制分享。
亮色与暗色模式
EpoCanvas Docs 同时提供浅色和深色两套主题，两套配色全部由 src/styles/custom.css 中的 CSS 变量定义：
- 跟随系统偏好：首次打开网页时，站点检测操作系统的深浅色设置并呈现对应主题。
- 手动切换与记忆：点击顶栏的主题切换按钮可手动切换，选择结果保存在浏览器 LocalStorage 中，下次打开仍然生效。
图：同一站点在浅色模式下的显示效果（以快速上手页为例）。
手机与平板端响应式适配
在手机或平板等不同尺寸的屏幕上，页面会自动调整布局以适应屏幕大小：
| 设备类型 | 屏幕宽度 | 布局表现 |
|---|---|---|
| 宽屏台式机 / 笔记本 | >= 1152px | 完整展示标准的三栏布局（左菜单 + 中正文 + 右大纲）。 |
| 平板电脑 / 窄窗口 | 800px ~ 1152px | 右侧大纲隐藏，保持左侧导航与正文双栏布局。 |
| 智能手机 | < 800px | 左右边栏全部收起，正文全宽展示。点击顶栏的菜单按钮滑出侧边栏抽屉。 |
无论是使用超宽屏显示器还是在手机上临时查阅，都能获得自然舒适的阅读体验。