Feuille de chaleur VitePress¶

VitePress - Générateur de site statique alimenté par les vites et les vues

VitePress est un générateur de site statique (SSG) conçu pour construire des sites Web rapides et centrés sur le contenu. Construit sur le dessus de Vite, il offre une grande expérience de développeur avec Vue.js-alimenté et la personnalisation.

Copier toutes les commandes Générer PDF

Sommaire¶

[Installation] (#installation)
[Pour commencer] (#getting-started)
[Structure du projet] (#project-structure)
[Configuration] (#configuration)
[Caractéristiques du marquage] (#markdown-features)
[Présentation] (#frontmatter)
[Route] (#routing)
[Theming] (#theming)
[Composants personnalisés] (#custom-components)
[Navigation] (#navigation)
[Sidebar] (#sidebar)
Rechercher
[Internationalisation] (#internationalization)
[Déploiement] (#deployment)
[Référence API] (#api-reference)
[Plugins] (#plugins)
[Configuration avancée] (#advanced-configuration)
[Performance] (#performance)
[Meilleures pratiques] (#best-practices)

Installation¶

Démarrer rapidement¶

# 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

Installation manuelle¶

# Initialize npm project
npm init -y

# Install VitePress
npm install --save-dev vitepress

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

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

## Commencer

### Configuration de base
```bash
# Create docs directory
mkdir docs

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

# Create config file
mkdir docs/.vitepress

Configuration de base¶

// 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' }
        ]
      }
    ]
  }
}

Première page¶

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

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

Structure du projet¶

Structure de base¶

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

Structure avancée¶

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

Configuration¶

Configuration de base¶

// 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'
    }
  }
}

Configuration avancée¶

// 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!')
  }
})

Configuration du script de type¶

// 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/' }
    ]
  }
})

Caractéristiques du marquage¶

Marquage de base¶

# 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

Blocs de codes¶

`markdownJavascript fonction hello() { console.log('Bonjour, VitePress!') } __CODE_BLOCK_14_javascript{1,3-5} // Mise en évidence des lignes fonction hello() { console.log('Bonjour, VitePress!') nom de const = 'VitePress ' retourner Hello, ${name}! } ```

Javascript // Numéros de ligne fonction hello() { console.log('Bonjour, VitePress!') } ```_»

Conteneurs personnalisés¶

```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 console.log('Bonjour, VitePress!') [config.js] par défaut d'exportation { nom: 'config ' }

typescript [config.ts] par défaut d'exportation { nom: 'config ' } comme const ::: ```

Tableaux¶

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

Expressions mathématiques¶

```markdown

The formula is $E = mc^2$.

$$ \frac{1}{2} \times \frac{3}{4} = \frac{3}{8} $$ ```

Emoji¶

```markdown

VitePress is ! ```

Avant-matière¶

Matière première¶

```markdown¶

title: Page Title description: Page description layout: doc

Page Content¶

This page has custom metadata. ```

Avant-matière avancée¶

```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. ```

Page d'accueil¶

```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.

```

Mise en page personnalisée¶

```markdown¶

layout: custom customData: foo: bar items: - name: Item 1 - name: Item 2

Custom Layout Page¶

This page uses a custom layout. ```

Routage¶

Routage basé sur des fichiers¶

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

Routes dynamiques¶

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

Métadonnées de la route¶

```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¶

```

```vue

```

Thèmes¶

Personnalisation par thème par défaut¶

```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 personnalisé¶

```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; } ```

Mise en page personnalisée¶

```vue

```

Configuration du thème¶

```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'
}

} } ```

Composants personnalisés¶

Composantes mondiales¶

```vue

```

Composantes du registre¶

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

Utilisation dans le marquage¶

```markdown

API Reference¶

Methods¶

getData() v1.0+¶

Fetches data from the API.

Javascript Const data = attend api.getData()

typescript Const data: ApiResponse = attend api.getData()

```

Composantes interactives¶

```vue

```

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

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' } ] } ] } ] } }

Liens externes¶

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' } ] } ] } }

Correspondance active des liens¶

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

Barre latérale¶

Barre latérale de base¶

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' } ] } ] } }

Plusieurs barres latérales¶

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' } ] } ] } } }

Barre latérale collapsible¶

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' } ] } ] } }

Barre latérale générée automatiquement¶

```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', '')} })) } ```

Rechercher¶

Recherche locale¶

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' } } } } } } }

Recherche Algolia¶

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' } } } } } }

Recherche personnalisée¶

```vue

```

Internationalisation¶

Configuration multilingue¶

```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' } ] } ] } } } ```

Structure de répertoire pour 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

Changement de langue¶

```vue

```

Déploiement¶

Hébergement statique¶

```bash

Build for production¶

npm run docs:build

Output directory: docs/.vitepress/dist¶

Deploy this directory to your hosting provider¶

```

Pages GitHub¶

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

Netlifier¶

```toml

netlify.toml¶

[build] command = "npm run docs:build" publish = "docs/.vitepress/dist"

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

Vercel¶

json { "buildCommand": "npm run docs:build", "outputDirectory": "docs/.vitepress/dist" }

Domaine personnalisé¶

```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 Référence¶

Données du site¶

```vue

```

Données de page¶

```vue

```

Données thématiques¶

```vue

```

Routeur¶

```vue

```

Greffons¶

Greffons de marquage¶

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

Greffons vitaminés¶

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

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

Exemple de plugin personnalisé¶

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

Configuration avancée¶

Optimisation de la construction¶

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

Étiquettes de tête personnalisées¶

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' }] ] }

Variables d'environnement¶

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

Construire des crochets¶

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

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

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

Rendement¶

Analyse de l'ensemble¶

```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')() ] } } } } ```

Chargement paresseux¶

```vue

```

Optimisation de l'image¶

```markdown

```

Stratégie de mise en cache¶

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]' } } } } }

Meilleures pratiques¶

Organisation du contenu¶

```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 Optimisation¶

```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' } } ```

Meilleures pratiques en matière de rendement¶

Optimiser les images avec des formats et des tailles appropriés
Utilisez le chargement paresseux pour les composants lourds
** Minimiser la taille du faisceau** avec tremblement d'arbre
Activer la mise en cache avec les en-têtes appropriés
Utiliser CDN pour les actifs statiques

Contenu Pratiques exemplaires¶

Écrire des rubriques claires pour une meilleure navigation
Utilisez un formatage cohérent à travers les pages
Inclure des exemples de code avec une syntaxe appropriée
Ajouter la fonctionnalité de recherche pour une meilleure découvrabilité
Maintenir une structure de navigation cohérente

Résumé¶

VitePress est un puissant générateur de site statique qui combine la vitesse de Vite avec la flexibilité de Vue.js. Les principales caractéristiques sont les suivantes :

Développement rapide: HMR rapide à la foudre propulsé par Vite
Vue-Powered: prise en charge complète des composants interactifs de Vue.js
Markdown-Centred: Focus sur le contenu avec des fonctionnalités de Markdown améliorées
Customisable: Système de montage flexible et de composants
SEO-Amiendly: Génération statique de sites avec des balises méta appropriées
TypeScript Support: Intégration de typeScript de première classe
Internationalisation : Support multilingue intégré

En exploitant les capacités de VitePress et en suivant les meilleures pratiques, vous pouvez créer des sites de documentation rapides, beaux et durables qui fournissent une excellente expérience utilisateur.

Feuille de chaleur VitePress¶

VitePress - Générateur de site statique alimenté par les vites et les vues

Sommaire¶

Installation¶

Démarrer rapidement¶

Installation manuelle¶

Configuration de base¶

Première page¶

Structure du projet¶

Structure de base¶

Structure avancée¶

Configuration¶

Configuration de base¶

Configuration avancée¶

Configuration du script de type¶

Caractéristiques du marquage¶

Marquage de base¶

Blocs de codes¶

Conteneurs personnalisés¶

Tableaux¶

Expressions mathématiques¶

Emoji¶

Avant-matière¶

Matière première¶

```markdown¶

Page Content¶

Avant-matière avancée¶

```markdown¶

Advanced Guide¶

Page d'accueil¶

```markdown¶

Mise en page personnalisée¶

```markdown¶

Custom Layout Page¶

Routage¶

Routage basé sur des fichiers¶

File structure determines routes¶

Routes dynamiques¶

Métadonnées de la route¶

```markdown¶

Page Content¶

Navigation programmatique¶

Thèmes¶

Personnalisation par thème par défaut¶

CSS personnalisé¶

Mise en page personnalisée¶

Configuration du thème¶

Composants personnalisés¶

Composantes mondiales¶

Composantes du registre¶

Utilisation dans le marquage¶

API Reference¶

Methods¶

getData() v1.0+¶

Composantes interactives¶

Navigation¶

Navigation de base¶

Navigation déroulante¶

Liens externes¶

Correspondance active des liens¶

Barre latérale¶

Barre latérale de base¶

Plusieurs barres latérales¶

Barre latérale collapsible¶

Barre latérale générée automatiquement¶

Rechercher¶

Recherche locale¶

Recherche Algolia¶

Recherche personnalisée¶

Internationalisation¶

Configuration multilingue¶

Structure de répertoire pour i18n¶

Changement de langue¶

Déploiement¶

Hébergement statique¶

Build for production¶

Output directory: docs/.vitepress/dist¶

Deploy this directory to your hosting provider¶

Pages GitHub¶

.github/workflows/deploy.yml¶