首页 › 参考文档

详细设计:DeepTraining 教学网站

参考

设计日期:2026-11-11 | 针对:i7-8550U / 16GB / 无 GPU / Windows 10 | 浏览环境:本机 + 手机(同一 WiFi) 依据:ai知识的学习大纲.md(M1-M9)+ 已建成的两条课程体系(模型训练 S0-S8、LangGraph G0-G8) 本文是实施前的设计定稿:你确认后,我按第十一节分阶段开工。


一、定位:这个网站是什么、不是什么

1.1 是什么(三个身份)

身份 说明
可视化教材库 把 doc/ 下三条线(S / G / M)共 60+ 篇教材渲染成带导航的网页,手机/电脑/断网都能看
进度驾驶舱 你当前在哪、下一步做什么、每条线完成百分之几——一眼可见(把三个 README 进度表合并成一个仪表盘)
自测考场 每课的实验任务/验收标准变成可勾选清单,每阶段配选择题小测验,答错立即给解析

1.2 不是什么(边界,防止做成大工程)

  • ❌ 不替代我的人工指导:网站上"待验收"的状态,仍要回到对话里由我检查实验结果才算数。网站负责"看和自测",我负责"教和验收"。
  • ❌ 不是新内容源:doc/ 下的 markdown 是唯一事实源。网站只渲染它们,不另写一套教学内容(唯一的增量是测验题库)。教材改了 → 重跑 3 秒构建 → 网站同步。
  • ❌ 没有后端:无登录、无数据库、无评论、无服务器部署。纯静态 HTML,断网可用,双击就能开。

1.3 三个典型使用场景(设计的靶心)

场景 你的动作 网站提供
复习(睡前/碎片时间) 手机连家里 WiFi 打开 http://192.168.x.x:8080 上次读到哪、这课的要点、小测验
跟学(正式学习时段) 电脑上开课程页对照,动手跑实验 教材正文 + 可勾选实验清单 + 代码复制按钮
排查(实验卡住) 搜索框搜报错关键词/概念(如 "Reducer"、"过拟合") 全文搜索直接跳到对应课程段落

二、技术选型(ADR)

三个候选方案对比,选定 A:

维度 A. 自研纯静态(选定) B. MkDocs Material C. VitePress / Docusaurus
运行依赖 Python + markdown + pygments(两个纯 Py 库,清华源秒装) pip 装 mkdocs-material 全家桶 Node.js + node_modules(300MB+)
内存占用 构建时 <100MB,运行时 0(浏览器开静态页) dev server 常驻约 150MB dev server 常驻 300MB+
进度仪表盘(核心诉求) 完全自由定制——首页画进度环、显示当前位置 需覆写主题模板,受限 需写 React/Vue 组件
测验系统 原生自研(选择题+解析) 无成熟插件 需插件或自写组件
搜索 自研 JSON 索引(60 文件规模完全够用) 内置 lunr 内置
file:// 直接双击打开 ✅(数据以 <script> 内联,绕开 CORS) 需配置 默认不行
维护者 构建脚本由我写好给你(Python 单文件,可读) 配置简单但定制难 双重技术栈
结论 ✅ 进度+测验是本站灵魂,定制自由度决定成败;且零 Node 依赖最贴你的机器 备选(若 A 试用后不满意) 不考虑(你的机器跑不动 Node 工具链)

决策记录:选 A。核心理由不是"自研有多好",而是本站的核心价值(进度驾驶舱+自测考场)在 B/C 里都是二等公民,而它们恰是你的高频功能。


三、内容架构:三条线统一模型

3.1 课程树(courses.json 注册表)

所有课程统一成 线(Track)→ 阶段(Stage)→ 课(Lesson) 三层。注册表外挂,零侵入——不改动现有 50 篇教材文件的任何一个字:

{
  "tracks": [
    {
      "id": "G", "name": "LangGraph Agent 编排", "color": "#7c5cff",
      "stages": [
        { "id": "G0", "title": "环境搭建与验证", "difficulty": "入门",
          "lessons": [
            { "id": "G0-01", "title": "环境搭建:一个能跑 Agent 的最小工作台",
              "file": "../doc/LangGraph/G0-环境搭建与验证/01-环境搭建-最小工作台.md",
              "status": "done", "est_min": 60 },
            { "id": "G0-02", "title": "Studio 可视化调试台", "status": "done" }
          ] }
      ]
    },
    { "id": "S", "name": "模型训练", "color": "#2f8fff" },
    { "id": "M", "name": "AI 开发基建九模块", "color": "#12b76a" }
  ],
  "current": { "G": "G1-01", "S": "S1-02" }
}

