vitepress

VitePress 是一个基于 Vite 和 Vue 3 构建的静态站点生成器（SSG）。它接收 Markdown 内容，应用主题，并生成静态 HTML，这些 HTML 会成为支持快速导航的 SPA。非常适合文档、博客和营销网站。

主要特性：

• 基于文件的路由，使用 .md 文件
• 可直接在 Markdown 中使用 Vue 组件
• 快速 HMR，即时更新（<100ms）
• 针对文档优化的默认主题
• 内置搜索（本地或 Algolia）

使用 VitePress 项目之前：

• 检查 .vitepress/config.ts 中的站点配置
• 查看 .vitepress/theme/ 中的自定义主题扩展
• public/ 目录包含原样提供的静态资源

此技能基于 VitePress 2.0.0-alpha.20，于 2026-09-25 生成。

VitePress 2 说明（v1 → v2）： 使用 vitepress@next 安装；要求 Node.js 22+。defineConfigWithTheme 已弃用，请改用 defineConfig<ThemeConfig>。原生 RTL 支持（dir 选项、CSS 逻辑属性）取代了旧的 PostCSS 插件方案。新增内置 iconify 流程（icons 配置、useIcon/VPIcon、collection:name 社交图标）。新增 assetsBase（CDN）和 assetsShards 构建选项；移除了 metaChunk。Markdown 的 image.lazyLoading 更名为 image.lazyLoad。

核心

主题	描述	参考
配置	配置文件设置、defineConfig、站点元数据	core-config
CLI	命令行界面：dev、build、preview、init	core-cli
路由	基于文件的路由、源目录、重写规则	core-routing
Markdown	Frontmatter、容器、表格、锚点、包含内容	core-markdown

功能

代码与内容

主题	描述	参考
代码块	语法高亮、行高亮、差异、聚焦	features-code-blocks
Markdown 中的 Vue	组件、script setup、指令、模板	features-vue
数据加载	构建时数据加载器、createContentLoader	features-data-loading
动态路由	根据数据生成页面、路径加载器文件	features-dynamic-routes

主题

主题	描述	参考
主题配置	导航、侧边栏、搜索、社交链接、页脚	theme-config
自定义	CSS 变量、插槽、字体、全局组件	theme-customization
自定义主题	从头构建主题、主题接口	theme-custom

高级

主题	描述	参考
国际化	多语言站点、区域配置	advanced-i18n
SSR 兼容性	服务端渲染、ClientOnly、动态导入	advanced-ssr

配方

主题	描述	参考
部署	GitHub Pages、Netlify、Vercel、Cloudflare、Nginx	recipes-deploy