| 名称 | vitepress |
| 描述 | VitePress 是由 Vite 和 Vue 驱动的静态站点生成器。用于构建文档站点、配置主题或编写包含 Vue 组件的 Markdown。 metadata: |
| 作者 | Anthony Fu |
| 版本 | “2026.1.28” source: 从 https://github.com/vuejs/vitepress 生成,脚本位于 https://github.com/antfu/skills |
VitePress 是一个基于 Vite 和 Vue 3 的静态站点生成器 (SSG)。它接收 Markdown 内容,应用主题,并生成静态 HTML,成为快速导航的单页面应用 (SPA)。非常适合文档、博客和营销网站。
关键特征:
- 基于文件的路径,使用
.md文件 - Vue 组件可以直接在 Markdown 中工作
- 快速的热模块替换,即时更新 (<100毫秒)
- 默认主题针对文档优化
- 内置搜索功能(本地或 Algolia)
在使用 VitePress 项目之前:
- 检查
.vitepress/config.ts以进行站点配置 - 查看
.vitepress/theme/以进行自定义主题扩展 public/目录包含静态资产,原样提供
该技能基于 VitePress 1.x,生成于 2026-01-28。
核心
| 主题 | 描述 | 参考 |
|---|---|---|
| 配置 | 配置文件设置,defineConfig,站点元数据 | core-config |
| CLI | 命令行界面:dev、build、preview、init | core-cli |
| 路由 | 基于文件的路由,源目录,重写 | core-routing |
| Markdown | 前言、容器、表格、锚点、包含 | core-markdown |
特性
代码与内容
| 主题 | 描述 | 参考 |
|---|---|---|
| 代码块 | 语法高亮、行高亮、差异、焦点 | features-code-blocks |
| Markdown 中的 Vue | 组件、脚本设置、指令、模板 | 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 |