字段说明: - status 种子值:none / doing / review / done(未开始/学习中/待验收/已验收),与 README 进度表里的 ⬜/🔶/✅ 记号一一对应。首次由我把三个 README 的现状抄进去;此后我每次验收后更新它并重跑构建。 - current:当前位置指针——仪表盘"你现在在哪"的数据源,等价于我在对话里说的 resume 点。 - M 线的九个模块开课前以"预告卡片"形式展示(内容来自大纲 M1-M9 详情),开课后替换为完整课程页。

3.2 每课页面 = 既有五段结构原样渲染

教材文件已有的五段(学习目标 / 核心知识 / 实验任务 / 验收标准 / 下一阶段衔接)不做任何改写,直接渲染并逐段增强:

教材段落 网站增强
学习目标 渲染成醒目的 🎯 目标卡片
核心知识 正文渲染 + 代码块"一键复制"按钮 + 表格美化
实验任务 其中 - [ ] 清单项自动转成可勾选交互清单(勾选状态存 localStorage)
验收标准 同上,全部勾满时提示"→ 回到对话找我验收"
下一阶段衔接 渲染成跳转卡片(自动带上"下一篇"按钮)

3.3 由浅入深的总排序(path.html 的数据源)

三条线不串行、按大纲第四节穿插推进,路径页画成时间线:

W1-W2   G1 心智模型 ── S1 基础概念          ← 你在这
W3      G2 控制流   ── S2 数据处理
W4      G3 持久化   ── M8 Git(30min) + M1 原理直觉
W5-W6   G4 生态     ── S3/S4 ── M4 本地推理
W7      G5 多智能体 ── S5 调优 ── M3 RAG进阶
W8-W9   G6 工程化   ── S6/S7 ── M6 pandas/SQL
W10-W12 G7 实战 + M5/M7 ── S8 综合 ── G8 毕业

每个阶段节点标注:难度徽章(入门🟢/进阶🟡/实战🟠/毕业🔴)、预计课时、依赖阶段(前置未完成时显示灰色锁定提示,但不强制锁——只提示)。


四、站点地图(7 类页面)

# 页面 输出文件 核心功能
1 仪表盘(首页) index.html 当前位置卡 + 三线进度环 + 下一步建议 + 时间线速览
2 学习路径图 path.html 全部阶段依赖图 + 12 周穿插时间线 + 防走偏入口
3 课程页 ×~60 G/G1/01.html、S/S1/02.html… 教材正文渲染 + 勾选清单 + 小测验 + 上一篇/下一篇
4 复习中心 review.html 全站验收标准聚合成一张大清单(毕业自检用)
5 防走偏清单 dont-learn.html 大纲"不需要学什么"+ 各阶段易错点(对应你踩过的坑)
6 术语表 glossary.html 全站概念速查(Reducer / 检查点 / Q4 量化 / 欠拟合…)
7 搜索 顶栏内嵌,无独立页 输入即出结果(标题+正文命中),键盘 ↑↓ 选择回车跳转

五、关键页面详细设计

5.1 仪表盘 index.html

┌──────────────────────────────────────────────────────────┐
│ 🎓 DeepTraining 学习中心        [🔍搜索] [导出进度] [🌙]   │
├──────────────────────────────────────────────────────────┤
│ 📍 你现在的位置                                           │
│  ┌───────────────────────┐  ┌───────────────────────┐    │
│  │ G 编排线 ▶ G1-01      │  │ S 训练线 ▶ S1-02      │    │
│  │ 解剖第一个 Agent       │  │ 训练观察记录           │    │
│  │ G0 ✅ → G1 🔶 → G2 ⬜ │  │ S0 ✅ → S1 🔶 → S2 ⬜ │    │
│  │ [继续学习]            │  │ [继续学习]            │    │
│  └───────────────────────┘  └───────────────────────┘    │
│  💡 下一步建议:先听我讲 G1-01(30min)→ 再做 S1 三个改动实验│
├──────────────────────────────────────────────────────────┤
│ 📊 三条线总进度                                           │
│  G 编排 ████████░░░░░░░░  2/24 课    8%                  │
│  S 训练 ████░░░░░░░░░░░░  3/26 课   12%                  │
│  M 基建 ░░░░░░░░░░░░░░░░  0/9 模块   0%   (预告中)       │
├──────────────────────────────────────────────────────────┤
│ 🗓 12 周穿插时间线(横条,当前周高亮)                       │
│ 🚫 防走偏:8 类不学的东西 [查看]  |  📖 术语表 [查看]        │
└──────────────────────────────────────────────────────────┘
   页脚:本页构建于 2026-11-11 00:50 | 教材改动后重跑 build_site.py

