这个演示站是怎么搭的
为什么单独做一个演示站
项目迭代了很久,功能散在插件与 Worker 里。新用户看到的第一个页面,应该能回答三个问题:
- 这是什么东西?
- 它长什么样?
- 我要怎么开始?
所以这个站的目标不是"博客",而是产品官网 + 文档入口 + 可运行的样例。
站点结构
五个分类,对应五类读者意图:
| 分类 | 内容 |
|---|---|
| 快速开始 | 是什么、架构、两条部署路线 |
| 使用指南 | 后台、风格、评论、缓存 |
| 插件与集成 | Obsidian、WP 插件、REST API |
| 版本更新 | 每个版本的变更说明 |
| 关于项目 | FAQ、路线图、这个站本身 |
首页承担"产品介绍"的角色:Hero、两条路线、能力卡片、最新文章。分类页承担"目录"的角色。
风格
演示站用的是自建风格 cfse-demo:
- 白底 + 靛蓝主色,接近开发者工具站的观感;
- 首页有 Hero、数据条、路线卡、能力网格;
- 单页是窄栏阅读版式,最大宽度 760px;
- 分类页是两列卡片。
它和其他内置风格一样,就是一个目录 + tpl.json + style.css,没有特殊逻辑。你可以在后台模板页直接改它。
内容组织
- 每篇文章只讲一件事,标题尽量具体;
- 教程按"前置 → 步骤 → 验证 → 常见卡点"组织;
- 代码块尽量可直接复制;
- 内部链接指向相关文章,形成阅读路径。
版本更新单独成类,标题带版本号,方便按时间浏览。
更新流程
- 在 CMS 后台写 Markdown;
- 保存后 Worker 立即渲染单页写入 R2;
- 列表页缓存自动清理;
- 如果是结构性改动(换风格、改菜单),跑一次「重建全部单页」。
旧内容怎么处理
这个域名之前是个人测试站,积累了几百篇测试文章。改造成演示站时:
- 全部转为草稿(数据保留,可恢复);
- 删除对应的 R2 静态页,避免旧链接继续可访问;
- 重建分类与导航;
- 重新写入现在的这批内容。
你可以怎么用这个站
- 把它当成功能清单:每篇文章对应一个能力;
- 把它当成模板:风格、栏目、文章结构都可以照搬;
- 把它当成测试环境:后台的批量任务、评论审核、模板编辑都可以随便点。