架构设计
本文档介绍秘密知识之书中文版的技术架构和设计理念。
设计理念
本项目采用 "单一数据源,多维度输出" 的架构理念:
核心原则:
- 单一数据源:所有内容集中在
README.md,避免多处维护 - 自动化构建:内容更新后自动构建并部署到 GitHub Pages
- 现代化框架:使用 VitePress 构建,享受 Vue 生态和插件支持
技术栈
| 层级 | 技术 | 用途 |
|---|---|---|
| 文档框架 | VitePress | 静态站点生成 |
| 前端框架 | Vue 3 | 组件化开发 |
| 图表引擎 | Mermaid | 流程图、思维导图 |
| AI 友好 | vitepress-plugin-llms | 生成 llms.txt |
| 部署 | GitHub Actions + Pages | 自动构建部署 |
| 包管理 | pnpm | 依赖管理 |
构建流程
目录结构
the-book-of-secret-knowledge-zh/
├── docs/ # VitePress 项目根目录
│ ├── .vitepress/
│ │ ├── config.ts # 主配置
│ │ └── theme/
│ │ ├── index.ts # 主题入口
│ │ └── style.css # 全局样式
│ ├── public/
│ │ ├── images/ # 图片资源
│ │ └── llms.txt # AI 友好文本
│ ├── zh/ # 中文内容
│ │ ├── index.md # 首页
│ │ ├── guide/ # 指南
│ │ └── reference/ # 参考
│ └── en/ # 英文内容(预留)
├── README.md # 唯一内容源
├── package.json # 项目配置
└── .github/workflows/deploy.yml # 部署配置核心功能
搜索
使用 VitePress 内置的本地搜索,无需外部服务,支持模糊匹配和分类过滤。
主题
支持深色和浅色主题切换,自动检测系统偏好设置。品牌色为神秘紫(#7c3aed),传达知识的深邃与神秘。
多语言
使用 VitePress 内置的 locales 功能,预留了英文版本的支持。
AI 友好
通过 vitepress-plugin-llms 自动生成 llms.txt,为 AI 助手提供结构化的文档索引。
图表
通过 vitepress-plugin-mermaid 支持 Mermaid 图表,可以直接在 Markdown 中编写流程图、思维导图等。
性能指标
| 指标 | 目标值 |
|---|---|
| Lighthouse 评分 | > 95 |
| 首屏加载 | < 500ms |
| 构建时间 | < 30s |