设计要点: - 当前位置卡是首屏第一位——打开网站 3 秒内回答"我现在该干嘛",这是你早上最常问的问题。 - 进度条同时显示"课数"和百分比(验收过才算 done,与 README 口径一致)。 - 页脚的构建时间戳解决"双源漂移"焦虑:一眼看出网站是不是最新。

5.2 课程页 G/G1/01.html(占全站 80% 的页面类型)

┌────────────┬─────────────────────────────────────────────┐
│ 📚 侧栏(树) │ 面包屑:LangGraph › G1 核心心智模型 › 01       │
│            │ ╔═══════════════════════════════════════╗    │
│ G 编排      │ ║ 01-解剖第一个 Agent     [状态按钮 🔶→✅] ║    │
│ ├ G0 ✅    │ ║ 难度🟡入门 | 预计60min | 前置: G0-02  ║    │
│ │ ├ 01 ✅  │ ╚═══════════════════════════════════════╝    │
│ │ └ 02 ✅  │ 🎯 学习目标(卡片)                            │
│ ├ G1 ◀     │ 📖 核心知识                                  │
│ │ ├ 01 🔶◀ │   ……markdown 正文……                          │
│ │ └ 02 ⬜  │   ……代码块(右上角复制按钮)……                 │
│ ├ G2 ⬜    │ 🧪 实验任务                                   │
│ │ …        │   ☐ 改动实验1:换模型  ☐ 改动实验2:加工具     │
│ S 训练(折)  │ ✅ 验收标准                                   │
│ M 基建(折)  │   ☑ 五条消息 trace 说得出每步干了啥            │
│            │   ⚠ 全部勾满 → 提示"回对话找我验收"            │
│            │ 📝 小测验(3 题选择题,见 6.3)                 │
│            │ 🔗 下一阶段衔接卡片  [← 上一篇] [下一篇 →]      │
└────────────┴─────────────────────────────────────────────┘

设计要点: - 侧栏树就是全站目录:三条线可折叠,当前线展开、当前课高亮,G/S/M 各用主题色左边框区分。 - 状态按钮点了立即变色并持久化(6.1),但"✅ 已验收"必须由我验收后我更新注册表——按钮最多标到 🔶,✅ 单向锁定(防自欺,这是教学设计不是工程偷懒)。 - 前置未完成时顶部显示软提示条:"建议先完成 G0-02",可点跳转、可忽略。

5.3 复习中心 review.html

把全部课程的"验收标准"聚合成一页大清单,按线分组、可全选过滤(只看待验收/只看未完成)。用途:G8 毕业自检、隔周回扫、写简历前盘点能力。


六、核心交互设计

6.1 进度状态机(与 README 记号对齐)

⬜ 未开始 ──点"开始学"──▶ 🔶 学习中 ──实验跑完──▶ 🟡 待验收 ──我验收──▶ ✅ 已验收
  • 存储:localStorage["dt_progress"],逐课记 {status, tasks:[已勾索引], quiz:[得分]}。刷新/关机不丢。
  • ✅ 只认注册表:网站按钮最高只到 🟡 待验收;✅ 由我在对话里验收后写回 courses.json 并重跑构建下发。避免"自己给自己发毕业证"。
  • 导出:顶栏"导出进度"生成 progress-export-20261111.json 下载——进度从此不锁死在一台浏览器里,换电脑/换浏览器可导入。

6.2 当前位置(resume 点可视化)

仪表盘"你现在的位置"读 courses.json 的 current 字段。维护方式:每次我验收完一课,更新该字段 → 重跑构建。与你我在对话里的"你现在站在 G1"完全同步,网站是对话指导的镜像,不是第二个真相源。

