关于 vitepress
这是面向 VitePress 1.x 项目的技能，帮助构建和维护文档、博客及营销网站。内容涵盖配置、Markdown、路由、主题与部署。
主要功能
- 01配置与命令行指导
- 02文件路由与 Markdown
- 03在 Markdown 中使用 Vue 组件
- 04主题定制与搜索
- 05国际化与部署
适用场景
- 01创建 VitePress 文档网站
- 02添加自定义主题和 Vue 内容
- 03配置多语言网站
- 04准备静态网站部署
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vitepress确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdreferences/advanced-i18n.mdadvanced-ssr.mdcore-cli.mdcore-config.mdcore-markdown.mdcore-routing.mdfeatures-code-blocks.mdfeatures-data-loading.mdfeatures-dynamic-routes.mdfeatures-vue.mdrecipes-deploy.mdtheme-config.mdtheme-custom.mdtheme-customization.md详细介绍
VitePress 是一个基于 Vite 和 Vue 3 构建的静态站点生成器（SSG）。它接收 Markdown 内容，应用主题，并生成静态 HTML，进而成为 SPA 以实现快速导航。非常适合文档、博客和营销网站。
主要特性：
- 基于文件的路由，使用
.md文件 - Vue 组件可直接在 Markdown 中使用
- 快速 HMR，即时更新（<100ms）
- 默认主题针对文档进行了优化
- 内置搜索（本地或 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 |
评论
支持 Markdown