name: vitepress
description: VitePress静态站点生成器,基于Vite和Vue构建。适用于构建文档站点、配置主题或在Markdown中使用Vue组件。
metadata:
author: Anthony Fu
version: “2026.1.28”
source: 生成自 https://github.com/vuejs/vitepress,脚本位于 https://github.com/antfu/skills
VitePress是一个基于Vite和Vue 3构建的静态站点生成器(SSG)。它接收Markdown内容,应用主题,并生成静态HTML,这些HTML会成为快速导航的单页应用(SPA)。非常适合文档、博客和营销网站。
主要特点:
- 基于
.md文件的文件路由
- Vue组件可直接在Markdown中使用
- 快速热模块替换(HMR),即时更新(<100ms)
- 默认主题针对文档进行了优化
- 内置搜索(本地或Algolia)
使用VitePress项目前:
- 检查
.vitepress/config.ts以获取站点配置
- 查看
.vitepress/theme/以获取自定义主题扩展
public/目录包含按原样提供的静态资源
此技能基于VitePress 1.x,生成于2026-01-28。
核心
| 主题 |
描述 |
参考链接 |
| 配置 |
配置文件设置、defineConfig、站点元数据 |
核心配置 |
| 命令行界面 |
命令行界面:dev、build、preview、init |
核心命令行界面 |
| 路由 |
基于文件的路由、源目录、重写 |
核心路由 |
| Markdown |
前置元数据、容器、表格、锚点、包含 |
核心Markdown |
功能
代码与内容
| 主题 |
描述 |
参考链接 |
| 代码块 |
语法高亮、行高亮、差异对比、聚焦 |
功能-代码块 |
| Markdown中的Vue |
组件、script setup、指令、模板 |
功能-Vue |
| 数据加载 |
构建时数据加载器、createContentLoader |
功能-数据加载 |
| 动态路由 |
从数据生成页面、路径加载器文件 |
功能-动态路由 |
主题
| 主题 |
描述 |
参考链接 |
| 主题配置 |
导航栏、侧边栏、搜索、社交链接、页脚 |
主题配置 |
| 自定义 |
CSS变量、插槽、字体、全局组件 |
主题自定义 |
| 自定义主题 |
从零开始构建主题、主题接口 |
主题自定义构建 |
高级
| 主题 |
描述 |
参考链接 |
| 国际化 |
多语言站点、区域设置配置 |
高级-国际化 |
| SSR兼容性 |
服务器端渲染、ClientOnly、动态导入 |
高级-SSR |
实践指南
| 主题 |
描述 |
参考链接 |
| 部署 |
GitHub Pages、Netlify、Vercel、Cloudflare、Nginx |
实践指南-部署 |