crt.sh-skills

主题

本地预览与构建 ​

文档站基于 VitePress，源码在 website/ 目录。本地能跑通，线上就一致。

VitePresswebsite/npm run dev终端审计控制台主题

前置 ​

🟢Node.js ≥ 18
VitePress 最低运行时
📦依赖
首次 `npm install` 装到 `website/node_modules`
🎨主题
深色 #0d1117 + 琥珀/青色点缀

开发循环 ​

flowchart LR DEV["npm run dev"] --> SRV["本地 5173"] SRV --> EDIT["改 .md / .vue"] EDIT --> HR["Vite HMR 热重载"] HR --> SRV
bash
cd website
npm run dev

启动后访问提示的本地地址（默认 http://localhost:5173），改 Markdown 即时刷新。

构建静态站点 ​

bash
cd website
npm run build

产物在 website/docs/.vitepress/dist/，是一组纯静态 HTML/CSS/JS，可直接丢任何静态托管。

预览构建产物

npm run preview 本地起一个服务器，模拟线上效果——验证构建无误后再推送。

目录结构 ​

website/
├── package.json
├── docs/
│   ├── index.md              # 首页（layout: home）
│   ├── .vitepress/
│   │   ├── config.ts         # 站点配置 + Mermaid 集成
│   │   └── theme/            # 主题（终端审计控制台风格）
│   │       ├── index.ts      #   Mermaid 客户端渲染逻辑
│   │       └── custom.css    #   配色/字体/表格/代码块样式
│   ├── public/logo.svg
│   ├── guide/                # 指南
│   ├── architecture/         # 架构
│   ├── features/             # 功能原理
│   ├── usage/                # 使用方式
│   └── deploy/               # 部署

Mermaid 图渲染原理 ​

flowchart LR F["mermaid 代码块"] --> CFG["config.ts: withMermaid"] CFG --> DIV["转成 div.mermaid data-source=URL编码"] DIV --> IDX["theme/index.ts"] IDX --> CDN["按需加载 mermaid 11 (CDN)"] CDN --> DRAW["mermaid.run 绘制"] DRAW --> OBS["MutationObserver 监听主题切换"] OBS --> DRAW

Mermaid 内容转义

Mermaid 块内的 < 必须移除或换成非尖括号写法（如 A --x B），否则 Vue 编译器会把它当 HTML 标签解析报错。详见 config.ts 的 withMermaid——它把整个 mermaid 内容 URL 编码进 data-source，Vue 不会解析内部。

下一页

GitHub Pages 部署