VitePress Cheatsheet¶

VitePress - Vite & Vue Powered Static Site Generator

VitePress ist ein statischer Website-Generator (SSG) entwickelt, um schnelle, inhaltlich-zentrische Webseiten zu erstellen. Auf der Oberseite von Vite gebaut, bietet es eine große Entwicklererfahrung mit Vue.js-powered theming und Anpassung. < p>

generieren

Inhaltsverzeichnis¶

[Installation](#installation
(#getting-started)
[Projektstruktur](#project-structure_
[Konfiguration](#configuration_
[Markdown-Funktionen](#markdown-features_
[Frontmatter](LINK_5__
(Routing)(LINK_6_)
(Theming)(#theming)
(#custom-components_)
[Navigation](LINK_9_
(Sidebar)(LINK_10_)
(Search)(LINK_11_)
[Internationalisierung](#internationalization_
[Bestellung](LINK_13__
[API Reference](LINK_14__
Plugins
[Erweiterte Konfiguration](#advanced-configuration
[Performance](#performance_
Beste Praktiken

Installation¶

Schneller Start¶

# Create new VitePress project
npm create vitepress@latest my-docs

# Navigate to project
cd my-docs

# Install dependencies
npm install

# Start development server
npm run docs:dev
```_

### Manuelle Installation
```bash
# Initialize npm project
npm init -y

# Install VitePress
npm install --save-dev vitepress

# Create basic structure
mkdir docs
echo '# Hello VitePress' > docs/index.md
```_

### Paket.json Scripts
```json
{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}
```_

## Erste Schritte

### Basic Setup
```bash
# Create docs directory
mkdir docs

# Create index page
echo '# Welcome to My Documentation' > docs/index.md

# Create config file
mkdir docs/.vitepress
```_

### Grundkonfiguration
```javascript
// docs/.vitepress/config.js
export default {
  title: 'My Documentation',
  description: 'A comprehensive guide',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'API', link: '/api/' }
    ],
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/guide/' },
          { text: 'Getting Started', link: '/guide/getting-started' }
        ]
      }
    ]
  }
}
```_

### Erste Seiten
```markdown
<!-- docs/index.md -->
---
layout: home
hero:
  name: My Project
  text: Amazing documentation
  tagline: Build something awesome
  actions:
    - theme: brand
      text: Get Started
      link: /guide/
    - theme: alt
      text: View on GitHub
      link: https://github.com/user/repo
features:
  - title: Fast
    details: Built with Vite for lightning-fast development
  - title: Flexible
    details: Customize with Vue.js components
  - title: SEO Friendly
    details: Static site generation for better SEO
---
```_

```markdown
<!-- docs/guide/index.md -->
# Introduction

Welcome to the guide section of our documentation.

## What is this project?

This project helps you build amazing things.

## Quick Start

1. Install the package
2. Configure your settings
3. Start building
```_

## Projektstruktur

### Grundstruktur
```bash
docs/
├── .vitepress/
│   ├── config.js          # Configuration file
│   ├── theme/             # Custom theme
│   └── cache/             # Build cache
├── guide/
│   ├── index.md
│   ├── getting-started.md
│   └── advanced.md
├── api/
│   ├── index.md
│   └── reference.md
├── public/                # Static assets
│   ├── images/
│   └── favicon.ico
└── index.md              # Homepage
```_

### Erweiterte Struktur
```bash
docs/
├── .vitepress/
│   ├── config.js
│   ├── config/
│   │   ├── nav.js
│   │   ├── sidebar.js
│   │   └── plugins.js
│   ├── theme/
│   │   ├── index.js
│   │   ├── components/
│   │   ├── styles/
│   │   └── layouts/
│   ├── components/        # Global components
│   └── public/           # Theme assets
├── en/                   # English docs
├── zh/                   # Chinese docs
├── guide/
├── api/
├── examples/
└── index.md
```_

## Konfiguration

### Grundkonfiguration
```javascript
// docs/.vitepress/config.js
export default {
  // Site metadata
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator',
  lang: 'en-US',
  base: '/', // Base URL for deployment

  // Theme configuration
  themeConfig: {
    logo: '/logo.svg',
    siteTitle: 'My Docs',

    // Navigation
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ],

    // Sidebar
    sidebar: {
      '/guide/': [
        {
          text: 'Getting Started',
          items: [
            { text: 'Introduction', link: '/guide/' },
            { text: 'Installation', link: '/guide/installation' }
          ]
        }
      ]
    },

    // Social links
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
      { icon: 'twitter', link: 'https://twitter.com/vuejs' }
    ],

    // Footer
    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright © 2023 Evan You'
    }
  }
}
```_

### Erweiterte Konfiguration
```javascript
// docs/.vitepress/config.js
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Documentation',
  description: 'Comprehensive documentation',

  // Head tags
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }],
    ['meta', { name: 'theme-color', content: '#3c8772' }],
    ['meta', { property: 'og:type', content: 'website' }],
    ['meta', { property: 'og:locale', content: 'en' }],
    ['script', { src: 'https://cdn.usefathom.com/script.js' }]
  ],

  // Build options
  srcDir: 'src',
  outDir: 'dist',
  cacheDir: '.vitepress/cache',

  // Markdown configuration
  markdown: {
    theme: 'material-theme-palenight',
    lineNumbers: true,
    config: (md) => {
      // Add markdown plugins
      md.use(require('markdown-it-footnote'))
    }
  },

  // Vite configuration
  vite: {
    plugins: [],
    server: {
      port: 3000
    }
  },

  // Build hooks
  buildEnd: (siteConfig) => {
    console.log('Build completed!')
  }
})
```_

### TypScript Konfiguration
```typescript
// docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Docs',
  description: 'TypeScript powered documentation',

  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ]
  }
})
```_

## Markdown-Funktionen

### Basismarkierung
```markdown
# Heading 1
## Heading 2
### Heading 3

