選項

vitepress

antfu/skills antfu/skills

使用 VitePress 靜態站點生成器構建文件站點、配置主題,並使用 Vue 元件編寫 Markdown。

...展開全部
17
更新時間 2026-09-07

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、initcore-cli
路由基於檔案的路由、源目錄、重寫規則core-routing
MarkdownFrontmatter、容器、表格、錨點、包含檔案core-markdown

功能

程式碼與內容

主題描述參考
程式碼塊語法高亮、行高亮、差異對比、聚焦features-code-blocks
Markdown 中的 Vue元件、script setup、指令、模板features-vue
資料載入構建時資料載入器、createContentLoaderfeatures-data-loading
動態路由從資料生成頁面、路徑載入器檔案features-dynamic-routes

主題

主題描述參考
主題配置導航、側邊欄、搜尋、社交連結、頁尾theme-config
自定義CSS 變數、插槽、字型、全域性元件theme-customization
自定義主題從零構建主題、主題介面theme-custom

高階

主題描述參考
國際化多語言站點、區域設定配置advanced-i18n
SSR 相容性伺服器端渲染、ClientOnly、動態匯入advanced-ssr

食譜

主題描述參考
部署GitHub Pages、Netlify、Vercel、Cloudflare、Nginxrecipes-deploy
在 GitHub 上查看
---
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

複製 複製
快速設定: 將技能資料夾複製到 .claude/skills/ 目錄。Claude 將自動檢測並使用該技能。
儲存庫 antfu/skills

相關技能

github-code-search
更新時間 2026-06-29
drizzle-orm
更新時間 2026-06-29
clickhouse-io
更新時間 2026-06-29
prisma-client-api
更新時間 2026-06-29
OR