从 VitePress 迁移
VitePress 是一款基于 Vue 的静态站点生成器。docmd 在保持极速运行的同时,不包含任何客户端 JavaScript 框架开销,消除了 Vue 水合(hydration)延迟。
1. 运行迁移引擎
在您现有 VitePress 项目的根目录下运行以下命令:
npm
pnpm
yarn
Bun
npx @docmd/core migrate --vitepress
pnpm dlx @docmd/core migrate --vitepress
yarn dlx @docmd/core migrate --vitepress
bunx @docmd/core migrate --vitepress
自动处理流程
2. 预览迁移产物
在 docmd 中立即预览您的 Markdown 内容:
npm
pnpm
yarn
Bun
npx @docmd/core dev
pnpm dlx @docmd/core dev
yarn dlx @docmd/core dev
bunx @docmd/core dev
3. 手动配置与组件替换
VitePress 在 JavaScript 配置模块中配置导航,并允许嵌入 Vue 组件。请将这些转换为 docmd 容器。
导航设置
VitePress 在 themeConfig.sidebar 中使用对象数组。请在 docs/ 目录中创建 navigation.json:
VitePress (.vitepress/config.js):
themeConfig: {
sidebar: [
{
text: "指南",
items: [
{ text: "简介", link: "/introduction" },
{ text: "快速开始", link: "/getting-started" }
]
}
]
}
docmd (navigation.json):
[
{
"title": "指南",
"collapsible": true,
"children": [
{ "title": "简介", "path": "/introduction" },
{ "title": "快速开始", "path": "/getting-started" }
]
}
]
替换 Vue 组件与容器语法
由于 docmd 不在客户端执行 Vue,请将自定义组件替换为 docmd 容器。
VitePress 提示框容器 开箱即用,无需修改:
:::tip→ 渲染为callout tip:::warning→ 渲染为callout warning:::danger→ 渲染为callout danger:::info→ 渲染为callout info:::details→ 渲染为collapsible
零修改要求
VitePress 容器语法受原生支持。已有的提示框块和可折叠 details 章节无需编辑 Markdown 文件即可正确渲染。