**Bold text**
*Italic text*
~~Strikethrough~~

- Unordered list
- Item 2
  - Nested item

1. Ordered list
2. Item 2

[Link text](https://example.com)

![Image alt](./image.png)

`Inline code`

> Blockquote
```_

### Code Blocks
````markdown
```javascript
Funktion hello() {\cHFFFF}
('Hello, VitePress!')
}

``javascript{1,3-5} // Line Highlighting Funktion hello() {\cHFFFF} ('Hello, VitePress!') const name = 'VitePress ' zurückHello, ${name}!` }

```javascript
// Linienzahlen
Funktion hello() {\cHFFFF}
('Hello, VitePress!')
}

### Zollcontainer
```markdown
::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details Click me to view the code
```javascript
('Hello, VitePress!')

:::

::: code-group ```javascript [config.js] Exportstandard {\cHFFFF} Name: 'config ' }

```typescript [config.ts]
Exportstandard {\cHFFFF}
Name: 'config '
♪ as const

:::

### Tabellen
```markdown
| Feature | VitePress | Other SSG |
|---------|-----------|-----------|
| Speed   | ⚡ Fast   | 🐌 Slow   |
| Vue     | ✅ Yes    | ❌ No     |
| Vite    | ✅ Yes    | ❌ No     |
```_

### Mathematische Ausdrücke
```markdown
<!-- Inline math -->
The formula is $E = mc^2$.

<!-- Block math -->
$$
\frac{1}{2} \times \frac{3}{4} = \frac{3}{8}
$$
```_

### Emoji
```markdown
:tada: :rocket: :heart:

VitePress is :fire:!
```_

## Frontmatte

### Basic Frontmatte
```markdown
---
title: Page Title
description: Page description
layout: doc
---

# Page Content

This page has custom metadata.
```_

### Fortgeschrittene Frontmatte
```markdown
---
title: Advanced Guide
description: Learn advanced VitePress features
layout: doc
sidebar: true
prev:
  text: 'Getting Started'
  link: '/guide/getting-started'
next:
  text: 'Configuration'
  link: '/guide/configuration'
editLink: true
lastUpdated: true
---

# Advanced Guide

Content goes here.
```_

### Home Layout
```markdown
---
layout: home
hero:
  name: VitePress
  text: Vite & Vue powered static site generator
  tagline: Simple, powerful, and performant
  image:
    src: /logo-with-shadow.png
    alt: VitePress
  actions:
    - theme: brand
      text: Get Started
      link: /guide/what-is-vitepress
    - theme: alt
      text: View on GitHub
      link: https://github.com/vuejs/vitepress

