vitepress

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

VitePress是基于Vite和Vue 3的静态网站生成器（SSG）。它接收Markdown内容，应用主题，生成可作为单页应用（SPA）的静态HTML，实现快速导航。非常适合用于文档、博客和营销站点。

核心特性：

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

在处理VitePress项目之前：

查看
```
.vitepress/config.ts
```
文件获取站点配置信息
查看
```
.vitepress/theme/
```
目录了解自定义主题扩展
```
public/
```
目录包含直接提供的静态资源

本技能基于VitePress 1.x版本，生成于2026年1月28日。

Core

核心功能

Topic	Description	Reference
Configuration	Config file setup, defineConfig, site metadata	core-config
CLI	Command-line interface: dev, build, preview, init	core-cli
Routing	File-based routing, source directory, rewrites	core-routing
Markdown	Frontmatter, containers, tables, anchors, includes	core-markdown

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

Features

功能特性

Code & Content

代码与内容

Topic	Description	Reference
Code Blocks	Syntax highlighting, line highlighting, diffs, focus	features-code-blocks
Vue in Markdown	Components, script setup, directives, templating	features-vue
Data Loading	Build-time data loaders, createContentLoader	features-data-loading
Dynamic Routes	Generate pages from data, paths loader files	features-dynamic-routes

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

Theme

主题

Topic	Description	Reference
Theme Config	Nav, sidebar, search, social links, footer	theme-config
Customization	CSS variables, slots, fonts, global components	theme-customization
Custom Theme	Building themes from scratch, theme interface	theme-custom

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

Advanced

进阶功能

Topic	Description	Reference
Internationalization	Multi-language sites, locale configuration	advanced-i18n
SSR Compatibility	Server-side rendering, ClientOnly, dynamic imports	advanced-ssr

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

Recipes

实践方案

Topic	Description	Reference
Deployment	GitHub Pages, Netlify, Vercel, Cloudflare, Nginx	recipes-deploy

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