Heim

Skill

Webentwicklung

vitepress

antfu/skills

Erstellen Sie Dokumentationsseiten, konfigurieren Sie Themen und schreiben Sie Markdown mit Vue-Komponenten unter Verwendung des statischen Site-Generators VitePress.

...Alle erweitern

Zeit aktualisiert 7. September 2026

# documentation # markdown # vue # ssg # static site generator # vitepress

VitePress ist ein Static Site Generator (SSG), der auf Vite und Vue 3 basiert. Es verarbeitet Markdown-Inhalte, wendet ein Theme an und generiert statisches HTML, das als SPA (Single Page Application) für eine schnelle Navigation dient. Ideal für Dokumentation, Blogs und Marketing-Websites.

Hauptmerkmale:

Dateibasiertes Routing mit .md-Dateien
Vue-Komponenten können direkt in Markdown verwendet werden
Schnelles HMR mit sofortigen Updates (
Standard-Theme, optimiert für Dokumentation
Integrierte Suche (lokal oder Algolia)

Vor der Arbeit mit VitePress-Projekten:

Überprüfen Sie .vitepress/config.ts für die Site-Konfiguration
Sehen Sie sich .vitepress/theme/ für benutzerdefinierte Theme-Erweiterungen an
Das Verzeichnis public/ enthält statische Assets, die unverändert bereitgestellt werden

Die Fähigkeit basiert auf VitePress 1.x, generiert am 2026-01-28.

Core

Thema	Beschreibung	Referenz
Konfiguration	Einrichtung der Konfigurationsdatei, defineConfig, Site-Metadaten	core-config
CLI	Befehlszeilenschnittstelle: dev, build, preview, init	core-cli
Routing	Dateibasiertes Routing, Quellverzeichnis, Umleitungen	core-routing
Markdown	Frontmatter, Container, Tabellen, Anker, Includes	core-markdown

Features

Code & Inhalt

Thema	Beschreibung	Referenz
Code-Blöcke	Syntaxhervorhebung, Zeilenhervorhebung, Diffs, Fokus	features-code-blocks
Vue in Markdown	Komponenten, script setup, Direktiven, Templating	features-vue
Datenladung	Datenlader zur Build-Zeit, createContentLoader	features-data-loading
Dynamische Routen	Seiten aus Daten generieren, Pfade-Lader-Dateien	features-dynamic-routes

Theme

Thema	Beschreibung	Referenz
Theme-Konfiguration	Navigation, Seitenleiste, Suche, Social-Links, Fußzeile	theme-config
Anpassung	CSS-Variablen, Slots, Schriftarten, globale Komponenten	theme-customization
Benutzerdefiniertes Theme	Erstellung von Themes von Grund auf, Theme-Schnittstelle	theme-custom

Advanced

Thema	Beschreibung	Referenz
Internationalisierung	Multisprachige Sites, Locale-Konfiguration	advanced-i18n
SSR-Kompatibilität	Serverseitiges Rendering, ClientOnly, dynamische Imports	advanced-ssr

Recipes

Thema	Beschreibung	Referenz
Bereitstellung	GitHub Pages, Netlify, Vercel, Cloudflare, Nginx	recipes-deploy

Auf GitHub ansehen

---
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) |