features:
  - icon: ⚡️
    title: Vite, The DX that can't be beat
    details: Feel the speed of Vite. Instant server start and lightning fast HMR.
  - icon: 💡
    title: Designed to be simplicity first
    details: With Markdown-centered content, it's built to help you focus on writing.
  - icon: 🛠️
    title: Power of Vue meets Markdown
    details: Enhance your content with all the features of Vue in Markdown.
---
```_

### Benutzerdefiniertes Layout
```markdown
---
layout: custom
customData:
  foo: bar
  items:
    - name: Item 1
    - name: Item 2
---

# Custom Layout Page

This page uses a custom layout.
```_

## Routing

### Dateibasiertes Routing
```bash
# File structure determines routes
docs/
├── index.md          # -> /
├── guide/
│   ├── index.md      # -> /guide/
│   ├── setup.md      # -> /guide/setup
│   └── advanced.md   # -> /guide/advanced
└── api/
    ├── index.md      # -> /api/
    └── reference.md  # -> /api/reference
```_

### Dynamische Strecken
```javascript
// docs/.vitepress/config.js
export default {
  async paths() {
    const posts = await getPosts()
    return posts.map(post => ({
      params: { id: post.id },
      content: post.content
    }))
  }
}
```_

### Route Metadaten
```markdown
---
title: Custom Title
description: Custom description
head:
  - - meta
    - property: og:title
      content: Custom OG Title
  - - meta
    - property: og:description
      content: Custom OG Description
---

# Page Content
```_

### Programmierung Navigation
```vue
<template>
  <button @click="navigate">Go to Guide</button>
</template>

<script setup>
import { useRouter } from 'vitepress'

const router = useRouter()

function navigate() {
  router.go('/guide/')
}
</script>
```_

## Theming

### Standard Thema Anpassung
```javascript
// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './custom.css'

export default {
  extends: DefaultTheme,
  enhanceApp({ app, router, siteData }) {
    // App-level enhancements
    app.component('MyComponent', MyComponent)
  }
}
```_

### CSS-Code
```css
/* docs/.vitepress/theme/custom.css */
:root {
  --vp-c-brand-1: #646cff;
  --vp-c-brand-2: #747bff;
  --vp-c-brand-3: #9499ff;
}

.VPHero .name {
  background: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dark mode */
.dark {
  --vp-c-brand-1: #747bff;
  --vp-c-brand-2: #9499ff;
}
```_

### Benutzerdefiniertes Layout
```vue
<!-- docs/.vitepress/theme/Layout.vue -->
<template>
  <div class="custom-layout">
    <header>
      <nav><!-- Custom navigation --></nav>
    </header>

    <main>
      <Content />
    </main>

    <footer>
      <!-- Custom footer -->
    </footer>
  </div>
</template>

<script setup>
import { Content } from 'vitepress'
</script>

<style scoped>
.custom-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
```_

### Thema Konfiguration
```javascript
// docs/.vitepress/config.js
export default {
  themeConfig: {
    // Appearance
    appearance: 'dark', // 'dark' | false

    // Logo
    logo: '/logo.svg',
    siteTitle: 'My Docs',

    // Navigation
    nav: [...],
    sidebar: {...},

    // Edit link
    editLink: {
      pattern: 'https://github.com/user/repo/edit/main/docs/:path',
      text: 'Edit this page on GitHub'
    },

    // Last updated
    lastUpdated: {
      text: 'Updated at',
      formatOptions: {
        dateStyle: 'full',
        timeStyle: 'medium'
      }
    },

    // Search
    search: {
      provider: 'local'
    }
  }
}
```_

## Benutzerdefinierte Komponenten

### Globale Komponenten
```vue
<!-- docs/.vitepress/components/Badge.vue -->
<template>
  <span class="badge" :class="type">
    <slot />
  </span>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'info'
  }
})
</script>

<style scoped>
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.badge.info {
  background: #e1f5fe;
  color: #01579b;
}

