# 静态页改造指南 · 让任何旧页用上 AI
> 网站之前 100 多个 HTML 都是纯静态的。现在我们部署了 Node 服务，
> 任何一页都能在**两步之内**调出真实 AI 回复。这份是改造模板。
---
## 改造前后对比
### Before（纯静态，没有 AI）
```html
给网页接上 AI
项目 02：给网页接上 AI
下面是一个示例页面，但实际上 AI 回复是写死的——
```
### After（接入 SDK，真的能问 AI）
```html
给网页接上 AI
项目 02：给网页接上 AI
```
**就这样**。两个 `
```
> 注意路径：根目录绝对路径 `/kindling-iteration-2/...` 最稳。
> 如果想用相对路径，看页面位置：
> - `kindling-low-level/xxx.html` → `
```
3. 然后在页面底部加一个**"问问 AI"通用面板**（HTML 模板）：
```html
```
4. 用 `find . -name '*.html'` + `sed` 批量插入这段。或者写个 Node 脚本扫整个目录加内容。
---
## 测试改造是否成功
改完一个页面后：
1. 浏览器打开 `https://kindling.top/你的页面.html`
2. 按 F12 打开开发者工具 → Network 标签
3. 点页面里的"问 AI"按钮
4. Network 应当出现一条 `POST /api/v1/chat` → 200
5. 页面上出现真的 AI 回复
如果失败：
- **404 /api/v1/chat** → Nginx 反代没生效，重新检查 location 配置
- **502 /api/v1/chat** → Node 服务挂了，`pm2 status` 看一下，`pm2 restart kindling-ai`
- **401 / 403** → DeepSeek key 错或没钱了
- **CORS error** → 修 `.env` 里 `ALLOWED_ORIGIN`，加上你访问的域名
---
## 渐进式上线策略
不用一次改完所有 100 多页。建议的顺序：
1. **第 1 周**：改"中阶代码俱乐部 项目 02"一个页，验证整条链路通了
2. **第 2 周**：把同目录其他 3 个项目页改了
3. **第 3 周**：在每个academy 落地页底部加"试试问问 AI"通用面板
4. **第 4 周**：把审美工作室所有"判官"练习页接通 `kindlingAI.judge`
5. **第 5 周**：智能体实验室项目页接通图像/视觉能力
每改一页都做一次完整的 Network → 200 检查。
---
## 改造一页的"成本估算"
- 一个学生从打开页面到看完 AI 回复：约 200–500 tokens
- DeepSeek 每百万 tokens：¥0.5 输入 + ¥2 输出 ≈ **每次回答不到 1 厘钱**
- 1 万次回答 = 约 ¥10 左右
也就是说：哪怕你每天有 1000 个学生在网站上各问 AI 10 次，月成本也就 ¥30 上下。
— 静态页改造指南 v1