架构评估 · 优化路线图
1. 一 · 架构现状(v6.2)一 · 架构现状(v6.2)组件 规模 状态 HTML设定页 41个(4个空占位) 就绪 style.css 1071行 · 双主题 · 76变量 就绪 nav.js 全站统一导航 · 双排分组 就绪 theme.js 日夜切换 · localStorage持久 就绪 chapters.json 107章元数据 · 结构化 就绪 session-log.json 30条会话记录 就绪 serve.py / bat Python + PowerShell双服务器 就绪 Git Push端点 /push → Gitee同步 就绪 正文MD content/ chapter-01~10.md 10/107章 正文HTML canvas/chapters/ 目录 待建
一 · 架构现状(v6.2)
| 组件 | 规模 | 状态 |
|---|---|---|
| HTML设定页 | 41个(4个空占位) | 就绪 |
| style.css | 1071行 · 双主题 · 76变量 | 就绪 |
| nav.js | 全站统一导航 · 双排分组 | 就绪 |
| theme.js | 日夜切换 · localStorage持久 | 就绪 |
| chapters.json | 107章元数据 · 结构化 | 就绪 |
| session-log.json | 30条会话记录 | 就绪 |
| serve.py / bat | Python + PowerShell双服务器 | 就绪 |
| Git Push端点 | /push → Gitee同步 | 就绪 |
| 正文MD | content/ chapter-01~10.md | 10/107章 |
| 正文HTML | canvas/chapters/ 目录 | 待建 |
2. 二 · 已解决的架构问题二 · 已解决的架构问题问题 方案 状态 导航硬复制35+页 nav.js 动态注入 — 一改全站同步 ✓ 双导航滚动消失 .toolbar-wrap 合并sticky ✓ 锚点被sticky遮挡 scroll-padding-top:110px ✓ 历史地理内容混淆 bible-history / bible-world / bible-nodes 三分 ✓ 全站中文乱码 所有文件UTF-8 + meta charset ✓ 版本号不统一 nav.js v5.4 + config.json + 各页footer同步 ✓ 母体概念散落各处 独立matrix.html + 术语禁令规范 ✓ 群像排版混乱 v6.2 三层命名(伙伴/支撑/幸存者)+统一卡片 ✓
二 · 已解决的架构问题
| 问题 | 方案 | 状态 |
|---|---|---|
| 导航硬复制35+页 | nav.js 动态注入 — 一改全站同步 | ✓ |
| 双导航滚动消失 | .toolbar-wrap 合并sticky | ✓ |
| 锚点被sticky遮挡 | scroll-padding-top:110px | ✓ |
| 历史地理内容混淆 | bible-history / bible-world / bible-nodes 三分 | ✓ |
| 全站中文乱码 | 所有文件UTF-8 + meta charset | ✓ |
| 版本号不统一 | nav.js v5.4 + config.json + 各页footer同步 | ✓ |
| 母体概念散落各处 | 独立matrix.html + 术语禁令规范 | ✓ |
| 群像排版混乱 | v6.2 三层命名(伙伴/支撑/幸存者)+统一卡片 | ✓ |
3. 三 · 当前问题 & 优化方案三 · 当前问题 & 优化方案# 问题 优先级 成本 方案 1 移动端无汉堡菜单 — 手机上看导航栏堆叠严重 高 3h nav.js 加 @media 断点 + ☰ 按钮 + 抽屉式展开 2 style.css 1071行单文件 — 维护越来越困难 中 2h 拆分为 theme-vars.css / layout.css / components.css(不影响现有引用) 3 大量内联style — 设定页正文含大量硬编码样式 中 4-6h 提取高频模式为语义class(如 .stat-row / .case-card / .profile-block) 4 4个空HTML占位文件 — bible.html / bible-characters.html / chapter-01-benyue.html / character-communication-habits.html 中 1h 删除或填充内容。目前nav.js中已有bible-characters的链接指向characters.html 5 章节正文未HTML化 — 只有content/*.md,canvas/chapters/目录为空 高 8-16h 将107章MD转为HTML放入canvas/chapters/,chapters.json中的file路径指向实际文件 6 chapters.html 目录硬编码 — 卷/章列表未从chapters.json动态生成 中 2h 用fetch chapters.json + 模板循环生成卷列表,替代手写HTML 7 50+个临时修复脚本 — canvas/根目录充斥 check-* / fix-* / _*.py 开发残留 低 0.5h 移入 tools/archived/ 子目录,保留 serve.py / build.ps1 等必要脚本 8 章节正文MD破折号已修复但HTML未同步 — 破折号274→0清零在MD中完成,但若HTML从旧MD生成可能有残留 低 1h MD→HTML批量转换时统一校验 9 无SEO meta标签 — 所有页面缺少 description / og:title / og:image 低 2h 在nav.js渲染时动态注入基础SEO标签,关键页面单独补强 10 缺少外链汇总页 — 外网/Gitee/分享链接散落在index.html hero区 中 0.5h 新建 external-links.html 统一管理
三 · 当前问题 & 优化方案
| # | 问题 | 优先级 | 成本 | 方案 |
|---|---|---|---|---|
| 1 | 移动端无汉堡菜单 — 手机上看导航栏堆叠严重 | 高 | 3h | nav.js 加 @media 断点 + ☰ 按钮 + 抽屉式展开 |
| 2 | style.css 1071行单文件 — 维护越来越困难 | 中 | 2h | 拆分为 theme-vars.css / layout.css / components.css(不影响现有引用) |
| 3 | 大量内联style — 设定页正文含大量硬编码样式 | 中 | 4-6h | 提取高频模式为语义class(如 .stat-row / .case-card / .profile-block) |
| 4 | 4个空HTML占位文件 — bible.html / bible-characters.html / chapter-01-benyue.html / character-communication-habits.html | 中 | 1h | 删除或填充内容。目前nav.js中已有bible-characters的链接指向characters.html |
| 5 | 章节正文未HTML化 — 只有content/*.md,canvas/chapters/目录为空 | 高 | 8-16h | 将107章MD转为HTML放入canvas/chapters/,chapters.json中的file路径指向实际文件 |
| 6 | chapters.html 目录硬编码 — 卷/章列表未从chapters.json动态生成 | 中 | 2h | 用fetch chapters.json + 模板循环生成卷列表,替代手写HTML |
| 7 | 50+个临时修复脚本 — canvas/根目录充斥 check-* / fix-* / _*.py 开发残留 | 低 | 0.5h | 移入 tools/archived/ 子目录,保留 serve.py / build.ps1 等必要脚本 |
| 8 | 章节正文MD破折号已修复但HTML未同步 — 破折号274→0清零在MD中完成,但若HTML从旧MD生成可能有残留 | 低 | 1h | MD→HTML批量转换时统一校验 |
| 9 | 无SEO meta标签 — 所有页面缺少 description / og:title / og:image | 低 | 2h | 在nav.js渲染时动态注入基础SEO标签,关键页面单独补强 |
| 10 | 缺少外链汇总页 — 外网/Gitee/分享链接散落在index.html hero区 | 中 | 0.5h | 新建 external-links.html 统一管理 |
4. 四 · 架构亮点(保持)四 · 架构亮点(保持)亮点 为什么好 nav.js 统一导航 全站41个页面共享一份导航数据。改一行动,全站生效。这是整个Canvas系统的精髓。 config.json 单点真相 版本号、章节数、标语集中管理。首页JS动态读取,改config即改全站。 双主题CSS变量 76个CSS变量在:root和[data-theme="dark"]之间切换。新增页面自动获得主题能力。 /push 端点 浏览器一键Git Push。serve.py内置串行锁,防止并发推送冲突。版本戳自动更新。 首页实时统计 fetch所有设定HTML+CSS计算字数+token估算,每次刷新都是最新数据。 session-log.json 30条AI会话的结构化日志,来源、模型、token、工作内容。这是"作品是如何被创造"的元叙事。 14卷下拉导航 nav.js用纯JS生成14卷章节下拉,不用任何前端框架。
四 · 架构亮点(保持)
| 亮点 | 为什么好 |
|---|---|
| nav.js 统一导航 | 全站41个页面共享一份导航数据。改一行动,全站生效。这是整个Canvas系统的精髓。 |
| config.json 单点真相 | 版本号、章节数、标语集中管理。首页JS动态读取,改config即改全站。 |
| 双主题CSS变量 | 76个CSS变量在:root和[data-theme="dark"]之间切换。新增页面自动获得主题能力。 |
| /push 端点 | 浏览器一键Git Push。serve.py内置串行锁,防止并发推送冲突。版本戳自动更新。 |
| 首页实时统计 | fetch所有设定HTML+CSS计算字数+token估算,每次刷新都是最新数据。 |
| session-log.json | 30条AI会话的结构化日志,来源、模型、token、工作内容。这是"作品是如何被创造"的元叙事。 |
| 14卷下拉导航 | nav.js用纯JS生成14卷章节下拉,不用任何前端框架。 |
5. 五 · 优化路线图(建议时序)五 · 优化路线图(建议时序)阶段 任务 预计用时 产出 第1批 移动端汉堡菜单 + 空文件清理 + 外链汇总页 4h 手机可用 + 目录干净 第2批 章节MD→HTML批量转换 + chapters.json动态渲染 10-18h 107章正文在线可读 第3批 CSS拆分 + 内联样式提取 + SEO标签 8-10h 代码可维护 + 搜索引擎友好 第4批 临时脚本归档 + 全文搜索 + 打印样式 4h 工程整洁 + 离线可用
第1批推荐立即执行(成本低、影响大)。第2批是让Canvas从"设定集"变成"完整在线阅读平台"的关键一步。
五 · 优化路线图(建议时序)
| 阶段 | 任务 | 预计用时 | 产出 |
|---|---|---|---|
| 第1批 | 移动端汉堡菜单 + 空文件清理 + 外链汇总页 | 4h | 手机可用 + 目录干净 |
| 第2批 | 章节MD→HTML批量转换 + chapters.json动态渲染 | 10-18h | 107章正文在线可读 |
| 第3批 | CSS拆分 + 内联样式提取 + SEO标签 | 8-10h | 代码可维护 + 搜索引擎友好 |
| 第4批 | 临时脚本归档 + 全文搜索 + 打印样式 | 4h | 工程整洁 + 离线可用 |
第1批推荐立即执行(成本低、影响大)。第2批是让Canvas从"设定集"变成"完整在线阅读平台"的关键一步。