.badge.warning {
  background: #fff3e0;
  color: #e65100;
}
</style>
```_

### Registrieren Sie Komponenten
```javascript
// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import Badge from '../components/Badge.vue'
import CodeGroup from '../components/CodeGroup.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('Badge', Badge)
    app.component('CodeGroup', CodeGroup)
  }
}
```_

### Verwendung in Markdown
```markdown
# API Reference

## Methods

### getData() <Badge type="info">v1.0+</Badge>

Fetches data from the API.

<CodeGroup>
  <CodeGroupItem title="JavaScript">

  ```javascript
const data = warten api.getData()

```typescript const data: ApiResponse = erwartet api.getData()

  </CodeGroupItem>
</CodeGroup>
```_

### Interaktive Komponenten
```vue
<!-- docs/.vitepress/components/Counter.vue -->
<template>
  <div class="counter">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<style scoped>
.counter {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
}

button {
  padding: 0.5rem 1rem;
  border: none;
  background: var(--vp-c-brand-1);
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
</style>
```_

## Navigation

### Hauptnavigation
```javascript
// docs/.vitepress/config.js
export default {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'API', link: '/api/' },
      { text: 'Changelog', link: '/changelog' }
    ]
  }
}
```_

### Zurück zur Übersicht
```javascript
export default {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      {
        text: 'Guide',
        items: [
          { text: 'Getting Started', link: '/guide/' },
          { text: 'Configuration', link: '/guide/configuration' },
          { text: 'Deployment', link: '/guide/deployment' }
        ]
      },
      {
        text: 'Reference',
        items: [
          {
            text: 'API',
            items: [
              { text: 'Runtime API', link: '/api/runtime' },
              { text: 'Build API', link: '/api/build' }
            ]
          },
          {
            text: 'Config',
            items: [
              { text: 'Site Config', link: '/config/site' },
              { text: 'Theme Config', link: '/config/theme' }
            ]
          }
        ]
      }
    ]
  }
}
```_

### Externe Links
```javascript
export default {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'GitHub', link: 'https://github.com/user/repo' },
      { 
        text: 'Resources',
        items: [
          { text: 'Documentation', link: '/docs/' },
          { text: 'GitHub', link: 'https://github.com/user/repo' },
          { text: 'Discord', link: 'https://discord.gg/invite' }
        ]
      }
    ]
  }
}
```_

### Active Link Matching
```javascript
export default {
  themeConfig: {
    nav: [
      { 
        text: 'Guide', 
        link: '/guide/',
        activeMatch: '/guide/' // Matches /guide/* paths
      },
      { 
        text: 'API', 
        link: '/api/',
        activeMatch: '^/api/' // Regex pattern
      }
    ]
  }
}
```_

## Seitenleiste

### Basic Sidebar
```javascript
// docs/.vitepress/config.js
export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Getting Started',
        items: [
          { text: 'Introduction', link: '/guide/' },
          { text: 'Installation', link: '/guide/installation' },
          { text: 'Quick Start', link: '/guide/quick-start' }
        ]
      },
      {
        text: 'Advanced',
        items: [
          { text: 'Configuration', link: '/guide/configuration' },
          { text: 'Theming', link: '/guide/theming' },
          { text: 'Deployment', link: '/guide/deployment' }
        ]
      }
    ]
  }
}
```_

### Mehrere Seitenleisten
```javascript
export default {
  themeConfig: {
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          items: [
            { text: 'Introduction', link: '/guide/' },
            { text: 'Getting Started', link: '/guide/getting-started' }
          ]
        }
      ],
      '/api/': [
        {
          text: 'API Reference',
          items: [
            { text: 'Overview', link: '/api/' },
            { text: 'Methods', link: '/api/methods' }
          ]
        }
      ]
    }
  }
}
```_

### Faltbare Seitenleiste
```javascript
export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Getting Started',
        collapsed: false, // Expanded by default
        items: [
          { text: 'Introduction', link: '/guide/' },
          { text: 'Installation', link: '/guide/installation' }
        ]
      },
      {
        text: 'Advanced Topics',
        collapsed: true, // Collapsed by default
        items: [
          { text: 'Custom Themes', link: '/advanced/themes' },
          { text: 'Plugins', link: '/advanced/plugins' }
        ]
      }
    ]
  }
}
```_

### Autogenerierte Sidebar
```javascript
// docs/.vitepress/config.js
import { generateSidebar } from './utils/sidebar'

