设计日期: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 只存勾选细节,丢了可重建 |
| 我出测验题质量参差 | 每题解析必须引用教材原文或实测数字(延续实测文化);你做题时觉得题烂直接说,随时换 |
十三、下一步
- 你审这份设计:技术选型(自研纯静态 vs MkDocs)、页面清单、四阶段计划——有异议直接说,我改。
- 你说"开工" → 我进入 P0,先把仪表盘做出来给你看第一眼。
- P0-P3 各次会话结束时,网站都处于"能打开、能看"的可交付状态——每个阶段都有东西可验收,不存在"憋一个月放大招"。