6.3 小测验(每阶段 3 题,题库人工出)

// site/data/quizzes/G1.json
{ "lesson": "G1-02",
  "questions": [
    { "q": "LangGraph 里两个节点同时更新同一字段,为什么必须加 Reducer?",
      "options": ["不加会报错", "不加是覆盖,一边结果会丢", "不加就变串行"],
      "answer": 1,
      "explain": "默认行为是整体覆盖 state——G1-02 实验里你亲眼见过 'B 丢了'。" }
  ] }

交互:选完立即判分 → 错题展示 explain(解析直接引用教材原文/你实验里的实测数字)→ 得分记入进度。题目覆盖"六道自测题"风格的概念题;实验/实操题不上网测,仍由我当面验收。

6.4 全文搜索

  • 构建时把每课"标题 + 正文前 2000 字"压成条目,生成 data/search_index.js(<script> 引入,兼容 file://)。
  • 浏览器端简单的包含匹配 + 标题加权,60 篇规模毫秒级出结果。命中显示"课程 ID + 标题 + 命中片段",回车直达锚点。
  • 不引入 lunr/flexsearch 等库——规模小,自写 30 行更省。

七、视觉规范

项 规格
配色 G 线 #7c5cff 紫 | S 线 #2f8fff 蓝 | M 线 #12b76a 绿;中性色灰阶,仅少量使用
暗色模式 默认跟随系统,可手动切换(localStorage 记忆)——睡前手机复习场景
字体 正文 system-ui, "Microsoft YaHei";代码 "Cascadia Code", Consolas, monospace;正文 16px/1.75
徽章 难度:入门🟢 进阶🟡 实战🟠 毕业🔴;状态:⬜🔶🟡✅
布局 桌面:左侧 260px 固定侧栏 + 自适应正文(max-width 860px);手机:侧栏收成汉堡菜单
代码块 pygments 高亮 + 一键复制 + 语言标签;命令块与代码块用不同底色区分(命令块=可直接抄进终端)

八、构建系统

8.1 管线(site/build_site.py,单文件,无框架)

读 data/courses.json 注册表
  → 遍历每课 .md:python-markdown 渲染(扩展:tables / fenced_code / toc / admonition / codehilite)
  → 解析文内 "- [ ]" 清单项 → 转交互复选框(键=课程ID+项序号)
  → 注入 lesson.html 模板 → 输出 output/<track>/<stage>/<NN>.html
  → 生成 index / path / review / glossary / dont-learn
  → 生成 data.js(课程树快照)+ search_index.js
  → 校验:注册表里每个 file 字段必须存在,缺失即构建失败(防链接腐烂)
  → 复制 assets/,打印统计(页数/体积/耗时)

8.2 使用命令(全部两条)

实施勘误(2026-11-11):工作区没有根级 .venv,实际解释器在 langgraph-learn/.venv(Python 3.12);项目目录按你的指定从 site/ 改为 Prj/AIKnows/。

# 构建(教材更新后重跑,实测目标 <10 秒)
E:/zcode/DeepTraining/langgraph-learn/.venv/Scripts/python.exe Prj/AIKnows/build_site.py

# 浏览(二选一)
#   a) 资源管理器双击 Prj/AIKnows/output/index.html(file:// 直开)
#   b) 手机同 WiFi 访问:
E:/zcode/DeepTraining/langgraph-learn/.venv/Scripts/python.exe -m http.server 8080 --directory Prj/AIKnows/output

依赖安装(一次性):python.exe -m pip install markdown pygments -i https://pypi.tuna.tsinghua.edu.cn/simple

8.3 file:// 兼容设计(关键坑位提前排掉)

坑 对策
fetch() 本地 JSON 被 CORS 拦 所有数据(课程树/搜索索引)构建时生成为 const XX = {...} 的 .js 文件,用 <script src> 引入
绝对路径失效 全站相对路径,构建时校验
中文文件名 URL 编码 构建输出一律用 ASCII 路径(G/G1/01.html),中文只出现在页面标题里

九、目录结构(新增 site/,其余不动)

E:\zcode\DeepTraining\
├── doc\                        # 教材唯一事实源(一条不改)
├── model-learn\                # S 线代码(不动)
├── langgraph-learn\            # G 线代码(不动)
├── site\                       # ★ 新增:网站工程
│   ├── build_site.py           # 构建脚本(唯一入口,我来写并维护)
│   ├── requirements.txt        # markdown、pygments
│   ├── templates\              # base / dashboard / lesson / path / review / glossary
│   ├── assets\
│   │   ├── style.css           # 全站样式(含暗色模式)
│   │   ├── app.js              # 进度/测验/搜索/主题切换(原生 JS,无框架)
│   │   ├── data.js             # 构建生成:课程树快照
│   │   └── search_index.js     # 构建生成:搜索索引
│   ├── data\
│   │   ├── courses.json        # 课程注册表(现状种子我来填,验收后我更新)
│   │   └── quizzes\            # G0.json … S8.json(每阶段 3 题,我出题)
│   └── output\                 # 构建产物 → 浏览器只看这个目录
│       ├── index.html / path.html / review.html / glossary.html / dont-learn.html
│       ├── G\G0\01.html …      # ~24 课
│       └── S\S0\01.html …      # ~26 课
└── (其余全部不动)

十、不做什么(本站防走偏清单)

不做 理由
登录/多用户/数据库 单人离线使用,localStorage 足够
Node/前端框架(React/Vue)/打包器 机器跑不动、维护翻倍、原生 JS 完全够
评论/笔记云同步/发帖 导出 JSON 已覆盖进度备份需求
在线部署上线 这是私人教具;真要部署是 M7 学完顺手的事
把教材全文重写进网站 违反"唯一事实源",双倍维护必腐烂
视频课/动画课件 3Blue1Brown 等外链资源已够,不自产

十一、实施计划(你确认设计后开工,分 4 次完成)

阶段 内容 预计耗时 验收标准(可测)
P0 骨架+仪表盘 build_site.py 框架 + base/dashboard 模板 + courses.json 填入三线现状 + 首页 一次会话 ① 双击 index.html 打开;② G/S 两线课数与 README 一致(24/26);③ 当前位置显示 G1-01、S1-02
P1 课程页全量 lesson 模板 + 50 课全量渲染 + 侧栏树 + 上一篇/下一篇 + 复习中心/路径图/防走偏/术语表 一次会话 ① 抽查 5 页:代码块可复制、表格渲染正常;② 每页"下一阶段衔接"链接可达;③ 构建总耗时打印 <10s
P2 进度系统 勾选清单 + localStorage 持久化 + 导出/导入 + 状态按钮 + 搜索 一次会话 ① 勾选→刷新→保留;② 导出 JSON 用记事本打开内容正确;③ 搜"Reducer"命中 G1-02
P3 测验+题库 测验组件 + 9 个阶段题库(27 题,含解析) 一次会话 ① 答错显示解析且得分入库;② 全对时显示"通过";③ 每题解析可追溯到教材原文
P4 M 线接入+手机 M1-M9 预告卡片 + 手机局域网实测 随 M 开课滚动 ① 手机打开 http://192.168.x.x:8080 显示仪表盘;② 汉堡菜单可用

总预算:4 次会话(每次约 1-2 小时),不占用 G1/S1 的指导时段——网站建设在你确认后单独立项,期间两条主线作业照常。

网站整体验收(P3 完成时统一过一遍)


十二、风险与对策

风险 对策
教材改了网站忘重跑(双源漂移) 构建 3-10 秒成本极低;仪表盘页脚显示构建时间戳;约定"教材/验收更新当天重跑",由我在每次验收后顺手执行
网站做成大工程拖累主线 第十节防走偏清单 + 分 4 次会话硬上限 + 主线指导时段不建站
file:// 兼容问题返工 8.3 三条对策已在设计期排掉,P0 就按此实现
进度数据丢(清浏览器缓存) 导出 JSON 常规化;且 ✅ 真相源在 courses.json(文件系统),localStorage 只存勾选细节,丢了可重建
我出测验题质量参差 每题解析必须引用教材原文或实测数字(延续实测文化);你做题时觉得题烂直接说,随时换

十三、下一步

  1. 你审这份设计:技术选型(自研纯静态 vs MkDocs)、页面清单、四阶段计划——有异议直接说,我改。
  2. 你说"开工" → 我进入 P0,先把仪表盘做出来给你看第一眼。
  3. P0-P3 各次会话结束时,网站都处于"能打开、能看"的可交付状态——每个阶段都有东西可验收,不存在"憋一个月放大招"。