export default {
  themeConfig: {
    sidebar: generateSidebar('docs')
  }
}

// utils/sidebar.js
import fs from 'fs'
import path from 'path'

export function generateSidebar(dir) {
  const files = fs.readdirSync(dir)
  return files
    .filter(file => file.endsWith('.md'))
    .map(file => ({
      text: file.replace('.md', ''),
      link: `/${file.replace('.md', '')}`
    }))
}
```_

## Suche

### Lokale Suche
```javascript
// docs/.vitepress/config.js
export default {
  themeConfig: {
    search: {
      provider: 'local',
      options: {
        translations: {
          button: {
            buttonText: 'Search',
            buttonAriaLabel: 'Search'
          },
          modal: {
            noResultsText: 'No results found',
            resetButtonTitle: 'Reset search',
            footer: {
              selectText: 'to select',
              navigateText: 'to navigate'
            }
          }
        }
      }
    }
  }
}
```_

### Algolia Suche
```javascript
export default {
  themeConfig: {
    search: {
      provider: 'algolia',
      options: {
        appId: 'YOUR_APP_ID',
        apiKey: 'YOUR_API_KEY',
        indexName: 'YOUR_INDEX_NAME',
        placeholder: 'Search docs',
        translations: {
          button: {
            buttonText: 'Search',
            buttonAriaLabel: 'Search'
          }
        }
      }
    }
  }
}
```_

### Individuelle Suche
```vue
<!-- docs/.vitepress/theme/components/CustomSearch.vue -->
<template>
  <div class="search">
    <input 
      v-model="query" 
      placeholder="Search..."
      @input="search"
    />
    <div v-if="results.length" class="results">
      <div 
        v-for="result in results" 
        :key="result.id"
        class="result"
        @click="navigate(result.path)"
      >
        {{ result.title }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vitepress'

const query = ref('')
const results = ref([])
const router = useRouter()

function search() {
  // Implement search logic
  results.value = performSearch(query.value)
}

function navigate(path) {
  router.go(path)
}
</script>
```_

## Internationalisierung

### Mehrsprachige Konfiguration
```javascript
// docs/.vitepress/config.js
export default {
  locales: {
    root: {
      label: 'English',
      lang: 'en',
      title: 'VitePress',
      description: 'Vite & Vue powered static site generator'
    },
    zh: {
      label: '简体中文',
      lang: 'zh-CN',
      title: 'VitePress',
      description: 'Vite & Vue 驱动的静态站点生成器',
      themeConfig: {
        nav: [
          { text: '首页', link: '/zh/' },
          { text: '指南', link: '/zh/guide/' }
        ],
        sidebar: {
          '/zh/guide/': [
            {
              text: '指南',
              items: [
                { text: '介绍', link: '/zh/guide/' },
                { text: '快速开始', link: '/zh/guide/getting-started' }
              ]
            }
          ]
        }
      }
    }
  },

  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ],
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          items: [
            { text: 'Introduction', link: '/guide/' },
            { text: 'Getting Started', link: '/guide/getting-started' }
          ]
        }
      ]
    }
  }
}
```_

### Verzeichnis Struktur für i18n
```bash
docs/
├── .vitepress/
│   └── config.js
├── index.md              # English homepage
├── guide/
│   ├── index.md
│   └── getting-started.md
└── zh/
    ├── index.md          # Chinese homepage
    └── guide/
        ├── index.md
        └── getting-started.md
```_

### Sprache wechseln
```vue
<!-- Custom language switcher -->
<template>
  <select @change="switchLanguage">
    <option value="/">English</option>
    <option value="/zh/">简体中文</option>
  </select>
</template>

<script setup>
import { useRouter } from 'vitepress'

const router = useRouter()

function switchLanguage(event) {
  const locale = event.target.value
  router.go(locale)
}
</script>
```_

## Bereitstellung

### Static Hosting
```bash
# Build for production
npm run docs:build

