古法编程

如何用 AI 将 Markdown 知识库快速转换为 VitePress 静态站点

解决知识库呈现形式单一的问题：通过 AI 自动化构建 VitePress 框架，将散乱的 Markdown 维基文件一键打包为具备专业 UI、深色主题和可缩放图表的 HTML 静态网站。

为什么需要这个技能

当你使用 AI 生成了大量的 Wiki 文档或技术笔记时，直接阅读 .md 文件体验较差，缺乏结构化的导航且难以分享。

VitePress 是一个极快的静态站点生成器，但手动配置深色模式、处理 Mermaid 流程图的 CSS 兼容性以及构建侧边栏导航非常繁琐。本技能通过预设的脚手架逻辑，让 AI 自动完成从目录结构搭建、主题配置到 Mermaid 样式修复的全过程，将纯文本文档直接升级为可浏览的专业技术文档站。

适用场景

  • 需要将 AI 生成的 /deep-wiki 知识库输出为 HTML 网页时。
  • 想要快速为项目建立一个美观的、支持深色模式的在线文档中心。
  • 文档中包含大量 Mermaid 流程图，且需要解决深色模式下图表颜色不可见的问题。
  • 需要实现点击图表即可全屏放大查看的交互体验。

核心工作流

  1. 构建目录脚手架：AI 在 wiki-site/ 目录下创建 .vitepress 配置文件夹、public 资源目录及 package.json。
  2. 配置深色主题与 Mermaid：在 config.mts 中集成 vitepress-plugin-mermaid，并定义一套深色系配色变量（如 primaryColor: '#1e3a5f'）。
  3. 三层样式修复（重点）：
    • 第一层：通过 mermaid.themeVariables 设置全局变量。
    • 第二层：在 custom.css 中使用 !important 强制覆盖 SVG 元素样式。
    • 第三层：在 theme/index.ts 中利用 onMounted 轮询机制，动态替换 Mermaid 内部的内联 style 属性，解决 SSR 期间 DOM 不存在的问题。
  4. 增强交互与预处理：为所有 Mermaid 容器添加点击缩放（Click-to-Zoom）功能，并扫描 .md 文件，将 <br/> 替换为 <br> 以兼容 Vue 编译器。
  5. 执行构建：
    cd wiki-site && npm install && npm run docs:build

下载和安装

下载 wiki-vitepress 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