vitepress
antfu/skills
使用 VitePress 静态站点生成器构建文档站点、配置主题,并使用 Vue 组件编写 Markdown。
...展开全部VitePress 是一个基于 Vite 和 Vue 3 构建的静态站点生成器(SSG)。它接收 Markdown 内容,应用主题,并生成静态 HTML,从而形成一个支持快速导航的单页应用(SPA)。它非常适合用于文档、博客和营销网站。
主要特点:
- 基于
.md文件的文件路由 - Markdown 中直接使用 Vue 组件
- 快速的热模块替换(HMR),实现即时更新(
- 针对文档优化的默认主题
- 内置搜索功能(本地或 Algolia)
在使用 VitePress 项目之前:
- 检查
.vitepress/config.ts以获取站点配置 - 查看
.vitepress/theme/目录以了解自定义主题扩展 public/目录包含作为静态资源直接提供的文件
该技能基于 VitePress 1.x,生成时间为 2026-01-28。
核心
| 主题 | 描述 | 参考 |
|---|---|---|
| 配置 | 配置文件设置、defineConfig、站点元数据 | core-config |
| 命令行工具 | 命令行界面: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 |
---
name: vitepress
description: Build documentation sites, configure themes, and write Markdown with Vue components using the VitePress static site generator.
---
VitePress is a Static Site Generator (SSG) built on Vite and Vue 3. It takes Markdown content, applies a theme, and generates static HTML that becomes an SPA for fast navigation. Perfect for documentation, blogs, and marketing sites.
**Key Characteristics:**
- File-based routing with `.md` files
- Vue components work directly in Markdown
- Fast HMR with instant updates (<100ms)
- Default theme optimized for documentation
- Built-in search (local or Algolia)
**Before working with VitePress projects:**
- Check `.vitepress/config.ts` for site configuration
- Look at `.vitepress/theme/` for custom theme extensions
- The `public/` directory contains static assets served as-is
> The skill is based on VitePress 1.x, generated at 2026-01-28.
## Core
| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Config file setup, defineConfig, site metadata | [core-config](references/core-config.md) |
| CLI | Command-line interface: dev, build, preview, init | [core-cli](references/core-cli.md) |
| Routing | File-based routing, source directory, rewrites | [core-routing](references/core-routing.md) |
| Markdown | Frontmatter, containers, tables, anchors, includes | [core-markdown](references/core-markdown.md) |
## Features
### Code & Content
| Topic | Description | Reference |
|-------|-------------|-----------|
| Code Blocks | Syntax highlighting, line highlighting, diffs, focus | [features-code-blocks](references/features-code-blocks.md) |
| Vue in Markdown | Components, script setup, directives, templating | [features-vue](references/features-vue.md) |
| Data Loading | Build-time data loaders, createContentLoader | [features-data-loading](references/features-data-loading.md) |
| Dynamic Routes | Generate pages from data, paths loader files | [features-dynamic-routes](references/features-dynamic-routes.md) |
## Theme
| Topic | Description | Reference |
|-------|-------------|-----------|
| Theme Config | Nav, sidebar, search, social links, footer | [theme-config](references/theme-config.md) |
| Customization | CSS variables, slots, fonts, global components | [theme-customization](references/theme-customization.md) |
| Custom Theme | Building themes from scratch, theme interface | [theme-custom](references/theme-custom.md) |
## Advanced
| Topic | Description | Reference |
|-------|-------------|-----------|
| Internationalization | Multi-language sites, locale configuration | [advanced-i18n](references/advanced-i18n.md) |
| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | [advanced-ssr](references/advanced-ssr.md) |
## Recipes
| Topic | Description | Reference |
|-------|-------------|-----------|
| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | [recipes-deploy](references/recipes-deploy.md) |
所有文件
0 个文件安装 vitepress
将技能文件下载并解压至你的 .claude/skills/ 目录。
下载ZIP克隆仓库并复制技能文件到您的项目中。
git clone https://github.com/antfu/skills/tree/main/skills/vitepress # Copy SKILL.md to your .claude/skills/ directory
复制





首页