# Output directory: docs/.vitepress/dist
# Deploy this directory to your hosting provider
```_

### GitHub Seiten
```yaml
# .github/workflows/deploy.yml
name: Deploy VitePress site to Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: npm

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Install dependencies
        run: npm ci

      - name: Build with VitePress
        run: npm run docs:build

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: docs/.vitepress/dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2
```_

### Netting
```toml
# netlify.toml
[build]
  command = "npm run docs:build"
  publish = "docs/.vitepress/dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```_

### Vervollständigung
```json
{
  "buildCommand": "npm run docs:build",
  "outputDirectory": "docs/.vitepress/dist"
}

Zollgebiet¶

```javascript // docs/.vitepress/config.js export default { base: '/my-project/', // For GitHub Pages subdirectory // base: '/', // For custom domain

head: [ ['link', { rel: 'canonical', href: 'https://mydomain.com' }] ] } ```_

API Sachgebiet¶

Site Data¶

```vue

```_

Seite Daten¶

```vue

```_

Themen zum Thema¶

```vue

```_

Router¶

```vue

```_

Plugins¶

Markdown Plugins¶

javascript // docs/.vitepress/config.js export default { markdown: { config: (md) => { // Add markdown-it plugins md.use(require('markdown-it-footnote')) md.use(require('markdown-it-deflist')) md.use(require('markdown-it-abbr')) md.use(require('markdown-it-emoji')) md.use(require('markdown-it-container'), 'custom') } } }_

Vite Plugins¶

```javascript // docs/.vitepress/config.js import { defineConfig } from 'vitepress'

export default defineConfig({ vite: { plugins: [ // Add Vite plugins { name: 'custom-plugin', configResolved(config) { // Plugin logic } } ] } }) ```_

Custom Plugin Beispiel¶

```javascript // plugins/reading-time.js export function readingTimePlugin(md) { md.core.ruler.push('reading-time', (state) => { const content = state.src const wordsPerMinute = 200 const words = content.split(/\s+/).length const readingTime = Math.ceil(words / wordsPerMinute)

// Add to env for use in templates
state.env.readingTime = readingTime

}) }

// docs/.vitepress/config.js import { readingTimePlugin } from './plugins/reading-time.js'

export default { markdown: { config: (md) => { md.use(readingTimePlugin) } } } ```_

Erweiterte Konfiguration¶

Optimierung aufbauen¶

javascript // docs/.vitepress/config.js export default { vite: { build: { minify: 'terser', rollupOptions: { output: { manualChunks: { vue: ['vue'], vendor: ['lodash', 'axios'] } } } } } }_

Benutzerdefinierte Kopf Tags¶

javascript export default { head: [ ['meta', { name: 'author', content: 'Your Name' }], ['meta', { name: 'keywords', content: 'vitepress, vue, documentation' }], ['link', { rel: 'icon', href: '/favicon.ico' }], ['link', { rel: 'manifest', href: '/manifest.json' }], ['script', { src: 'https://analytics.example.com/script.js' }] ] }_

Umweltvariablen¶

javascript // docs/.vitepress/config.js export default { define: { __VERSION__: JSON.stringify(process.env.npm_package_version), __BUILD_TIME__: JSON.stringify(new Date().toISOString()) } }_

Hooks bauen¶

```javascript export default { buildStart() { console.log('Build started') },

buildEnd(siteConfig) { console.log('Build completed') // Generate sitemap, RSS feed, etc. },

postRender(context) { // Post-render processing } } ```_

Leistung¶

Bundanalyse¶

```bash

Install bundle analyzer¶

npm install --save-dev rollup-plugin-analyzer

Add to vite config¶

docs/.vitepress/config.js¶

export default { vite: { build: { rollupOptions: { plugins: [ require('rollup-plugin-analyzer')() ] } } } } ```_

Lazy Loading¶

```vue

```_

Bildoptimierung¶

```markdown

```_

Cache-Strategie¶

javascript // docs/.vitepress/config.js export default { vite: { build: { rollupOptions: { output: { entryFileNames: 'assets/[name].[hash].js', chunkFileNames: 'assets/[name].[hash].js', assetFileNames: 'assets/[name].[hash].[ext]' } } } } }_

Best Practices¶

Inhalt Organisation¶

```bash

Recommended structure¶

docs/ ├── .vitepress/ ├── guide/ │ ├── index.md # Overview │ ├── getting-started.md │ ├── configuration.md │ └── advanced.md ├── api/ │ ├── index.md │ ├── methods.md │ └── types.md ├── examples/ ├── changelog.md └── index.md ```_

SEO Optimierung¶

```javascript // docs/.vitepress/config.js export default { head: [ ['meta', { name: 'description', content: 'Your site description' }], ['meta', { property: 'og:title', content: 'Your Site Title' }], ['meta', { property: 'og:description', content: 'Your site description' }], ['meta', { property: 'og:image', content: '/og-image.jpg' }], ['meta', { name: 'twitter:card', content: 'summary_large_image' }], ['link', { rel: 'canonical', href: 'https://yoursite.com' }] ],

// Generate sitemap sitemap: { hostname: 'https://yoursite.com' } } ```_

Performance Best Practices¶

Optimieren Sie Bilder mit passenden Formaten und Größen
**Verwenden Sie faulen Beladung* für schwere Bauteile
Minimize Bündelgröße mit Baumschütteln
Einsetzbares Caching mit richtigen Headern
** Verwenden Sie CDN** für statische Vermögenswerte

Inhalt Best Practices¶

**Schreiben Sie klare Überschriften* für bessere Navigation
** Verwenden Sie konsistente Formatierung* auf Seiten
**Include-Codebeispiele* mit richtiger Syntax Hervorhebung
** Suchfunktionalität hinzufügen** für bessere Entdeckbarkeit
Die konsistente Navigation-Struktur

--

Zusammenfassung¶

VitePress ist ein leistungsstarker statischer Standortgenerator, der die Geschwindigkeit von Vite mit der Flexibilität von Vue.js kombiniert. Zu den wichtigsten Merkmalen gehören:

Fast Development: Blitzschnelle HMR von Vite
**Vue-Powered*: Full Vue.js Unterstützung für interaktive Komponenten
**Markdown-Centered*: Inhalte mit erweiterten Markdown-Funktionen im Fokus
**Kundenspezifisches **: Flexibles Themen- und Komponentensystem
**SEO-Friendly*: Statische Website-Generation mit richtigen Meta-Tags
TypeScript Support: Erstklassige TypeScript-Integration
Internationalisierung: Integrierte Mehrsprachige Unterstützung

Durch die Nutzung von VitePress-Funktionen und nach besten Praktiken können Sie schnelle, schöne und pflegefähige Dokumentationsseiten erstellen, die ein ausgezeichnetes Nutzererlebnis bieten.

<= <= <= <================================================================================= Funktion copyToClipboard() {\cHFFFF} const commands = document.querySelectorAll('code'); alle Befehle = ''; Befehle. Für jede(cmd) => alle Befehle += cmd.textContent + '\n'); navigator.clipboard.writeText (allCommands); Alarm ('Alle Befehle, die in die Zwischenablage kopiert werden!'); }

Funktion generierenPDF() { Fenster.print(); }

VitePress Cheatsheet¶

VitePress - Vite & Vue Powered Static Site Generator

Inhaltsverzeichnis¶

Installation¶

Schneller Start¶

Zollgebiet¶

API Sachgebiet¶

Site Data¶

{{ site.title }}

Seite Daten¶

{{ page.title }}

Themen zum Thema¶

Router¶

Plugins¶

Markdown Plugins¶

Vite Plugins¶

Custom Plugin Beispiel¶

Erweiterte Konfiguration¶

Optimierung aufbauen¶

Benutzerdefinierte Kopf Tags¶

Umweltvariablen¶

Hooks bauen¶

Leistung¶

Bundanalyse¶

Install bundle analyzer¶

Add to vite config¶

docs/.vitepress/config.js¶

Lazy Loading¶

Bildoptimierung¶

Cache-Strategie¶

Best Practices¶

Inhalt Organisation¶

Recommended structure¶

SEO Optimierung¶

Performance Best Practices¶

Inhalt Best Practices¶

Zusammenfassung¶