mirror of https://github.com/vuejs/vitepress
Merge c8656cdbcc into 56fa6c9df1
Intense
4 days ago
committed by
GitHub
commit
237fde80e8
@ -0,0 +1,347 @@
|
|||||||
|
import {
|
||||||
|
defineAdditionalConfig,
|
||||||
|
type DefaultTheme,
|
||||||
|
type MarkdownLocaleOptions
|
||||||
|
} from 'vitepress'
|
||||||
|
import pkg from 'vitepress/package.json' with { type: 'json' }
|
||||||
|
|
||||||
|
export const markdown: MarkdownLocaleOptions = {
|
||||||
|
container: {
|
||||||
|
tipLabel: 'TIPP',
|
||||||
|
infoLabel: 'INFO',
|
||||||
|
warningLabel: 'WARNUNG',
|
||||||
|
dangerLabel: 'GEFAHR',
|
||||||
|
detailsLabel: 'DETAILS',
|
||||||
|
noteLabel: 'NOTIZ',
|
||||||
|
importantLabel: 'WICHTIG',
|
||||||
|
cautionLabel: 'VORSICHT'
|
||||||
|
},
|
||||||
|
codeCopyButton: {
|
||||||
|
tooltipText: 'Code kopieren',
|
||||||
|
copiedText: 'Kopiert'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineAdditionalConfig({
|
||||||
|
description: 'Static-Site-Generator mit Vue und Vite',
|
||||||
|
|
||||||
|
head: [
|
||||||
|
[
|
||||||
|
'link',
|
||||||
|
// für die in .vitepress/theme/styles.css definierte Vazirmatn-Schrift
|
||||||
|
{ rel: 'preconnect', href: 'https://cdn.jsdelivr.net', crossorigin: '' }
|
||||||
|
]
|
||||||
|
],
|
||||||
|
|
||||||
|
themeConfig: {
|
||||||
|
nav: nav(),
|
||||||
|
|
||||||
|
search: { options: searchOptions() },
|
||||||
|
|
||||||
|
sidebar: {
|
||||||
|
'/de/guide/': { base: '/de/guide/', items: sidebarAnleitung() },
|
||||||
|
'/de/reference/': { base: '/de/reference/', items: sidebarReference() }
|
||||||
|
},
|
||||||
|
|
||||||
|
editLink: {
|
||||||
|
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
||||||
|
text: 'Diese Seite auf GitHub bearbeiten'
|
||||||
|
},
|
||||||
|
|
||||||
|
footer: {
|
||||||
|
message: 'Veröffentlicht unter der MIT-Lizenz',
|
||||||
|
copyright: 'Copyright © 2019-heute Evan You'
|
||||||
|
},
|
||||||
|
|
||||||
|
docFooter: {
|
||||||
|
prev: 'Zurück',
|
||||||
|
next: 'Weiter'
|
||||||
|
},
|
||||||
|
|
||||||
|
outline: {
|
||||||
|
label: 'Auf dieser Seite'
|
||||||
|
},
|
||||||
|
|
||||||
|
lastUpdated: {
|
||||||
|
text: 'Zuletzt aktualisiert'
|
||||||
|
},
|
||||||
|
|
||||||
|
notFound: {
|
||||||
|
title: 'Seite nicht gefunden',
|
||||||
|
quote:
|
||||||
|
'Doch wenn du deine Richtung nicht änderst und weiter in diese Richtung blickst, könntest du tatsächlich dort landen, worauf du zusteuerst.',
|
||||||
|
linkLabel: 'Zur Startseite',
|
||||||
|
linkText: 'Bring mich zur Startseite'
|
||||||
|
},
|
||||||
|
|
||||||
|
langMenuLabel: 'Sprache ändern',
|
||||||
|
returnToTopLabel: 'Nach oben',
|
||||||
|
sidebarMenuLabel: 'Seitenleiste',
|
||||||
|
darkModeSwitchLabel: 'Dunkelmodus',
|
||||||
|
lightModeSwitchTitle: 'Zum Hellmodus wechseln',
|
||||||
|
darkModeSwitchTitle: 'Zum Dunkelmodus wechseln',
|
||||||
|
siteTitle: 'VitePress'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function nav(): DefaultTheme.NavItem[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: 'Anleitung',
|
||||||
|
link: 'de/guide/what-is-vitepress',
|
||||||
|
activeMatch: '/guide/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Referenz',
|
||||||
|
link: 'de/reference/site-config',
|
||||||
|
activeMatch: '/reference/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: pkg.version,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: '1.6.4',
|
||||||
|
link: 'https://vuejs.github.io/vitepress/v1/fa/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Änderungen',
|
||||||
|
link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Mitwirken',
|
||||||
|
link: 'https://github.com/vuejs/vitepress/blob/main/.github/contributing.md'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function sidebarAnleitung(): DefaultTheme.SidebarItem[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: 'Einführung',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: 'Was ist VitePress?', link: 'what-is-vitepress' },
|
||||||
|
{ text: 'Erste Schritte', link: 'getting-started' },
|
||||||
|
{ text: 'Routing', link: 'routing' },
|
||||||
|
{ text: 'Bereitstellung', link: 'deploy' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Schreiben',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: 'Markdown Erweiterungen', link: 'markdown' },
|
||||||
|
{ text: 'Asset-Handhabung', link: 'asset-handling' },
|
||||||
|
{ text: 'Frontmatter', link: 'frontmatter' },
|
||||||
|
{ text: 'Vue in Markdown benutzen', link: 'using-vue' },
|
||||||
|
{ text: 'Internationalisierung', link: 'i18n' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Anpassung',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: 'Ein eigenes Theme nutzen', link: 'custom-theme' },
|
||||||
|
{
|
||||||
|
text: 'Standard-Theme erweitern',
|
||||||
|
link: 'extending-default-theme'
|
||||||
|
},
|
||||||
|
{ text: 'Daten laden', link: 'data-loading' },
|
||||||
|
{ text: 'SSR-Kompatibilität', link: 'ssr-compat' },
|
||||||
|
{ text: 'Mit einem CMS verbinden', link: 'cms' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Experimentell',
|
||||||
|
collapsed: false,
|
||||||
|
items: [
|
||||||
|
{ text: 'MPA-Modus', link: 'mpa-mode' },
|
||||||
|
{ text: 'Sitemap-Generation', link: 'sitemap-generation' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ text: 'Konfiguration und API-Referenz', base: 'de/reference/', link: 'site-config' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function sidebarReference(): DefaultTheme.SidebarItem[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: 'Referenz',
|
||||||
|
base: 'de/reference/',
|
||||||
|
items: [
|
||||||
|
{ text: 'Seiten-Konfiguration', link: 'site-config' },
|
||||||
|
{ text: 'Frontmatter-Konfiguration', link: 'frontmatter-config' },
|
||||||
|
{ text: 'Runtime-API', link: 'runtime-api' },
|
||||||
|
{ text: 'CLI', link: 'cli' },
|
||||||
|
{
|
||||||
|
text: 'Standard-Theme',
|
||||||
|
base: 'de/reference/default-theme-',
|
||||||
|
items: [
|
||||||
|
{ text: 'Übersicht', link: 'config' },
|
||||||
|
{ text: 'Navigation', link: 'nav' },
|
||||||
|
{ text: 'Seitenleiste', link: 'sidebar' },
|
||||||
|
{ text: 'Startseite', link: 'home-page' },
|
||||||
|
{ text: 'Fußzeile', link: 'footer' },
|
||||||
|
{ text: 'Layout', link: 'layout' },
|
||||||
|
{ text: 'Badge', link: 'badge' },
|
||||||
|
{ text: 'Team-Seite', link: 'team-page' },
|
||||||
|
{ text: 'Vorher / Nachher Links', link: 'prev-next-links' },
|
||||||
|
{ text: 'Link bearbeiten', link: 'edit-link' },
|
||||||
|
{ text: 'Zuletzt aktualisiert Zeitstempel', link: 'last-updated' },
|
||||||
|
{ text: 'Suche', link: 'search' },
|
||||||
|
{ text: 'Carbon Ads', link: 'carbon-ads' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchOptions(): Partial<DefaultTheme.AlgoliaSearchOptions> {
|
||||||
|
return {
|
||||||
|
translations: {
|
||||||
|
button: {
|
||||||
|
buttonText: 'Suche',
|
||||||
|
buttonAriaLabel: 'Suche'
|
||||||
|
},
|
||||||
|
modal: {
|
||||||
|
searchBox: {
|
||||||
|
clearButtonTitle: 'Löschen',
|
||||||
|
clearButtonAriaLabel: 'Suchverlauf löschen',
|
||||||
|
closeButtonText: 'Schließen',
|
||||||
|
closeButtonAriaLabel: 'Schließen',
|
||||||
|
placeholderText: 'Dokumentation durchsuchen oder KI fragen',
|
||||||
|
placeholderTextAskAi: 'Stell noch eine Frage...',
|
||||||
|
placeholderTextAskAiStreaming: 'Antwort generieren...',
|
||||||
|
searchInputLabel: 'Suche',
|
||||||
|
backToKeywordSearchButtonText: 'Zurück zur Stichwortsuche',
|
||||||
|
backToKeywordSearchButtonAriaLabel: 'Zurück zur Stichwortsuche',
|
||||||
|
newConversationPlaceholder: 'Eine Frage stellen',
|
||||||
|
conversationHistoryTitle: 'Mein Gesprächsverlauf',
|
||||||
|
startNewConversationText: 'Neue Konversation beginnen',
|
||||||
|
viewConversationHistoryText: 'Gesprächsverlauf',
|
||||||
|
threadDepthErrorPlaceholder: 'Gesprächslimit erreicht'
|
||||||
|
},
|
||||||
|
newConversation: {
|
||||||
|
newConversationTitle: 'Wie kann ich dir heute helfen?',
|
||||||
|
newConversationDescription:
|
||||||
|
'Ich werde die Dokumentation durchsuchen, um schnell Einrichtungsanleitungen, Details zu Funktionen und Tipps zur Fehlerbehebung zu finden.'
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
selectText: 'Auswählen',
|
||||||
|
submitQuestionText: 'Frage absenden',
|
||||||
|
selectKeyAriaLabel: 'Eingabetaste', //unsure
|
||||||
|
navigateText: 'Navigieren',
|
||||||
|
navigateUpKeyAriaLabel: 'Pfeil hoch',
|
||||||
|
navigateDownKeyAriaLabel: 'Pfeil runter',
|
||||||
|
closeText: 'Schließen',
|
||||||
|
backToSearchText: 'Zurück zur Suche',
|
||||||
|
closeKeyAriaLabel: 'Escape-Taste',
|
||||||
|
poweredByText: 'Bereitgestellt von'
|
||||||
|
},
|
||||||
|
errorScreen: {
|
||||||
|
titleText: 'Ergebnisse konnten nicht abgerufen werden.',
|
||||||
|
helpText: 'Möglicherweise müssen Sie Ihre Netzwerkverbindung überprüfen.'
|
||||||
|
},
|
||||||
|
startScreen: {
|
||||||
|
recentSearchesTitle: 'Zuletzt',
|
||||||
|
noRecentSearchesText: 'Keine kürzlichen Suchanfragen',
|
||||||
|
saveRecentSearchButtonTitle: 'Diese Suche speichern',
|
||||||
|
removeRecentSearchButtonTitle: 'Diese Suche aus dem Verlauf entfernen',
|
||||||
|
favoriteSearchesTitle: 'Favoriten',
|
||||||
|
removeFavoriteSearchButtonTitle: 'Diese Suche von Favoriten entfernen',
|
||||||
|
recentConversationsTitle: 'Kürzliche Konversationen',
|
||||||
|
removeRecentConversationButtonTitle:
|
||||||
|
'Diese Unterhaltung aus dem Verlauf entfernen'
|
||||||
|
},
|
||||||
|
noResultsScreen: {
|
||||||
|
noResultsText: 'Keine Ergebnisse für',
|
||||||
|
suggestedQueryText: 'Versuchen Sie',
|
||||||
|
reportMissingResultsText:
|
||||||
|
'Glaubst du, diese Suche sollte Ergebnisse liefern?',
|
||||||
|
reportMissingResultsLinkText: 'Lass es uns wissen.'
|
||||||
|
},
|
||||||
|
resultsScreen: {
|
||||||
|
askAiPlaceholder: 'Frag KI: ',
|
||||||
|
noResultsAskAiPlaceholder:
|
||||||
|
'Nicht in der Dokumentation fündig geworden? Fragen Sie die KI: '
|
||||||
|
},
|
||||||
|
askAiScreen: {
|
||||||
|
disclaimerText:
|
||||||
|
'Die Antworten werden von einer KI generiert und können ungenau sein. Bitte überprüfen Sie diese.',
|
||||||
|
relatedSourcesText: 'Verwandte Quellen',
|
||||||
|
thinkingText: 'Nachdenken...',
|
||||||
|
copyButtonText: 'Kopieren',
|
||||||
|
copyButtonCopiedText: 'Kopiert!',
|
||||||
|
copyButtonTitle: 'Kopieren',
|
||||||
|
likeButtonTitle: 'Hilfreich',
|
||||||
|
dislikeButtonTitle: 'Nicht hilfreich',
|
||||||
|
thanksForFeedbackText: 'Danke für Ihr Feedback!',
|
||||||
|
preToolCallText: 'Suchen...',
|
||||||
|
duringToolCallText: 'Suchen...',
|
||||||
|
afterToolCallText: 'Suche nach',
|
||||||
|
stoppedStreamingText: 'Du hast diese Antwort angehalten',
|
||||||
|
errorTitleText: 'Konversationsfehler',
|
||||||
|
startNewConversationButtonText: 'Neue Konversation beginnen'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
askAi: {
|
||||||
|
sidePanel: {
|
||||||
|
button: {
|
||||||
|
translations: {
|
||||||
|
buttonText: 'Frag KI',
|
||||||
|
buttonAriaLabel: 'Frag KI'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
panel: {
|
||||||
|
translations: {
|
||||||
|
header: {
|
||||||
|
title: 'Frag KI',
|
||||||
|
conversationHistoryTitle: 'Mein Gesprächsverlauf',
|
||||||
|
newConversationText: 'Neue Konversation beginnen',
|
||||||
|
viewConversationHistoryText: 'Gesprächsverlauf'
|
||||||
|
},
|
||||||
|
promptForm: {
|
||||||
|
promptPlaceholderText: 'Eine Frage stellen',
|
||||||
|
promptAnsweringText: 'Antwort generieren...',
|
||||||
|
promptAskAnotherQuestionText: 'Frage eine weitere Frage',
|
||||||
|
promptDisclaimerText:
|
||||||
|
'Die Antworten werden von einer KI generiert und können ungenau sein.',
|
||||||
|
promptLabelText:
|
||||||
|
'Drücken Sie die Eingabetaste zum Absenden oder Umschalt+Eingabetaste für eine neue Zeile.',
|
||||||
|
promptAriaLabelText: 'Frageeingabe'
|
||||||
|
},
|
||||||
|
conversationScreen: {
|
||||||
|
preToolCallText: 'Suchen...',
|
||||||
|
searchingText: 'Suchen...',
|
||||||
|
toolCallResultText: 'Suche nach',
|
||||||
|
conversationDisclaimer:
|
||||||
|
'Die Antworten werden von einer KI generiert und können ungenau sein. Bitte überprüfen Sie diese.',
|
||||||
|
reasoningText: 'Nachdenken...',
|
||||||
|
thinkingText: 'Nachdenken...',
|
||||||
|
relatedSourcesText: 'Verwandte Quellen',
|
||||||
|
stoppedStreamingText: 'Du hast diese Antwort angehalten',
|
||||||
|
copyButtonText: 'Kopieren',
|
||||||
|
copyButtonCopiedText: 'Kopiert!',
|
||||||
|
likeButtonTitle: 'Hilfreich',
|
||||||
|
dislikeButtonTitle: 'Nicht hilfreich',
|
||||||
|
thanksForFeedbackText: 'Danke für dein Feedback!',
|
||||||
|
errorTitleText: 'Konversationsfehler'
|
||||||
|
},
|
||||||
|
newConversationScreen: {
|
||||||
|
titleText: 'Wie kann ich dir heute helfen?',
|
||||||
|
introductionText:
|
||||||
|
'Ich werde Ihre Dokumentation durchsuchen, um schnell Einrichtungsanleitungen, Details zu Funktionen und Tipps zur Fehlerbehebung zu finden.'
|
||||||
|
},
|
||||||
|
logo: {
|
||||||
|
poweredByText: 'Bereitgestellt von'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
outline: deep
|
||||||
|
description: Verbinde VitePress mit einem Headless-CMS mithilfe dynamischer Routen und Datenlader.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Mit einem CMS verbinden
|
||||||
|
|
||||||
|
## Allgemeiner Ablauf
|
||||||
|
|
||||||
|
Die Verbindung von VitePress mit einem CMS dreht sich hauptsächlich um [dynamische Routen](./routing#dynamische-routen). Stelle sicher, dass du verstanden hast, wie sie funktionieren, bevor du fortfährst.
|
||||||
|
|
||||||
|
Da jedes CMS anders funktioniert, können wir hier nur einen allgemeinen Ablauf beschreiben, den du an dein konkretes Szenario anpassen musst.
|
||||||
|
|
||||||
|
1. Wenn dein CMS eine Authentifizierung erfordert, erstelle eine `.env`-Datei zum Speichern deiner API-Tokens und lade sie:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// posts/[id].paths.js
|
||||||
|
import { loadEnv } from 'vitepress'
|
||||||
|
|
||||||
|
const env = loadEnv('', process.cwd())
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Rufe die benötigten Daten aus dem CMS ab und formatiere sie als gültige Pfaddaten:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
async paths() {
|
||||||
|
// Verwende bei Bedarf die Client-Bibliothek des jeweiligen CMS.
|
||||||
|
const data = await (await fetch('https://my-cms-api', {
|
||||||
|
headers: {
|
||||||
|
// Token, falls erforderlich.
|
||||||
|
}
|
||||||
|
})).json()
|
||||||
|
|
||||||
|
return data.map(entry => {
|
||||||
|
return {
|
||||||
|
params: { id: entry.id, /* title, authors, date etc. */ },
|
||||||
|
content: entry.content
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Rendere den Inhalt auf der Seite:
|
||||||
|
|
||||||
|
```md
|
||||||
|
# {{ $params.title }}
|
||||||
|
|
||||||
|
- von {{ $params.author }} am {{ $params.date }}
|
||||||
|
|
||||||
|
<!-- @content -->
|
||||||
|
```
|
||||||
|
|
||||||
|
## Integrationsanleitungen
|
||||||
|
|
||||||
|
Wenn du eine Anleitung zur Integration von VitePress in ein bestimmtes CMS geschrieben hast, verwende bitte den Link „Diese Seite bearbeiten“ unten auf der Seite, um sie hier einzureichen.
|
||||||
@ -0,0 +1,302 @@
|
|||||||
|
---
|
||||||
|
outline: deep
|
||||||
|
description: Passe das VitePress-Standard-Theme mit benutzerdefiniertem CSS, Komponenten, Layouts und Slots an und erweitere es.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Standard-Theme erweitern
|
||||||
|
|
||||||
|
Das VitePress-Standard-Theme ist für Dokumentation optimiert und kann angepasst werden. Eine umfassende Liste der Optionen findest du in der [Übersicht zur Standard-Theme-Konfiguration](../reference/default-theme-config).
|
||||||
|
|
||||||
|
Es gibt jedoch einige Fälle, in denen die Konfiguration allein nicht ausreicht. Zum Beispiel:
|
||||||
|
|
||||||
|
1. Du musst die CSS-Gestaltung anpassen;
|
||||||
|
2. Du musst die Vue-App-Instanz ändern, zum Beispiel um globale Komponenten zu registrieren;
|
||||||
|
3. Du musst über Layout-Slots benutzerdefinierte Inhalte in das Theme einfügen.
|
||||||
|
|
||||||
|
Diese fortgeschrittenen Anpassungen erfordern ein eigenes Theme, das das Standard-Theme „erweitert“.
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
Bevor du fortfährst, lies zunächst [Ein eigenes Theme verwenden](./custom-theme), um zu verstehen, wie eigene Themes funktionieren.
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Anpassen CSS
|
||||||
|
|
||||||
|
Das CSS des Standard-Themes kann durch Überschreiben der CSS-Variablen auf Stammebene angepasst werden:
|
||||||
|
|
||||||
|
```js [.vitepress/theme/index.js]
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
import './custom.css'
|
||||||
|
|
||||||
|
export default DefaultTheme
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* .vitepress/theme/custom.css */
|
||||||
|
:root {
|
||||||
|
--vp-c-brand-1: #646cff;
|
||||||
|
--vp-c-brand-2: #747bff;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Siehe die [CSS-Variablen des Standard-Themes](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css), die überschrieben werden können.
|
||||||
|
|
||||||
|
### Navbar
|
||||||
|
|
||||||
|
Die Navigationsleiste verwendet eine einzelne, über CSS-Variablen gesteuerte Hintergrundfläche. Ihr Erscheinungsbild kann daher geändert werden, ohne die Interna der Komponenten anzupassen:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
/* Höhe und Hintergrund der Leiste */
|
||||||
|
--vp-nav-height: 4rem;
|
||||||
|
--vp-nav-bg-color: var(--vp-c-bg);
|
||||||
|
|
||||||
|
/* Hintergrund am oberen Rand der Startseite (nicht gescrollt);
|
||||||
|
auf var(--vp-nav-bg-color) setzen, um die Transparenz zu deaktivieren */
|
||||||
|
--vp-nav-home-bg-color: transparent;
|
||||||
|
|
||||||
|
/* Filter für den Inhalt hinter der Leiste */
|
||||||
|
--vp-nav-backdrop-filter: none;
|
||||||
|
|
||||||
|
/* untere Linie der Leiste und Hintergrund des mobilen Menüs */
|
||||||
|
--vp-nav-divider-color: var(--vp-c-gutter);
|
||||||
|
--vp-nav-screen-bg-color: var(--vp-c-bg);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Zum Beispiel, a frosted-glass navbar:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--vp-nav-bg-color: color-mix(in srgb, var(--vp-c-bg) 65%, transparent);
|
||||||
|
--vp-nav-backdrop-filter: saturate(180%) blur(8px);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Dieselbe Gestaltung gilt auch für die lokale Navigation: `--vp-local-nav-bg-color` folgt standardmäßig der Oberflächenfarbe der Navigationsleiste. Wo die beiden Leisten zusammentreffen, teilen sie sich eine einzige verschwommene Fläche, sodass der Glaseffekt durchgehend bleibt.
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
`backdrop-filter` kann die Scrollleistung messbar beeinträchtigen, insbesondere auf großen Bildschirmen oder Bildschirmen mit hoher Pixeldichte. Wenn du eine halbtransparente Leiste verwendest, prüfe daher den Kontrast des Textes gegenüber deinem Seiteninhalt. Safari 17 und ältere Versionen wenden variablenbasierte Hintergrundfilter nicht an und zeigen daher die halbtransparente Farbe ohne Unschärfe.
|
||||||
|
:::
|
||||||
|
|
||||||
|
Wenn the nav items don't fit the verfügbar width, they move in the `⋯` menu at the end of the navbar instead of being clipped, starting mit the social links, the appearance switch and the locale switcher, followed by the nav items right-to-left. Its button label can be localized mit [`extraMenuLabel`](../reference/default-theme-config#extramenulabel).
|
||||||
|
|
||||||
|
## Andere Schriftarten verwenden
|
||||||
|
|
||||||
|
VitePress verwendet [Inter](https://rsms.me/inter/) als Standardschriftart und fügt die Schriftarten der Build-Ausgabe hinzu. Die Schriftart wird in der Produktion außerdem automatisch vorab geladen. Das ist möglicherweise nicht erwünscht, wenn du eine andere Hauptschriftart verwenden möchtest.
|
||||||
|
|
||||||
|
To avoid including Inter in the Build-Ausgabe, import the theme von `vitepress/theme-ohne-fonts` instead:
|
||||||
|
|
||||||
|
```js [.vitepress/theme/index.js]
|
||||||
|
import DefaultTheme from 'vitepress/theme-without-fonts'
|
||||||
|
import './my-fonts.css'
|
||||||
|
|
||||||
|
export default DefaultTheme
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* .vitepress/theme/my-fonts.css */
|
||||||
|
:root {
|
||||||
|
--vp-font-family-base: /* normal text font */
|
||||||
|
--vp-font-family-mono: /* code font */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
Wenn du are Verwendung optional components like the [Team Seite](../reference/default-theme-team-page) components, make sure to also import them von `vitepress/theme-ohne-fonts`!
|
||||||
|
:::
|
||||||
|
|
||||||
|
Wenn your font is a local file referenced via `@font-face`, it will be processed as an asset and included under `.vitepress/dist/assets` mit hashed filename. To preload this file, use the [transformHead](../reference/site-config#transformhead) build hook:
|
||||||
|
|
||||||
|
```js [.vitepress/config.js]
|
||||||
|
export default {
|
||||||
|
transformHead({ assets }) {
|
||||||
|
// adjust the regex accordingly to match your font
|
||||||
|
const myFontFile = assets.find(file => /font-name\.[\w-]+\.woff2/.test(file))
|
||||||
|
if (myFontFile) {
|
||||||
|
return [
|
||||||
|
[
|
||||||
|
'link',
|
||||||
|
{
|
||||||
|
rel: 'preload',
|
||||||
|
href: myFontFile,
|
||||||
|
as: 'font',
|
||||||
|
type: 'font/woff2',
|
||||||
|
crossorigin: ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Registering Global Components
|
||||||
|
|
||||||
|
```js [.vitepress/theme/index.js]
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
|
||||||
|
/** @type {import('vitepress').Theme} */
|
||||||
|
export default {
|
||||||
|
extends: DefaultTheme,
|
||||||
|
enhanceApp({ app }) {
|
||||||
|
// register your custom global components
|
||||||
|
app.component('MyGlobalComponent' /* ... */)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Wenn du're Verwendung TypeScript:
|
||||||
|
```ts [.vitepress/theme/index.ts]
|
||||||
|
import type { Theme } from 'vitepress'
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: DefaultTheme,
|
||||||
|
enhanceApp({ app }) {
|
||||||
|
// register your custom global components
|
||||||
|
app.component('MyGlobalComponent' /* ... */)
|
||||||
|
}
|
||||||
|
} satisfies Theme
|
||||||
|
```
|
||||||
|
|
||||||
|
Since we are Verwendung Vite, du kannst außerdem leverage Vite's [glob import feature](https://vite.dev/guide/features.html#glob-import) to auto register a directory of components.
|
||||||
|
|
||||||
|
## Layout Slots
|
||||||
|
|
||||||
|
The Standard-Theme's `<Layout/>` component has a few slots that can be verwendet to inject content at certain locations of die Seite. Here's an example of injecting a component in the bevor outline:
|
||||||
|
|
||||||
|
```js [.vitepress/theme/index.js]
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
import MyLayout from './MyLayout.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: DefaultTheme,
|
||||||
|
// override the Layout with a wrapper component that
|
||||||
|
// injects the slots
|
||||||
|
Layout: MyLayout
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```vue [.vitepress/theme/MyLayout.vue]
|
||||||
|
<script setup>
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
|
||||||
|
const { Layout } = DefaultTheme
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Layout>
|
||||||
|
<template #aside-outline-before>
|
||||||
|
My custom sidebar top content
|
||||||
|
</template>
|
||||||
|
</Layout>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
Or you could use render function as well.
|
||||||
|
|
||||||
|
```js [.vitepress/theme/index.js]
|
||||||
|
import { h } from 'vue'
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
import MyComponent from './MyComponent.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: DefaultTheme,
|
||||||
|
Layout() {
|
||||||
|
return h(DefaultTheme.Layout, null, {
|
||||||
|
'aside-outline-before': () => h(MyComponent)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Full list of slots verfügbar in das Standard-Theme layout:
|
||||||
|
|
||||||
|
- Wenn `layout: 'doc'` (default) is enabled via frontmatter:
|
||||||
|
- `doc-top`
|
||||||
|
- `doc-bottom`
|
||||||
|
- `doc-footer-bevor`
|
||||||
|
- `doc-bevor`
|
||||||
|
- `doc-nach`
|
||||||
|
- `sidebar-nav-bevor`
|
||||||
|
- `sidebar-nav-nach`
|
||||||
|
- `aside-top`
|
||||||
|
- `aside-bottom`
|
||||||
|
- `aside-outline-bevor`
|
||||||
|
- `aside-outline-nach`
|
||||||
|
- `aside-ads-bevor`
|
||||||
|
- `aside-ads-nach`
|
||||||
|
- Wenn `layout: 'home'` is enabled via frontmatter:
|
||||||
|
- `home-hero-bevor`
|
||||||
|
- `home-hero-info-bevor`
|
||||||
|
- `home-hero-info`
|
||||||
|
- `home-hero-info-nach`
|
||||||
|
- `home-hero-actions-bevor-actions`
|
||||||
|
- `home-hero-actions-nach`
|
||||||
|
- `home-hero-image`
|
||||||
|
- `home-hero-nach`
|
||||||
|
- `home-features-bevor`
|
||||||
|
- `home-features-nach`
|
||||||
|
- Wenn `layout: 'page'` is enabled via frontmatter:
|
||||||
|
- `page-top`
|
||||||
|
- `page-bottom`
|
||||||
|
- On not found (404) page:
|
||||||
|
- `not-found`
|
||||||
|
- Always:
|
||||||
|
- `layout-top`
|
||||||
|
- `layout-bottom`
|
||||||
|
- `nav-bar-title-bevor`
|
||||||
|
- `nav-bar-title-nach`
|
||||||
|
- `nav-bar-content-bevor`
|
||||||
|
- `nav-bar-content-nach`
|
||||||
|
- `nav-screen-content-bevor`
|
||||||
|
- `nav-screen-content-nach`
|
||||||
|
|
||||||
|
## Using View Transitions API
|
||||||
|
|
||||||
|
### On Appearance Toggle
|
||||||
|
|
||||||
|
Du kannst extend das Standard-Theme to provide a custom transition wenn the color mode is toggled. An example:
|
||||||
|
|
||||||
|
<<< @/components/AppearanceToggleTransition.vue [.vitepress/theme/Layout.vue]
|
||||||
|
|
||||||
|
Result (**warning!**: flashing colors, sudden movements, bright lights):
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Demo</summary>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
Refer [Chrome Docs](https://developer.chrome.com/docs/web-platform/view-transitions/) von more details on view transitions.
|
||||||
|
|
||||||
|
### On Route Change
|
||||||
|
|
||||||
|
Coming soon.
|
||||||
|
|
||||||
|
## Overriding Internal Components
|
||||||
|
|
||||||
|
Du kannst use Vite's [aliases](https://vite.dev/config/shared-options.html#resolve-alias) to replace Standard-Theme components mit your custom ones:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
vite: {
|
||||||
|
resolve: {
|
||||||
|
alias: [
|
||||||
|
{
|
||||||
|
find: /^.*\/VPNavBar\.vue$/,
|
||||||
|
replacement: fileURLToPath(
|
||||||
|
new URL('./theme/components/CustomNavBar.vue', import.meta.url)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
To know the exact name of the component refer [our source code](https://github.com/vuejs/vitepress/tree/main/src/client/theme-default/components). Since the components are internal, there is a slight chance their name is updated zwischen minor releases.
|
||||||
@ -0,0 +1,207 @@
|
|||||||
|
---
|
||||||
|
description: Starte mit VitePress. Erfahre, wie du deine Dokumentations-Website installierst, einrichtest und mit der Entwicklung beginnst.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Erste Schritte
|
||||||
|
|
||||||
|
## Online ausprobieren
|
||||||
|
|
||||||
|
Du kannst VitePress direkt im Browser auf [StackBlitz](https://vitepress.new).
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
### Voraussetzungen
|
||||||
|
|
||||||
|
- [Node.js](https://nodejs.org/) Version 22 oder höher.
|
||||||
|
- Ein Terminal, um über die Kommandozeilenschnittstelle (CLI) auf VitePress zuzugreifen.
|
||||||
|
- Ein Texteditor mit [Markdown](https://en.wikipedia.org/wiki/Markdown) Syntax-Unterstützung.
|
||||||
|
- [VSCode](https://code.visualstudio.com/) wird zusammen mit der [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
|
||||||
|
|
||||||
|
VitePress kann eigenständig verwendet oder in einem bestehenden Projekt installiert werden. In beiden Fällen kannst du es mit folgendem Befehl installieren:
|
||||||
|
|
||||||
|
::: code-group
|
||||||
|
|
||||||
|
```sh [npm]
|
||||||
|
$ npm add -D vitepress@next
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [pnpm]
|
||||||
|
$ pnpm add -D vitepress@next
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [yarn]
|
||||||
|
$ yarn add -D vitepress@next vue
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [bun]
|
||||||
|
$ bun add -D vitepress@next
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [deno]
|
||||||
|
$ deno add -D vitepress@next
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: tip Hinweis
|
||||||
|
|
||||||
|
VitePress ist ein reines ESM-Paket. Verwende `require()` nicht zum Importieren, es sei denn, `package.json` enthält `"type": "module"`. Alternativ kannst du die Dateiendung relevanter Dateien wie `.vitepress/config.js` in `.mjs`/`.mts` ändern. Weitere Informationen findest du in der [Fehlerbehebung von Vite](http://vite.dev/guide/troubleshooting.html#this-package-is-esm-only). In asynchronen CJS-Kontexten kannst du stattdessen `await import('vitepress')` verwenden.
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Einrichtungsassistent
|
||||||
|
|
||||||
|
VitePress enthält einen Einrichtungsassistenten für die Kommandozeile, der dir beim Erstellen eines grundlegenden Projekts hilft. Starte den Assistenten nach der Installation mit:
|
||||||
|
|
||||||
|
::: code-group
|
||||||
|
|
||||||
|
```sh [npm]
|
||||||
|
$ npx vitepress init
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [pnpm]
|
||||||
|
$ pnpm vitepress init
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [yarn]
|
||||||
|
$ yarn vitepress init
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [bun]
|
||||||
|
$ bun vitepress init
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
Der Assistent stellt dir einige einfache Fragen:
|
||||||
|
|
||||||
|
<<< @/snippets/init.ansi
|
||||||
|
|
||||||
|
::: tip Vue als Peer-Abhängigkeit
|
||||||
|
Wenn du Anpassungen vornehmen möchtest, die Vue-Komponenten oder APIs verwenden, solltest du `vue` zusätzlich ausdrücklich als Abhängigkeit installieren.
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Dateistruktur
|
||||||
|
|
||||||
|
Wenn du eine eigenständige VitePress-Website erstellst, kannst du sie im aktuellen Verzeichnis (`./`). Wenn du VitePress jedoch zusammen mit anderem Quellcode in einem bestehenden Projekt installierst, empfiehlt es sich, die Website in einem Unterverzeichnis (e.g. `./docs`) damit sie vom restlichen Projekt getrennt ist.
|
||||||
|
|
||||||
|
Angenommen, du hast das VitePress-Projekt in `./docs`, Die erzeugte Dateistruktur sollte dann so aussehen:
|
||||||
|
|
||||||
|
```
|
||||||
|
.
|
||||||
|
├─ docs
|
||||||
|
│ ├─ .vitepress
|
||||||
|
│ │ └─ config.js
|
||||||
|
│ ├─ api-examples.md
|
||||||
|
│ ├─ markdown-examples.md
|
||||||
|
│ └─ index.md
|
||||||
|
└─ package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Das Verzeichnis `docs` gilt als **Projektstammverzeichnis** der VitePress-Website. Das Verzeichnis `.vitepress` ist für die VitePress-Konfigurationsdatei, den Cache des Entwicklungsservers, die Build-Ausgabe und optionale Anpassungen des Themes reserviert.
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
Standardmäßig speichert VitePress den Cache des Entwicklungsservers in `.vitepress/cache`, und die Produktionsausgabe in `.vitepress/dist`. Wenn du Git verwendest, solltest du diese Verzeichnisse in deine `.gitignore` aufnehmen. Diese Verzeichnisse können ebenfalls [konfiguriert](../reference/site-config#outdir).
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Die Konfigurationsdatei
|
||||||
|
|
||||||
|
Die Konfigurationsdatei (`.vitepress/config.js`) ermöglicht es dir, verschiedene Aspekte deiner VitePress-Website anzupassen. Zu den grundlegenden Optionen gehören der Titel und die Beschreibung der Website:
|
||||||
|
|
||||||
|
```js [.vitepress/config.js]
|
||||||
|
export default {
|
||||||
|
// Optionen auf Website-Ebene
|
||||||
|
title: 'VitePress',
|
||||||
|
description: 'Just playing around.',
|
||||||
|
|
||||||
|
themeConfig: {
|
||||||
|
// Optionen auf Theme-Ebene
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Du kannst das Verhalten des Themes außerdem über die Option `themeConfig` anpassen. Eine vollständige Übersicht über alle Konfigurationsoptionen findest du in der [Referenz zur Konfiguration](../reference/site-config).
|
||||||
|
|
||||||
|
### Quelldateien
|
||||||
|
|
||||||
|
Markdown-Dateien außerhalb des Verzeichnisses `.vitepress` gelten als **Quelldateien**.
|
||||||
|
|
||||||
|
VitePress verwendet **dateibasierte Routen**: Jede `.md`-Datei wird in eine entsprechende `.html`-Datei mit demselben Pfad kompiliert. Beispielsweise wird `index.md` zu `index.html` und kann über den Stammpfad `/` der daraus erzeugten VitePress-Website aufgerufen werden.
|
||||||
|
|
||||||
|
VitePress bietet außerdem die Möglichkeit, saubere URLs zu erzeugen, Pfade umzuschreiben und Seiten dynamisch zu generieren. Diese Funktionen werden in der [Routing Anleitung](./routing).
|
||||||
|
|
||||||
|
## Loslegen
|
||||||
|
|
||||||
|
Wenn du dies während der Einrichtung zugelassen hast, sollte das Tool außerdem die folgenden npm-Skripte in deine `package.json` einfügen:
|
||||||
|
|
||||||
|
```json [package.json]
|
||||||
|
{
|
||||||
|
...
|
||||||
|
"scripts": {
|
||||||
|
"docs:dev": "vitepress dev docs",
|
||||||
|
"docs:build": "vitepress build docs",
|
||||||
|
"docs:preview": "vitepress preview docs"
|
||||||
|
},
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Das Skript `docs:dev` startet einen lokalen Entwicklungsserver mit sofortigen Hot-Updates. Starte ihn mit folgendem Befehl:
|
||||||
|
|
||||||
|
::: code-group
|
||||||
|
|
||||||
|
```sh [npm]
|
||||||
|
$ npm run docs:dev
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [pnpm]
|
||||||
|
$ pnpm run docs:dev
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [yarn]
|
||||||
|
$ yarn docs:dev
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [bun]
|
||||||
|
$ bun run docs:dev
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
Statt npm-Skripte zu verwenden, kannst du VitePress auch direkt aufrufen:
|
||||||
|
|
||||||
|
::: code-group
|
||||||
|
|
||||||
|
```sh [npm]
|
||||||
|
$ npx vitepress dev docs
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [pnpm]
|
||||||
|
$ pnpm vitepress dev docs
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [yarn]
|
||||||
|
$ yarn vitepress dev docs
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh [bun]
|
||||||
|
$ bun vitepress dev docs
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
Weitere Informationen zur Verwendung der Kommandozeile findest du in der [CLI-Referenz](../reference/cli).
|
||||||
|
|
||||||
|
Der Entwicklungsserver sollte unter `http://localhost:5173` laufen. Öffne die URL in deinem Browser, um deine neue Website zu sehen.
|
||||||
|
|
||||||
|
## Wie geht es weiter?
|
||||||
|
|
||||||
|
- Um besser zu verstehen, wie Markdown-Dateien auf erzeugtes HTML abgebildet werden, fahre mit der [Routing Anleitung](./routing).
|
||||||
|
|
||||||
|
- Um mehr darüber zu erfahren, was du auf einer Seite tun kannst, etwa Markdown-Inhalte schreiben oder Vue-Komponenten verwenden, lies den Abschnitt „Schreiben“ der Anleitung. Ein guter Ausgangspunkt sind die [Markdown Extensions](./markdown).
|
||||||
|
|
||||||
|
- Um die Funktionen des Standard-Dokumentationsthemes kennenzulernen, sieh dir die [Referenz zur Standard-Theme-Konfiguration](../reference/default-theme-config).
|
||||||
|
|
||||||
|
- Wenn du das Erscheinungsbild deiner Website weiter anpassen möchtest, erfahre, wie du entweder [Standard-Theme erweitern](./extending-default-theme) oder [ein eigenes Theme erstellst](./custom-theme).
|
||||||
|
|
||||||
|
- Sobald deine Dokumentations-Website Gestalt annimmt, solltest du die [Bereitstellung Anleitung](./deploy).
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,23 @@
|
|||||||
|
# Migration von VitePress 0.x
|
||||||
|
|
||||||
|
Wenn du von einer VitePress-0.x-Version kommst, gibt es aufgrund neuer Funktionen und Verbesserungen mehrere Änderungen, die nicht abwärtskompatibel sind. Befolge diese Anleitung, um deine Anwendung auf die aktuelle VitePress-Version zu migrieren.
|
||||||
|
|
||||||
|
## App-Konfiguration
|
||||||
|
|
||||||
|
- Die Internationalisierungsfunktion ist noch nicht implementiert.
|
||||||
|
|
||||||
|
## Theme-Konfiguration
|
||||||
|
|
||||||
|
- Die Option `sidebar` hat ihre Struktur geändert.
|
||||||
|
- Der Schlüssel `children` heißt jetzt `items`.
|
||||||
|
- Ein Element der obersten Ebene darf derzeit kein `link` enthalten. Es ist geplant, dies wieder zu ermöglichen.
|
||||||
|
- `repo`, `repoLabel`, `docsDir`, `docsBranch`, `editLinks` und `editLinkText` wurden zugunsten einer flexibleren API entfernt.
|
||||||
|
- Um einen GitHub-Link mit Symbol zur Navigation hinzuzufügen, verwende die Funktion [Soziale Links](../reference/default-theme-nav#navigationslinks).
|
||||||
|
- Um die Funktion „Diese Seite bearbeiten“ hinzuzufügen, verwende die Funktion [Bearbeitungslink](../reference/default-theme-edit-link).
|
||||||
|
- Die Option `lastUpdated` ist jetzt in `config.lastUpdated` und `themeConfig.lastUpdated.text` aufgeteilt.
|
||||||
|
- `carbonAds.carbon` wurde in `carbonAds.code` geändert.
|
||||||
|
|
||||||
|
## Frontmatter-Konfiguration
|
||||||
|
|
||||||
|
- Die Option `home: true` wurde in `layout: home` geändert. Außerdem wurden viele Einstellungen der Startseite angepasst, um zusätzliche Funktionen bereitzustellen. Weitere Informationen findest du in der [Anleitung zur Startseite](../reference/default-theme-home-page).
|
||||||
|
- Die Option `footer` wurde nach [`themeConfig.footer`](../reference/default-theme-config#footer) verschoben.
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
# Migration von VuePress
|
||||||
|
|
||||||
|
## Konfiguration
|
||||||
|
|
||||||
|
### Seitenleiste
|
||||||
|
|
||||||
|
Die Seitenleiste wird nicht mehr automatisch aus dem Frontmatter erzeugt. Du kannst [das Frontmatter selbst auslesen](https://github.com/vuejs/vitepress/issues/572#issuecomment-1170116225), um die Seitenleiste dynamisch zu erzeugen. [Zusätzliche Hilfsfunktionen dafür](https://github.com/vuejs/vitepress/issues/96) könnten in Zukunft bereitgestellt werden.
|
||||||
|
|
||||||
|
## Markdown
|
||||||
|
|
||||||
|
### Bilder
|
||||||
|
|
||||||
|
Anders als VuePress verarbeitet VitePress [`base`](./asset-handling#base-url) aus deiner Konfiguration bei der Verwendung statischer Bilder automatisch.
|
||||||
|
|
||||||
|
Daher kannst du Bilder jetzt ohne ein `img`-Tag rendern.
|
||||||
|
|
||||||
|
```diff
|
||||||
|
- <img :src="$withBase('/foo.png')" alt="foo">
|
||||||
|
+ 
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
Für dynamische Bilder benötigst du weiterhin `withBase`, wie in der [Anleitung zur Basis-URL](./asset-handling#base-url) gezeigt.
|
||||||
|
:::
|
||||||
|
|
||||||
|
Verwende den regulären Ausdruck `<img.*withBase\('(.*)'\).*alt="([^"]*)".*>`, um die entsprechenden Stellen zu finden und durch `` zu ersetzen. So werden alle Bilder in die ``-Syntax umgewandelt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Weitere Inhalte folgen...
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
---
|
||||||
|
description: MPA-Modus (Multi-Page Application) in VitePress für Seiten ohne JavaScript mit besserer anfänglicher Performance.
|
||||||
|
---
|
||||||
|
|
||||||
|
# MPA-Modus <Badge type="warning" text="experimental" />
|
||||||
|
|
||||||
|
Der MPA-Modus (Multi-Page Application) kann über die Kommandozeile mit `vitepress build --mpa` oder über die Konfiguration mit der Option `mpa: true` aktiviert werden.
|
||||||
|
|
||||||
|
Im MPA-Modus werden standardmäßig alle Seiten ohne eingebundenes JavaScript gerendert. Dadurch erreicht die Produktionswebsite bei der ersten Ansicht wahrscheinlich bessere Performance-Werte in Prüfwerkzeugen.
|
||||||
|
|
||||||
|
Da die SPA-Navigation fehlt, führen Links zwischen Seiten jedoch zu vollständigen Seitenneuladungen. Navigationen nach dem Laden fühlen sich im MPA-Modus daher nicht so unmittelbar an wie im SPA-Modus.
|
||||||
|
|
||||||
|
Beachte außerdem, dass „standardmäßig kein JavaScript“ bedeutet, dass Vue im Wesentlichen nur als serverseitige Template-Sprache verwendet wird. Im Browser werden keine Event-Handler registriert, sodass keine Interaktivität vorhanden ist. Um clientseitiges JavaScript zu laden, musst du das spezielle `<script client>`-Tag verwenden:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script client>
|
||||||
|
document.querySelector('h1').addEventListener('click', () => {
|
||||||
|
console.log('client side JavaScript!')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Hello
|
||||||
|
```
|
||||||
|
|
||||||
|
`<script client>` ist eine reine VitePress-Funktion und keine Vue-Funktion. Sie funktioniert sowohl in `.md`- als auch in `.vue`-Dateien, aber nur im MPA-Modus. Client-Skripte aller Theme-Komponenten werden gemeinsam gebündelt, während das Client-Skript einer bestimmten Seite nur für diese Seite aufgeteilt wird.
|
||||||
|
|
||||||
|
Beachte, dass `<script client>` **nicht als Vue-Komponentencode ausgewertet wird**: Es wird als gewöhnliches JavaScript-Modul verarbeitet. Deshalb solltest du den MPA-Modus nur verwenden, wenn deine Website unbedingt minimale clientseitige Interaktivität benötigt.
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
description: Eine sitemap.xml-Datei für deine VitePress-Website zur besseren Auffindbarkeit durch Suchmaschinen.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Sitemap-Generierung
|
||||||
|
|
||||||
|
VitePress unterstützt standardmäßig die Erzeugung einer `sitemap.xml`-Datei für deine Website. Um dies zu aktivieren, füge Folgendes zu deiner `.vitepress/config.js` hinzu:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
sitemap: {
|
||||||
|
hostname: 'https://example.com'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Damit deine `sitemap.xml`-Datei `<lastmod>`-Tags enthält, kannst du die Option [`lastUpdated`](../reference/default-theme-last-updated) aktivieren.
|
||||||
|
|
||||||
|
## Optionen
|
||||||
|
|
||||||
|
Die Sitemap wird durch das [`sitemap`](https://www.npmjs.com/package/sitemap)-Modul unterstützt. Du kannst alle von ihm unterstützten Optionen an die `sitemap`-Option deiner Konfigurationsdatei übergeben. Diese werden direkt an den `SitemapStream`-Konstruktor übergeben. Siehe die [`sitemap`-Dokumentation](https://www.npmjs.com/package/sitemap#options-you-can-pass) für weitere Details. Beispiel:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
sitemap: {
|
||||||
|
hostname: 'https://example.com',
|
||||||
|
lastmodDateOnly: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Wenn du `base` in deiner Konfiguration verwendest, solltest du den Wert an die Option `hostname` anhängen:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
base: '/my-site/',
|
||||||
|
sitemap: {
|
||||||
|
hostname: 'https://example.com/my-site/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## `transformItems` Hook
|
||||||
|
|
||||||
|
Du kannst den `sitemap.transformItems`-Hook verwenden, um die Sitemap-Einträge vor dem Schreiben in die Datei `sitemap.xml` zu verändern. Dieser Hook wird mit einem Array von Sitemap-Einträgen aufgerufen und erwartet, dass ein Array von Sitemap-Einträgen zurückgegeben wird. Beispiel:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
sitemap: {
|
||||||
|
hostname: 'https://example.com',
|
||||||
|
transformItems: (items) => {
|
||||||
|
// Neue Einträge hinzufügen oder vorhandene Einträge ändern/filtern
|
||||||
|
items.push({
|
||||||
|
url: '/extra-page',
|
||||||
|
changefreq: 'monthly',
|
||||||
|
priority: 0.8
|
||||||
|
})
|
||||||
|
return items
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,295 @@
|
|||||||
|
---
|
||||||
|
description: Verwende Vue-Komponenten und dynamische Vorlagen direkt in Markdown-Dateien von VitePress.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Vue in Markdown verwenden
|
||||||
|
|
||||||
|
In VitePress wird jede Markdown-Datei in HTML kompiliert und anschließend als [Vue-Single-File-Komponente](https://vuejs.org/guide/scaling-up/sfc.html) behandelt. Das bedeutet, dass du beliebige Vue-Funktionen innerhalb von Markdown verwenden kannst, einschließlich dynamischer Vorlagen, Vue-Komponenten oder beliebiger Vue-Logik innerhalb der Seite, indem du ein `<script>`-Tag hinzufügst.
|
||||||
|
|
||||||
|
Beachte, dass VitePress den Vue-Compiler verwendet, um die rein statischen Teile des Markdown-Inhalts automatisch zu erkennen und zu optimieren. Statische Inhalte werden zu einzelnen Platzhalterknoten optimiert und bei ersten Besuchen aus der JavaScript-Nutzlast der Seite entfernt. Sie werden auch während der clientseitigen Hydration übersprungen. Kurz gesagt betrifft der zusätzliche Aufwand nur die dynamischen Teile der jeweiligen Seite.
|
||||||
|
|
||||||
|
::: tip SSR-Kompatibilität
|
||||||
|
Jede Verwendung von Vue muss SSR-kompatibel sein. Einzelheiten und gängige Lösungen findest du unter [SSR-Kompatibilität](./ssr-compat).
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Templating
|
||||||
|
|
||||||
|
### Interpolation
|
||||||
|
|
||||||
|
Jede Markdown-Datei wird zunächst in HTML kompiliert und anschließend als Vue-Komponente an die Vite-Prozesspipeline übergeben. Das bedeutet, dass du Vue-Interpolation in Text verwenden kannst:
|
||||||
|
|
||||||
|
**Input**
|
||||||
|
|
||||||
|
```md
|
||||||
|
{{ 1 + 1 }}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ausgabe**
|
||||||
|
|
||||||
|
<div class="language-text"><pre><code>{{ 1 + 1 }}</code></pre></div>
|
||||||
|
|
||||||
|
### Directives
|
||||||
|
|
||||||
|
Direktiven funktionieren ebenfalls (beachte, dass rohes HTML absichtlich auch in Markdown gültig ist):
|
||||||
|
|
||||||
|
**Input**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span v-for="i in 3">{{ i }}</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ausgabe**
|
||||||
|
|
||||||
|
<div class="language-text"><pre><code><span v-for="i in 3">{{ i }} </span></code></pre></div>
|
||||||
|
|
||||||
|
## `<script>` und `<style>`
|
||||||
|
|
||||||
|
Auf oberster Ebene verwendete `<script>`- und `<style>`-Tags in Markdown-Dateien funktionieren genauso wie in Vue-SFCs, einschließlich `<script setup>`, `<style module>` usw. Der wichtigste Unterschied besteht darin, dass es kein `<Vorlage>`-Tag gibt: Alle anderen Inhalte auf oberster Ebene sind Markdown. Beachte außerdem, dass alle Tags **nach** dem Frontmatter stehen sollten:
|
||||||
|
|
||||||
|
```html
|
||||||
|
---
|
||||||
|
hello: world
|
||||||
|
---
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const count = ref(0)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
## Markdown-Inhalt
|
||||||
|
|
||||||
|
Die Anzahl beträgt: {{ count }}
|
||||||
|
|
||||||
|
<button :class="$style.button" @click="count++">Increment</button>
|
||||||
|
|
||||||
|
<style module>
|
||||||
|
.button {
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning Avoid `<style scoped>` in Markdown
|
||||||
|
Bei Verwendung in Markdown erfordert `<style scoped>` das Hinzufügen spezieller Attribute zu jedem Element der aktuellen Seite, wodurch die Seitengröße erheblich zunimmt. `<style module>` wird bevorzugt, wenn eine lokal begrenzte Gestaltung auf einer Seite benötigt wird.
|
||||||
|
:::
|
||||||
|
|
||||||
|
Du hast außerdem Zugriff auf VitePress' Laufzeit-APIs wie den [`useData`-Helper](../reference/runtime-api#usedata), der Zugriff auf die Metadaten der aktuellen Seite bereitstellt:
|
||||||
|
|
||||||
|
**Input**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script setup>
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
const { page } = useData()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<pre>{{ page }}</pre>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ausgabe**
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"path": "/using-vue.html",
|
||||||
|
"title": "Vue in Markdown verwenden",
|
||||||
|
"frontmatter": {},
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Komponenten verwenden
|
||||||
|
|
||||||
|
Du kannst Vue-Komponenten direkt in Markdown-Dateien importieren und verwenden.
|
||||||
|
|
||||||
|
### Importing in Markdown
|
||||||
|
|
||||||
|
Wenn eine Komponente nur auf wenigen Seiten verwendet wird, empfiehlt es sich, sie dort explizit zu importieren, wo sie verwendet wird. Dadurch kann sie korrekt aufgeteilt und nur geladen werden, wenn die entsprechenden Seiten angezeigt werden:
|
||||||
|
|
||||||
|
```md
|
||||||
|
<script setup>
|
||||||
|
import CustomComponent from '../components/CustomComponent.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Docs
|
||||||
|
|
||||||
|
Dies ist eine .md-Datei, die eine benutzerdefinierte Komponente verwendet
|
||||||
|
|
||||||
|
<CustomComponent />
|
||||||
|
|
||||||
|
## Weitere Dokumentation
|
||||||
|
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
### Komponenten global registrieren
|
||||||
|
|
||||||
|
Wenn eine Komponente auf den meisten Seiten verwendet werden soll, kann sie durch Anpassen der Vue-App-Instanz global registriert werden. Siehe den entsprechenden Abschnitt unter [Standard-Theme erweitern](./extending-default-theme#registering-global-Komponenten) für ein Beispiel.
|
||||||
|
|
||||||
|
::: warning IMPORTANT
|
||||||
|
Stelle sicher, dass der Name einer benutzerdefinierten Komponente entweder einen Bindestrich enthält oder in PascalCase geschrieben ist. Andernfalls wird sie als Inline-Element behandelt und in ein `<p>`-Tag eingeschlossen, was zu einer Abweichung bei der Hydration führt, da `<p>` keine Block-Elemente enthalten darf.
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Komponenten verwenden In Headers <ComponentInHeader />
|
||||||
|
|
||||||
|
Du kannst Vue-Komponenten in Überschriften verwenden, beachte jedoch den Unterschied zwischen den folgenden Syntaxvarianten:
|
||||||
|
|
||||||
|
| Markdown | Ausgabe HTML | Parsed Header |
|
||||||
|
| ------------------------------------------------------- | ----------------------------------------- | ------------- |
|
||||||
|
| <pre v-pre><code> # text <Tag/> </code></pre> | `<h1>text <Tag/></h1>` | `text` |
|
||||||
|
| <pre v-pre><code> # text \`<Tag/>\` </code></pre> | `<h1>text <code><Tag/></code></h1>` | `text <Tag/>` |
|
||||||
|
|
||||||
|
Das von `<code>` umschlossene HTML wird unverändert angezeigt; nur HTML, das **nicht** umschlossen ist, wird von Vue analysiert.
|
||||||
|
|
||||||
|
::: tip
|
||||||
|
Das Ausgabe-HTML wird von [Markdown-it](https://github.com/Markdown-it/Markdown-it) erzeugt, während die analysierten Überschriften von VitePress verarbeitet werden (und sowohl für die Seitenleiste als auch für den Dokumenttitel verwendet werden).
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
## Maskierung
|
||||||
|
|
||||||
|
Du kannst Vue-Interpolationen umgehen, indem du sie in ein `<span>` oder ein anderes Element mit der Direktive `v-pre` einschließt:
|
||||||
|
|
||||||
|
**Input**
|
||||||
|
|
||||||
|
```md
|
||||||
|
Dies <span v-pre>{{ wird unverändert angezeigt }}</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ausgabe**
|
||||||
|
|
||||||
|
<div class="escape-demo">
|
||||||
|
<p>Dies <span v-pre>{{ wird unverändert angezeigt }}</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Alternativ kannst du den gesamten Absatz in einen benutzerdefinierten `v-pre`-Container einschließen:
|
||||||
|
|
||||||
|
```md
|
||||||
|
::: v-pre
|
||||||
|
{{ Dies wird unverändert angezeigt }}
|
||||||
|
:::
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ausgabe**
|
||||||
|
|
||||||
|
<div class="escape-demo">
|
||||||
|
|
||||||
|
::: v-pre
|
||||||
|
{{ Dies wird unverändert angezeigt }}
|
||||||
|
:::
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Maskierung in Codeblöcken aufheben
|
||||||
|
|
||||||
|
Standardmäßig werden alle abgegrenzten Codeblöcke automatisch mit `v-pre` umschlossen, sodass darin keine Vue-Syntax verarbeitet wird. Um Vue-Interpolation innerhalb solcher Blöcke zu aktivieren, kannst du die Sprache mit dem Suffix `-vue` versehen, z. B. `js-vue`:
|
||||||
|
|
||||||
|
**Input**
|
||||||
|
|
||||||
|
````md
|
||||||
|
```js-vue
|
||||||
|
Hello {{ 1 + 1 }}
|
||||||
|
```
|
||||||
|
````
|
||||||
|
|
||||||
|
**Ausgabe**
|
||||||
|
|
||||||
|
```js-vue
|
||||||
|
Hello {{ 1 + 1 }}
|
||||||
|
```
|
||||||
|
|
||||||
|
Beachte, dass dies verhindern kann, dass bestimmte Token korrekt hervorgehoben werden.
|
||||||
|
|
||||||
|
## CSS-Präprozessoren verwenden
|
||||||
|
|
||||||
|
VitePress bietet [integrierte Unterstützung](https://vite.dev/guide/features.html#css-pre-processors) für CSS-Präprozessoren: Dateien mit `.scss`, `.sass`, `.less`, `.styl` und `.stylus`. Dafür müssen keine Vite-spezifischen Plugins installiert werden, aber der jeweilige Präprozessor selbst muss installiert sein:
|
||||||
|
|
||||||
|
```
|
||||||
|
# .scss und .sass
|
||||||
|
npm install -D sass
|
||||||
|
|
||||||
|
# .less
|
||||||
|
npm install -D less
|
||||||
|
|
||||||
|
# .styl und .stylus
|
||||||
|
npm install -D stylus
|
||||||
|
```
|
||||||
|
|
||||||
|
Then you can use the following in Markdown and theme Komponenten:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<style lang="sass">
|
||||||
|
.title
|
||||||
|
font-size: 20px
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Teleports verwenden
|
||||||
|
|
||||||
|
VitePress currently has SSG support for teleports to body only. For other targets, kannst du sie in die integrierte `<ClientOnly>` Komponente or inject the teleport markup into the correct location in your final page HTML through [`postRender` hook](../reference/site-config#postrender).
|
||||||
|
|
||||||
|
<ModalDemo />
|
||||||
|
|
||||||
|
::: details
|
||||||
|
<<< @/Komponenten/ModalDemo.vue
|
||||||
|
:::
|
||||||
|
|
||||||
|
```md
|
||||||
|
<ClientOnly>
|
||||||
|
<Teleport to="#modal">
|
||||||
|
<div>
|
||||||
|
// ...
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
|
</ClientOnly>
|
||||||
|
```
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import ModalDemo from '../../Komponenten/ModalDemo.vue'
|
||||||
|
import ComponentInHeader from '../../Komponenten/ComponentInHeader.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.escape-demo {
|
||||||
|
border: 1px solid var(--vp-c-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
## VS-Code-IntelliSense-Unterstützung
|
||||||
|
|
||||||
|
<!-- Based on https://github.com/vuejs/language-tools/pull/4321 -->
|
||||||
|
|
||||||
|
Vue stellt bereit IntelliSense support out of the box via the [Vue - Official VS Code plugin](https://marketplace.visualstudio.com/items?itemName=Vue.volar). However, to enable it for `.md` files, you need to make some adjustments to the configuration files.
|
||||||
|
|
||||||
|
|
||||||
|
1. Add `.md` pattern to the `include` and `vueCompilerOptions.vitePressExtensions` options in the tsconfig/jsconfig file:
|
||||||
|
|
||||||
|
::: code-group
|
||||||
|
```json [tsconfig.json]
|
||||||
|
{
|
||||||
|
"include": [
|
||||||
|
"docs/**/*.ts",
|
||||||
|
"docs/**/*.vue",
|
||||||
|
"docs/**/*.md",
|
||||||
|
],
|
||||||
|
"vueCompilerOptions": {
|
||||||
|
"vitePressExtensions": [".md"],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
2. Add `markdown` to the `vue.server.includeLanguages` option in the VS Code setting:
|
||||||
|
|
||||||
|
::: code-group
|
||||||
|
```json [.vscode/settings.json]
|
||||||
|
{
|
||||||
|
"vue.server.includeLanguages": ["vue", "markdown"]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
:::
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
description: Ein statischer Website-Generator zum Erstellen schneller, inhaltsorientierter Websites auf Basis von Vite und Vue.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Was ist VitePress?
|
||||||
|
|
||||||
|
VitePress ist ein [statischer Website-Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) zum Erstellen schneller, inhaltsorientierter Websites. Kurz gesagt nimmt VitePress deine in [Markdown](https://en.wikipedia.org/wiki/Markdown), geschriebenen Inhalte, wendet ein Theme darauf an und erzeugt statische HTML-Seiten, die sich nahezu überall bereitstellen lassen.
|
||||||
|
|
||||||
|
::: tip {no-title}
|
||||||
|
Du möchtest es einfach ausprobieren? Springe direkt zum [Schnellstart](./getting-started).
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Anwendungsfälle
|
||||||
|
|
||||||
|
- **Dokumentation**
|
||||||
|
|
||||||
|
VitePress enthält ein Standard-Theme für technische Dokumentation. Es wird für diese Seite und unter anderem für die Dokumentation von [Vite](https://vite.dev/), [Rollup](https://rollupjs.org/), [Pinia](https://pinia.vuejs.org/), [VueUse](https://vueuse.org/), [Vitest](https://vitest.dev/), [D3](https://d3js.org/), [UnoCSS](https://unocss.dev/), [Iconify](https://iconify.design/) und [viele weitere](https://github.com/search?q=/%22vitepress%22:+/+path:/(?:package%7Cdeno)%5C.jsonc?$/+NOT+is:fork+NOT+is:archived&type=code).
|
||||||
|
|
||||||
|
Die [offizielle Vue.js-Dokumentation](https://vuejs.org/) basiert ebenfalls auf VitePress, verwendet jedoch ein eigenes Theme, das von mehreren Übersetzungen gemeinsam genutzt wird.
|
||||||
|
|
||||||
|
- **Blogs, Portfolios und Marketing-Websites**
|
||||||
|
|
||||||
|
VitePress unterstützt [vollständig angepasste Themes](./custom-theme) mit der Entwicklererfahrung einer normalen Vite- und Vue-Anwendung. Da Vite die Grundlage bildet, kannst du außerdem direkt auf Vite-Plugins aus dessen umfangreichem Ökosystem zurückgreifen. Zusätzlich bietet VitePress flexible APIs zum [Daten laden](./data-loading) (lokal oder entfernt) und [dynamische Routen erzeugen](./routing#dynamic-routes). Damit kannst du nahezu alles erstellen, solange die benötigten Daten zur Erstellungszeit bestimmt werden können.
|
||||||
|
|
||||||
|
Der offizielle [Vue.js-Blog](https://blog.vuejs.org/) ist ein einfacher Blog, der seine Indexseite auf Grundlage lokaler Inhalte erzeugt.
|
||||||
|
|
||||||
|
## Entwicklererfahrung
|
||||||
|
|
||||||
|
VitePress möchte eine hervorragende Developer Experience (DX) bei der Arbeit mit Markdown-Inhalten bieten.
|
||||||
|
|
||||||
|
- **[Vite-Powered:](https://vite.dev/)** sofortiger Serverstart, wobei Änderungen ohne Neuladen der Seite unmittelbar (<100 ms) sichtbar werden.
|
||||||
|
|
||||||
|
- **[Integrierte Markdown-Erweiterungen:](./markdown)** Frontmatter, Tabellen, Syntaxhervorhebung und vieles mehr. VitePress bietet insbesondere zahlreiche fortgeschrittene Funktionen für die Arbeit mit Codeblöcken und eignet sich dadurch besonders für hochtechnische Dokumentation.
|
||||||
|
|
||||||
|
- **[Vue-erweitertes Markdown:](./using-vue)** Jede Markdown-Seite ist dank der 100%igen Syntaxkompatibilität von Vue-Templates mit HTML auch eine Vue-[Single-File-Komponente](https://vuejs.org/guide/scaling-up/sfc.html). Du kannst mithilfe von Vue-Template-Funktionen oder importierten Vue-Komponenten Interaktivität in deine statischen Inhalte einbetten.
|
||||||
|
|
||||||
|
## Leistung
|
||||||
|
|
||||||
|
Anders als bei vielen herkömmlichen SSGs, bei denen jede Navigation ein vollständiges Neuladen der Seite auslöst, liefert eine mit VitePress erzeugte Website beim ersten Besuch statisches HTML aus und wird bei weiterer Navigation innerhalb der Website zu einer [Single-Page-Anwendung](https://en.wikipedia.org/wiki/Single-page_application) (SPA). Dieses Modell bietet unserer Ansicht nach ein ausgewogenes Verhältnis zwischen Leistung und Benutzerfreundlichkeit:
|
||||||
|
|
||||||
|
- **Schnelles erstes Laden**
|
||||||
|
|
||||||
|
Beim ersten Aufruf einer beliebigen Seite wird statisches, vorgerendertes HTML ausgeliefert, um schnelle Ladezeiten und optimale SEO zu ermöglichen. Anschließend lädt die Seite ein JavaScript-Bundle, das die Seite in eine Vue-SPA („Hydration“) umwandelt. Entgegen der verbreiteten Annahme, dass die Hydration von SPAs langsam sei, ist dieser Vorgang dank der hohen Leistung von Vue 3 und der Compiler-Optimierungen sehr schnell. Auf [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F) erreichen typische VitePress-Websites selbst auf leistungsschwachen Mobilgeräten mit langsamer Verbindung nahezu perfekte Leistungswerte.
|
||||||
|
|
||||||
|
- **Schnelle Navigation nach dem Laden**
|
||||||
|
|
||||||
|
Noch wichtiger ist, dass das SPA-Modell **nach** dem ersten Laden zu einer besseren Benutzererfahrung führt. Bei der weiteren Navigation innerhalb der Website wird die Seite nicht mehr vollständig neu geladen. Stattdessen wird der Inhalt der Zielseite abgerufen und dynamisch aktualisiert. VitePress lädt außerdem automatisch Seitenabschnitte für Links vor, die sich im sichtbaren Bereich befinden. In den meisten Fällen fühlt sich die Navigation nach dem Laden sofort an.
|
||||||
|
|
||||||
|
- **Interaktivität ohne Nachteile**
|
||||||
|
|
||||||
|
Damit die in statisches Markdown eingebetteten dynamischen Vue-Teile hydratisiert werden können, wird jede Markdown-Seite als Vue-Komponente verarbeitet und in JavaScript kompiliert. Das mag ineffizient klingen, aber der Vue-Compiler kann statische und dynamische Teile voneinander trennen und dadurch sowohl die Kosten der Hydration als auch die Größe der Nutzlast minimieren. Beim ersten Laden der Seite werden die statischen Teile automatisch aus der JavaScript-Nutzlast entfernt und während der Hydration übersprungen.
|
||||||
|
|
||||||
|
## Und was ist mit VuePress?
|
||||||
|
|
||||||
|
VitePress ist der Nachfolger von VuePress 1. Das ursprüngliche VuePress 1 basierte auf Vue 2 und webpack. Mit Vue 3 und Vite im Hintergrund bietet VitePress eine deutlich bessere Entwicklererfahrung, bessere Leistung in der Produktion, ein ausgereifteres Standard-Theme und eine flexiblere API zur Anpassung.
|
||||||
|
|
||||||
|
Die API-Unterschiede zwischen VitePress und VuePress 1 liegen hauptsächlich beim Theming und bei der Anpassung. Wenn du VuePress 1 mit dem Standard-Theme verwendest, sollte die Migration zu VitePress relativ unkompliziert sein.
|
||||||
|
|
||||||
|
Die parallele Pflege zweier SSGs ist langfristig nicht sinnvoll. Daher hat das Vue-Team beschlossen, sich langfristig auf VitePress als empfohlenes SSG zu konzentrieren. VuePress 1 ist inzwischen veraltet, und VuePress 2 wurde zur weiteren Entwicklung und Pflege an das VuePress-Community-Team übergeben.
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
---
|
||||||
|
description: VitePress ist ein auf Vite und Vue basierender Generator für statische Websites, mit dem du aus Markdown ansprechende Dokumentationen erstellen kannst.
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: VitePress
|
||||||
|
text: Generator für statische Websites mit Vite & Vue
|
||||||
|
tagline: Von Markdown zu ansprechender Dokumentation in wenigen Minuten
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: Was ist VitePress?
|
||||||
|
link: ./guide/what-is-vitepress
|
||||||
|
- theme: alt
|
||||||
|
text: Schnellstart
|
||||||
|
link: ./guide/getting-started
|
||||||
|
- theme: alt
|
||||||
|
text: GitHub
|
||||||
|
link: https://github.com/vuejs/vitepress
|
||||||
|
image:
|
||||||
|
src: /vitepress-logo-large.svg
|
||||||
|
alt: VitePress
|
||||||
|
|
||||||
|
features:
|
||||||
|
- icon: <span class="memo"></span>
|
||||||
|
title: Konzentriere dich auf deine Inhalte
|
||||||
|
details: Erstelle mühelos ansprechende Dokumentationsseiten mit einfachem Markdown.
|
||||||
|
- icon: <span class="vite"></span>
|
||||||
|
title: Die Vite-DX nutzen
|
||||||
|
details: Sofortiger Serverstart, blitzschnelle Hot-Updates und Zugriff auf Plugins aus dem Vite-Ökosystem.
|
||||||
|
- icon: <span class="vue"></span>
|
||||||
|
title: Mit Vue anpassen
|
||||||
|
details: Verwende Vue-Syntax und -Komponenten direkt in Markdown oder erstelle eigene Themes mit Vue.
|
||||||
|
- icon: <span class="rocket"></span>
|
||||||
|
title: Schnelle Websites ausliefern
|
||||||
|
details: Schneller initialer Ladevorgang mit statischem HTML und schnelle Navigation nach dem Laden dank clientseitigem Routing.
|
||||||
|
---
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
---
|
||||||
|
description: Referenz der VitePress-CLI-Befehle einschließlich dev, build, preview und init.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Kommandozeilenschnittstelle
|
||||||
|
|
||||||
|
## `vitepress dev`
|
||||||
|
|
||||||
|
Starte den VitePress-Entwicklungsserver mit dem angegebenen Verzeichnis als Stammverzeichnis. Standardmäßig wird das aktuelle Verzeichnis verwendet. Der Befehl `dev` kann beim Ausführen im aktuellen Verzeichnis weggelassen werden.
|
||||||
|
|
||||||
|
### Verwendung
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# Start im aktuellen Verzeichnis, wobei `dev` weggelassen wird
|
||||||
|
vitepress
|
||||||
|
|
||||||
|
# Start in einem Unterverzeichnis
|
||||||
|
vitepress dev [root]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Optionen
|
||||||
|
|
||||||
|
| Option | Beschreibung |
|
||||||
|
| --------------- | ----------------------------------------------------------------- |
|
||||||
|
| `--open [path]` | Browser beim Start öffnen (`boolean \| string`) |
|
||||||
|
| `--port <port>` | Port festlegen (`number`) |
|
||||||
|
| `--base <path>` | Öffentlicher Basispfad (Standard: `/`) (`string`) |
|
||||||
|
| `--cors` | CORS aktivieren |
|
||||||
|
| `--strictPort` | Beenden, wenn der angegebene Port bereits verwendet wird (`boolean`) |
|
||||||
|
| `--force` | Optimierer zwingen, den Cache zu ignorieren und erneut zu bündeln (`boolean`) |
|
||||||
|
|
||||||
|
## `vitepress build`
|
||||||
|
|
||||||
|
VitePress-Website für die Produktion erstellen.
|
||||||
|
|
||||||
|
### Verwendung
|
||||||
|
|
||||||
|
```sh
|
||||||
|
vitepress build [root]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Optionen
|
||||||
|
|
||||||
|
| Option | Beschreibung |
|
||||||
|
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||||
|
| `--mpa` (experimentell) | Im [MPA-Modus erstellen](../guide/mpa-mode) ohne clientseitige Hydration (`boolean`) |
|
||||||
|
| `--base <path>` | Öffentlicher Basispfad (Standard: `/`) (`string`) |
|
||||||
|
| `--assetsBase <url>` | URL-Präfix, von dem die erzeugten Assets ausgeliefert werden, z. B. ein CDN (`string`) |
|
||||||
|
| `--target <target>` | Transpilierungsziel (Standard: `"modules"`) (`string`) |
|
||||||
|
| `--outDir <dir>` | Ausgabeverzeichnis relativ zu **cwd** (Standard: `<root>/.vitepress/dist`) (`string`) |
|
||||||
|
| `--assetsInlineLimit <number>` | Grenzwert für das Base64-Einbetten statischer Assets in Byte (Standard: `4096`) (`number`) |
|
||||||
|
|
||||||
|
## `vitepress preview`
|
||||||
|
|
||||||
|
Produktions-Build lokal in der Vorschau anzeigen.
|
||||||
|
|
||||||
|
### Verwendung
|
||||||
|
|
||||||
|
```sh
|
||||||
|
vitepress preview [root]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Optionen
|
||||||
|
|
||||||
|
| Option | Beschreibung |
|
||||||
|
| --------------- | ------------------------------------------ |
|
||||||
|
| `--base <path>` | Öffentlicher Basispfad (Standard: `/`) (`string`) |
|
||||||
|
| `--assetsBase <url>` | URL-Präfix, von dem die erzeugten Assets ausgeliefert werden, z. B. ein CDN (`string`) |
|
||||||
|
| `--port <port>` | Port festlegen (`number`) |
|
||||||
|
|
||||||
|
## `vitepress init`
|
||||||
|
|
||||||
|
Starte den [Einrichtungsassistenten](../guide/getting-started#setup-wizard) im aktuellen Verzeichnis.
|
||||||
|
|
||||||
|
### Verwendung
|
||||||
|
|
||||||
|
```sh
|
||||||
|
vitepress init
|
||||||
|
```
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
---
|
||||||
|
description: Verwende die Badge-Komponente, um Statusbezeichnungen zu Überschriften in der VitePress-Dokumentation hinzuzufügen.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Badge
|
||||||
|
|
||||||
|
Mit dem Badge kannst du deinen Überschriften einen Status hinzufügen. Zum Beispiel kann damit der Typ eines Abschnitts oder die unterstützte Version angegeben werden.
|
||||||
|
|
||||||
|
## Verwendung
|
||||||
|
|
||||||
|
Du kannst die global verfügbare `Badge`-Komponente verwenden.
|
||||||
|
|
||||||
|
```html
|
||||||
|
### Titel <Badge type="info" text="default" />
|
||||||
|
### Titel <Badge type="tip" text="^1.9.0" />
|
||||||
|
### Titel <Badge type="warning" text="beta" />
|
||||||
|
### Titel <Badge type="danger" text="deprecated" />
|
||||||
|
```
|
||||||
|
|
||||||
|
Der obige Code wird folgendermaßen dargestellt:
|
||||||
|
|
||||||
|
### Titel <Badge type="info" text="Standard" />
|
||||||
|
### Titel <Badge type="tip" text="^1.9.0" />
|
||||||
|
### Titel <Badge type="warning" text="beta" />
|
||||||
|
### Titel <Badge type="danger" text="deprecated" />
|
||||||
|
|
||||||
|
## Eigenes Children
|
||||||
|
|
||||||
|
`<Badge>` akzeptiert `children`, die im Badge angezeigt werden.
|
||||||
|
|
||||||
|
```html
|
||||||
|
### Titel <Badge type="info">benutzerdefiniertes Element</Badge>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Titel <Badge type="info">benutzerdefiniertes Element</Badge>
|
||||||
|
|
||||||
|
## Farbe und Typ anpassen
|
||||||
|
|
||||||
|
Du kannst das Erscheinungsbild der Badges durch Überschreiben der CSS-Variablen anpassen. Die folgenden Werte sind die Standardwerte:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--vp-badge-info-border: transparent;
|
||||||
|
--vp-badge-info-text: var(--vp-c-text-2);
|
||||||
|
--vp-badge-info-bg: var(--vp-c-default-soft);
|
||||||
|
|
||||||
|
--vp-badge-note-border: transparent;
|
||||||
|
--vp-badge-note-text: var(--vp-c-note-1);
|
||||||
|
--vp-badge-note-bg: var(--vp-c-note-soft);
|
||||||
|
|
||||||
|
--vp-badge-tip-border: transparent;
|
||||||
|
--vp-badge-tip-text: var(--vp-c-tip-1);
|
||||||
|
--vp-badge-tip-bg: var(--vp-c-tip-soft);
|
||||||
|
|
||||||
|
--vp-badge-important-border: transparent;
|
||||||
|
--vp-badge-important-text: var(--vp-c-important-1);
|
||||||
|
--vp-badge-important-bg: var(--vp-c-important-soft);
|
||||||
|
|
||||||
|
--vp-badge-caution-border: transparent;
|
||||||
|
--vp-badge-caution-text: var(--vp-c-caution-1);
|
||||||
|
--vp-badge-caution-bg: var(--vp-c-caution-soft);
|
||||||
|
|
||||||
|
--vp-badge-warning-border: transparent;
|
||||||
|
--vp-badge-warning-text: var(--vp-c-warning-1);
|
||||||
|
--vp-badge-warning-bg: var(--vp-c-warning-soft);
|
||||||
|
|
||||||
|
--vp-badge-danger-border: transparent;
|
||||||
|
--vp-badge-danger-text: var(--vp-c-danger-1);
|
||||||
|
--vp-badge-danger-bg: var(--vp-c-danger-soft);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## `<Badge>`
|
||||||
|
|
||||||
|
Die Komponente `<Badge>` akzeptiert die folgenden Props:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface Props {
|
||||||
|
// Wenn `<slot>` übergeben wird, wird dieser Wert ignoriert.
|
||||||
|
text?: string
|
||||||
|
|
||||||
|
// Defaults to `tip`. Matches markdown containers/alerts colors.
|
||||||
|
type?: 'info' | 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'danger'
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
description: Integriere Carbon Ads mithilfe der integrierten Unterstützung des Standard-Themes in deine VitePress-Website.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Carbon Ads
|
||||||
|
|
||||||
|
VitePress bietet integrierte Unterstützung für [Carbon Ads](https://www.carbonads.net/). Wenn du die Carbon-Ads-Zugangsdaten in der Konfiguration definierst, zeigt VitePress Anzeigen auf der Seite an.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
carbonAds: {
|
||||||
|
code: 'your-carbon-code',
|
||||||
|
placement: 'your-carbon-placement',
|
||||||
|
format: 'classic'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Diese Werte werden verwendet, um das Carbon-CDN-Skript wie unten gezeigt aufzurufen.
|
||||||
|
|
||||||
|
Die Option `format` unterstützt `classic`, `responsive` und `cover`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
`//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}&format=${format}`
|
||||||
|
```
|
||||||
|
|
||||||
|
Weitere Informationen zur Konfiguration von Carbon Ads findest du auf der [Carbon-Ads-Website](https://www.carbonads.net/).
|
||||||
@ -0,0 +1,552 @@
|
|||||||
|
---
|
||||||
|
description: Referenz aller für das VitePress-Standard-Theme verfügbaren Konfigurationsoptionen.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Konfiguration des Standard-Themes
|
||||||
|
|
||||||
|
Mit der Theme-Konfiguration kannst du dein Theme anpassen. Du kannst sie über die Option `themeConfig` in der Konfigurationsdatei definieren:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'VitePress',
|
||||||
|
description: 'Statischer Website-Generator auf Basis von Vite und Vue.',
|
||||||
|
|
||||||
|
// Konfigurationsoptionen für das Theme.
|
||||||
|
themeConfig: {
|
||||||
|
logo: '/logo.svg',
|
||||||
|
nav: [...],
|
||||||
|
sidebar: { ... }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Die auf dieser Seite dokumentierten Optionen gelten nur für das Standard-Theme.** Andere Themes erwarten eine andere Theme-Konfiguration. Bei Verwendung eines eigenen Themes wird das Theme-Konfigurationsobjekt an das Theme übergeben, damit es davon abhängiges Verhalten definieren kann.
|
||||||
|
|
||||||
|
## i18nRouting
|
||||||
|
|
||||||
|
- Type: `boolean | ((data: VitePressData<DefaultTheme.Config>, route: Route, targetLocale: string) => string)`
|
||||||
|
|
||||||
|
Wenn du die Sprache beispielsweise auf `zh` änderst, ändert sich die URL von `/foo` (oder `/en/foo/`) zu `/zh/foo`. Du kannst dieses Verhalten deaktivieren, indem du `themeConfig.i18nRouting` auf `false` setzt.
|
||||||
|
|
||||||
|
Setze `themeConfig.i18nRouting` auf eine Funktion, um den Sprachlink anzupassen. Die Funktion erhält die aktuellen VitePress-Daten, die aktuelle Route und den Schlüssel der Zielsprache und gibt den Ziellink zurück.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
themeConfig: {
|
||||||
|
i18nRouting(data, route, targetLocale) {
|
||||||
|
const target = data.site.value.locales[targetLocale]
|
||||||
|
const targetLink =
|
||||||
|
target.link || (targetLocale === 'root' ? '/' : `/${targetLocale}/`)
|
||||||
|
|
||||||
|
return `${targetLink}${route.data.relativePath.replace(/\.md$/, '')}${route.hash}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## logo
|
||||||
|
|
||||||
|
- Type: `ThemeableImage`
|
||||||
|
|
||||||
|
Logo-Datei, die in der Navigationsleiste direkt vor dem Seitentitel angezeigt wird. Akzeptiert eine Pfadzeichenkette oder ein Objekt, um unterschiedliche Logos für den Hell-/Dunkelmodus festzulegen.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
logo: '/logo.svg'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
type ThemeableImage =
|
||||||
|
| string
|
||||||
|
| { src: string; alt?: string }
|
||||||
|
| { light: string; dark: string; alt?: string }
|
||||||
|
```
|
||||||
|
|
||||||
|
## siteTitle
|
||||||
|
|
||||||
|
- Type: `string | false`
|
||||||
|
|
||||||
|
Du kannst dieses Element anpassen, um den Standard-Seitentitel (`title` in der App-Konfiguration) in der Navigation zu ersetzen. Bei `false` wird der Titel in der Navigation deaktiviert. Dies ist nützlich, wenn dein `logo` den Seitentitel bereits enthält.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
siteTitle: 'Hello World'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## nav
|
||||||
|
|
||||||
|
- Type: `NavItem`
|
||||||
|
|
||||||
|
Die Konfiguration für einen Navigationseintrag. Weitere Details findest du unter [Standard-Theme: Navigation](./Standard-theme-nav#navigation-links).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
{ text: 'Anleitung', link: '/guide' },
|
||||||
|
{
|
||||||
|
text: 'Dropdown-Menü',
|
||||||
|
items: [
|
||||||
|
{ text: 'Eintrag A', link: '/item-1' },
|
||||||
|
{ text: 'Eintrag B', link: '/item-2' },
|
||||||
|
{ text: 'Eintrag C', link: '/item-3' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
type NavItem = NavItemWithLink | NavItemWithChildren
|
||||||
|
|
||||||
|
interface NavItemWithLink {
|
||||||
|
text: string
|
||||||
|
link: string | ((payload: PageData) => string)
|
||||||
|
activeMatch?: string
|
||||||
|
target?: string
|
||||||
|
rel?: string
|
||||||
|
noIcon?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NavItemChildren {
|
||||||
|
text?: string
|
||||||
|
items: NavItemWithLink[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NavItemWithChildren {
|
||||||
|
text?: string
|
||||||
|
items: (NavItemChildren | NavItemWithLink)[]
|
||||||
|
activeMatch?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## sidebar
|
||||||
|
|
||||||
|
- Type: `Sidebar`
|
||||||
|
|
||||||
|
Die Konfiguration für einen Seitenleisteneintrag. Weitere Details findest du unter [Standard-Theme: Seitenleiste](./Standard-theme-sidebar).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: 'Guide',
|
||||||
|
items: [
|
||||||
|
{ text: 'Introduction', link: '/introduction' },
|
||||||
|
{ text: 'Getting Started', link: '/getting-started' },
|
||||||
|
...
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export type Sidebar = SidebarItem[] | SidebarMulti
|
||||||
|
|
||||||
|
export interface SidebarMulti {
|
||||||
|
[path: string]: SidebarItem[] | { items: SidebarItem[]; base: string }
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SidebarItem = {
|
||||||
|
/**
|
||||||
|
* Die Textbeschriftung des Eintrags.
|
||||||
|
*/
|
||||||
|
text?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Der Link des Eintrags.
|
||||||
|
*/
|
||||||
|
link?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The children of the item.
|
||||||
|
*/
|
||||||
|
items?: SidebarItem[]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If not specified, group is not collapsible.
|
||||||
|
*
|
||||||
|
* If `true`, group is collapsible and collapsed by default
|
||||||
|
*
|
||||||
|
* If `false`, group is collapsible but expanded by default
|
||||||
|
*/
|
||||||
|
collapsed?: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Base path for the children items.
|
||||||
|
*/
|
||||||
|
base?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Anpassen text that appears on the footer of previous/next page.
|
||||||
|
*/
|
||||||
|
docFooterText?: string
|
||||||
|
|
||||||
|
rel?: string
|
||||||
|
target?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## aside
|
||||||
|
|
||||||
|
- Type: `boolean | 'left'`
|
||||||
|
- Default: `true`
|
||||||
|
- Can be overridden per page via [frontmatter](./frontmatter-config#aside)
|
||||||
|
|
||||||
|
Setting this value to `false` prevents rendering of aside container.\
|
||||||
|
Setting this value to `true` renders the aside to the right.\
|
||||||
|
Wenn dieser Wert auf `left` gesetzt wird, wird der Aside-Container links gerendert.\
|
||||||
|
In Rechts-nach-Links-Layouts werden beide Seiten gespiegelt.
|
||||||
|
|
||||||
|
Wenn du es für alle Ansichtsgrößen deaktivieren möchtest, solltest du stattdessen `outline: false` verwenden.
|
||||||
|
|
||||||
|
## outline
|
||||||
|
|
||||||
|
- Type: `Outline | Outline['level'] | false`
|
||||||
|
- Die Ebene kann pro Seite über das [Frontmatter] überschrieben werden.(./frontmatter-config#outline)
|
||||||
|
|
||||||
|
Wenn dieser Wert auf `false` gesetzt wird, wird der Outline-Container nicht gerendert. Weitere Details findest du in diesem Interface:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface Outline {
|
||||||
|
/**
|
||||||
|
* The levels of headings to be displayed in the outline.
|
||||||
|
* Single number means only headings of that level will be displayed.
|
||||||
|
* If a tuple is passed, the first number is the minimum level and the second number is the maximum level.
|
||||||
|
* `'deep'` is same as `[2, 6]`, which means all headings from `<h2>` to `<h6>` will be displayed.
|
||||||
|
*
|
||||||
|
* @default 2
|
||||||
|
*/
|
||||||
|
level?: number | [number, number] | 'deep'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The title to be displayed on the outline.
|
||||||
|
*
|
||||||
|
* @default 'On this page'
|
||||||
|
*/
|
||||||
|
label?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## socialLinks
|
||||||
|
|
||||||
|
- Type: `SocialLink[]`
|
||||||
|
|
||||||
|
Du kannst diese Option definieren, um Links zu deinen sozialen Konten mit Symbolen in der Navigation anzuzeigen.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
socialLinks: [
|
||||||
|
// You can add any icon from simple-icons (https://simpleicons.org/):
|
||||||
|
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
|
||||||
|
{ icon: 'twitter', link: '...' },
|
||||||
|
{ icon: 'discord', link: '/community', target: '_self' },
|
||||||
|
// You can use any other iconify collection installed in your project
|
||||||
|
// as `collection:name` (e.g. after `npm add -D @iconify-json/lucide`):
|
||||||
|
{ icon: 'lucide:rss', link: '/feed.rss' },
|
||||||
|
// You can also add custom icons by passing SVG as string:
|
||||||
|
{
|
||||||
|
icon: {
|
||||||
|
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
|
||||||
|
},
|
||||||
|
link: '...',
|
||||||
|
// You can include a custom label for accessibility too (optional but recommended):
|
||||||
|
ariaLabel: 'cool link'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface SocialLink {
|
||||||
|
icon: string | { svg: string }
|
||||||
|
link: string
|
||||||
|
ariaLabel?: string
|
||||||
|
target?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## footer
|
||||||
|
|
||||||
|
- Type: `Fußzeile`
|
||||||
|
- Can be overridden per page via [frontmatter](./frontmatter-config#footer)
|
||||||
|
|
||||||
|
Konfiguration der Fußzeile. Du kannst eine Nachricht oder einen Copyright-Text in der Fußzeile hinzufügen. Er wird jedoch nur angezeigt, wenn die Seite keine Seitenleiste enthält. Dies ist eine bewusste Designentscheidung.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
footer: {
|
||||||
|
message: 'Released under the MIT License.',
|
||||||
|
copyright: 'Copyright © 2019-present Evan You'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface Footer {
|
||||||
|
message?: string
|
||||||
|
copyright?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## editLink
|
||||||
|
|
||||||
|
- Type: `EditLink`
|
||||||
|
- Can be overridden per page via [frontmatter](./frontmatter-config#editlink)
|
||||||
|
|
||||||
|
Bearbeitungslink lets you display a link to edit the page on Git management services such as GitHub, or GitLab. See [Standard-Theme: Bearbeitungslink](./Standard-theme-edit-link) for more details.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
editLink: {
|
||||||
|
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
||||||
|
text: 'Edit this page on GitHub'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface EditLink {
|
||||||
|
pattern: string
|
||||||
|
text?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## lastUpdated
|
||||||
|
|
||||||
|
- Type: `LastUpdatedOptions`
|
||||||
|
|
||||||
|
Ermöglicht die Anpassung des Textes und Datumsformats für die letzte Aktualisierung.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
lastUpdated: {
|
||||||
|
text: 'Updated at',
|
||||||
|
formatOptions: {
|
||||||
|
dateStyle: 'full',
|
||||||
|
timeStyle: 'medium'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface LastUpdatedOptions {
|
||||||
|
/**
|
||||||
|
* @default 'Last updated'
|
||||||
|
*/
|
||||||
|
text?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @default
|
||||||
|
* { dateStyle: 'short', timeStyle: 'short' }
|
||||||
|
*/
|
||||||
|
formatOptions?: Intl.DateTimeFormatOptions & { forceLocale?: boolean }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## algolia
|
||||||
|
|
||||||
|
- Type: `AlgoliaSearch`
|
||||||
|
|
||||||
|
An option to support searching your docs site using [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Learn more in [Standard-Theme: Suche](./Standard-theme-search)
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface AlgoliaSearchOptions extends DocSearchProps {
|
||||||
|
locales?: Record<string, Partial<DocSearchProps>>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Eine vollständige Liste der Optionen findest du [hier](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts).
|
||||||
|
|
||||||
|
## carbonAds {#carbon-ads}
|
||||||
|
|
||||||
|
- Type: `CarbonAdsOptions`
|
||||||
|
|
||||||
|
An option to display [Carbon Ads](https://www.carbonads.net/).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
carbonAds: {
|
||||||
|
code: 'your-carbon-code',
|
||||||
|
placement: 'your-carbon-placement'
|
||||||
|
format: 'classic'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface CarbonAdsOptions {
|
||||||
|
code: string
|
||||||
|
placement: string
|
||||||
|
format?: 'classic' | 'responsive' | 'cover'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Weitere Informationen findest du unter [Standard-Theme: Carbon Ads](./Standard-theme-carbon-ads)
|
||||||
|
|
||||||
|
## docFooter
|
||||||
|
|
||||||
|
- Type: `DocFooter`
|
||||||
|
|
||||||
|
Kann verwendet werden, um den Text über den Links zur vorherigen und nächsten Seite anzupassen. Dies ist hilfreich, wenn die Dokumentation nicht auf Englisch verfasst ist. Außerdem können die Links global deaktiviert werden. Wenn du die Links gezielt aktivieren oder deaktivieren möchtest, kannst du [frontmatter](./Standard-theme-prev-next-links).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
docFooter: {
|
||||||
|
prev: 'Pagina prior',
|
||||||
|
next: 'Proxima pagina'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface DocFooter {
|
||||||
|
prev?: string | false
|
||||||
|
next?: string | false
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## darkModeSwitchLabel
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Appearance`
|
||||||
|
|
||||||
|
Kann verwendet werden, um die Beschriftung des Dunkelmodus-Schalters anzupassen. Diese Beschriftung wird nur in der mobilen Ansicht angezeigt.
|
||||||
|
|
||||||
|
## lightModeSwitchTitle
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Switch to light theme`
|
||||||
|
|
||||||
|
Kann verwendet werden, um den Titel des Hellmodus-Schalters anzupassen, der beim Darüberfahren angezeigt wird.
|
||||||
|
|
||||||
|
## darkModeSwitchTitle
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Switch to dark theme`
|
||||||
|
|
||||||
|
Kann verwendet werden, um den Titel des Dunkelmodus-Schalters anzupassen, der beim Darüberfahren angezeigt wird.
|
||||||
|
|
||||||
|
## sidebarMenuLabel
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Menu`
|
||||||
|
|
||||||
|
Kann verwendet werden, um die Beschriftung des Seitenleistenmenüs anzupassen. Diese Beschriftung wird nur in der mobilen Ansicht angezeigt.
|
||||||
|
|
||||||
|
## returnToTopLabel
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Return to top`
|
||||||
|
|
||||||
|
Kann verwendet werden, um die Beschriftung der Schaltfläche zum Zurückkehren nach oben anzupassen. Diese Beschriftung wird nur in der mobilen Ansicht angezeigt.
|
||||||
|
|
||||||
|
## langMenuLabel
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Change language`
|
||||||
|
|
||||||
|
Kann verwendet werden, um das aria-label der Sprachumschalt-Schaltfläche in der Navigationsleiste anzupassen. Dies wird nur bei Verwendung von [i18n] genutzt.(../guide/i18n).
|
||||||
|
|
||||||
|
## navMenuLabel
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Main Navigation`
|
||||||
|
|
||||||
|
Can be used to customize the accessible label of the main navigation landmarks (the navbar menu and the mobile menu).
|
||||||
|
|
||||||
|
## mobileMenuLabel
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Menu`
|
||||||
|
|
||||||
|
Can be used to customize the aria-label of the mobile menu (hamburger) button.
|
||||||
|
|
||||||
|
## extraMenuLabel
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `More options`
|
||||||
|
|
||||||
|
Can be used to customize the aria-label of the `⋯` menu button in the navbar. That menu collects the nav items and controls that don't fit in the bar at the current viewport size.
|
||||||
|
|
||||||
|
## skipToContentLabel
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `Skip to content`
|
||||||
|
|
||||||
|
Can be used to customize the label of the skip to content link. Dies link is shown when the user is navigating the site using a keyboard.
|
||||||
|
|
||||||
|
## externalLinkIcon
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `false`
|
||||||
|
|
||||||
|
Whether to show an external link icon next to external links in markdown.
|
||||||
|
|
||||||
|
## gradedContainers
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `false`
|
||||||
|
|
||||||
|
Whether to color [custom containers](../guide/markdown#custom-containers), [GitHub-flavored alerts](../guide/markdown#github-flavored-alerts), and badges on a graded severity scale — danger red, warning orange, caution yellow. By Standard, colors match GitHub's alerts, where caution shares danger's red and warning is yellow.
|
||||||
|
|
||||||
|
## `useLayout` <Badge type="info" text="composable" />
|
||||||
|
|
||||||
|
Returns layout-related data. The returned object has the following type:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface {
|
||||||
|
isHome: ComputedRef<boolean>
|
||||||
|
|
||||||
|
sidebar: Readonly<ShallowRef<DefaultTheme.SidebarItem[]>>
|
||||||
|
sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
|
||||||
|
hasSidebar: ComputedRef<boolean>
|
||||||
|
isSidebarEnabled: ComputedRef<boolean>
|
||||||
|
|
||||||
|
hasAside: ComputedRef<boolean>
|
||||||
|
leftAside: ComputedRef<boolean>
|
||||||
|
|
||||||
|
headers: Readonly<ShallowRef<DefaultTheme.OutlineItem[]>>
|
||||||
|
hasLocalNav: ComputedRef<boolean>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Beispiel:**
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { useLayout } from 'vitepress/theme'
|
||||||
|
|
||||||
|
const { hasSidebar } = useLayout()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="hasSidebar">Only show when sidebar exists</div>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
---
|
||||||
|
description: Zeige auf Dokumentationsseiten einen Bearbeitungslink an, über den Nutzer Änderungen auf GitHub oder GitLab vorschlagen können.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Bearbeitungslink
|
||||||
|
|
||||||
|
## Websiteweite Konfiguration
|
||||||
|
|
||||||
|
Mit dem Bearbeitungslink kannst du einen Link zum Bearbeiten der Seite bei Git-Verwaltungsdiensten wie GitHub oder GitLab anzeigen. Füge zum Aktivieren die Optionen von `themeConfig.editLink` zu deiner Konfiguration hinzu.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
editLink: {
|
||||||
|
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Die Option `pattern` definiert die URL-Struktur des Links. `:path` wird durch den Seitenpfad ersetzt.
|
||||||
|
|
||||||
|
Du kannst auch eine reine Funktion angeben, die [`PageData`](./runtime-api#usedata) als Argument akzeptiert und die URL als Zeichenkette zurückgibt.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
editLink: {
|
||||||
|
pattern: ({ filePath }) => {
|
||||||
|
if (filePath.startsWith('packages/')) {
|
||||||
|
return `https://github.com/acme/monorepo/edit/main/${filePath}`
|
||||||
|
} else {
|
||||||
|
return `https://github.com/acme/monorepo/edit/main/docs/${filePath}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Die Funktion sollte keine Seiteneffekte haben und nicht auf Dinge außerhalb ihres Gültigkeitsbereichs zugreifen, da sie serialisiert und im Browser ausgeführt wird.
|
||||||
|
|
||||||
|
Standardmäßig wird am unteren Rand der Dokumentationsseite der Linktext „Diese Seite bearbeiten“ hinzugefügt. Du kannst diesen Text über die Option `text` anpassen.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
editLink: {
|
||||||
|
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
|
||||||
|
text: 'Diese Seite auf GitHub bearbeiten'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Frontmatter-Konfiguration
|
||||||
|
|
||||||
|
Dies kann pro Seite über die Option `editLink` im Frontmatter deaktiviert werden:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
editLink: false
|
||||||
|
---
|
||||||
|
```
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
description: Konfiguriere die globale Fußzeile, die am unteren Rand von VitePress-Seiten angezeigt wird.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Fußzeile
|
||||||
|
|
||||||
|
VitePress zeigt eine globale Fußzeile am unteren Rand der Seite an, wenn `themeConfig.footer` vorhanden ist.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
footer: {
|
||||||
|
message: 'Veröffentlicht unter der MIT-Lizenz.',
|
||||||
|
copyright: 'Copyright © 2019-present Evan You'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface Fußzeile {
|
||||||
|
// Die Nachricht, die direkt vor dem Copyright angezeigt wird.
|
||||||
|
message?: string
|
||||||
|
|
||||||
|
// Der eigentliche Copyright-Text.
|
||||||
|
copyright?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Die obige Konfiguration unterstützt außerdem HTML-Zeichenketten. Wenn du beispielsweise Links in der Fußzeile anzeigen möchtest, kannst du die Konfiguration wie folgt anpassen:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
footer: {
|
||||||
|
message: 'Veröffentlicht unter der <a href="https://github.com/vuejs/vitepress/blob/main/LICENSE">MIT-Lizenz</a>.',
|
||||||
|
copyright: 'Copyright © 2019-present <a href="https://github.com/yyx990803">Evan You</a>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
In `message` und `copyright` können nur Inline-Elemente verwendet werden, da sie innerhalb eines `<p>`-Elements gerendert werden. Wenn du Block-Elemente hinzufügen möchtest, verwende stattdessen den Slot [`layout-bottom`](../guide/extending-Standard-theme#layout-slots).
|
||||||
|
:::
|
||||||
|
|
||||||
|
Beachte, dass die Fußzeile nicht angezeigt wird, wenn die [Seitenleiste](./Standard-theme-sidebar) sichtbar ist.
|
||||||
|
|
||||||
|
## Frontmatter-Konfiguration
|
||||||
|
|
||||||
|
Dies kann pro Seite über die `footer`-Option im Frontmatter deaktiviert werden:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
footer: false
|
||||||
|
---
|
||||||
|
```
|
||||||
@ -0,0 +1,199 @@
|
|||||||
|
---
|
||||||
|
description: Konfiguriere das Startseitenlayout des VitePress-Standard-Themes mit Hero-Bereichen, Features und eigenen Inhalten.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Startseite
|
||||||
|
|
||||||
|
Das VitePress-Standard-Theme stellt ein Startseitenlayout bereit, das du auch auf [der Startseite dieser Website](../) sehen kannst. Du kannst es auf jeder deiner Seiten verwenden, indem du `layout: home` im [Frontmatter](./frontmatter-config) angibst.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
layout: home
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Diese Option allein bewirkt jedoch noch nicht viel. Du kannst der Startseite verschiedene vorgefertigte „Bereiche“ hinzufügen, indem du zusätzliche Optionen wie `hero` und `features` setzt.
|
||||||
|
|
||||||
|
## Hero-Bereich
|
||||||
|
|
||||||
|
Der Hero-Bereich befindet sich oben auf der Startseite. So kannst du ihn konfigurieren.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: VitePress
|
||||||
|
text: Statischer Website-Generator auf Basis von Vite und Vue.
|
||||||
|
tagline: Lorem ipsum...
|
||||||
|
image:
|
||||||
|
src: /logo.png
|
||||||
|
alt: VitePress
|
||||||
|
actions:
|
||||||
|
- theme: brand
|
||||||
|
text: Erste Schritte
|
||||||
|
link: /guide/what-is-vitepress
|
||||||
|
- theme: alt
|
||||||
|
text: Auf GitHub ansehen
|
||||||
|
link: https://github.com/vuejs/vitepress
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface Hero {
|
||||||
|
// Die Zeichenkette, die oberhalb von `text` angezeigt wird. Verwendet die Markenfarbe
|
||||||
|
// Sie sollte kurz sein, beispielsweise der Produktname.
|
||||||
|
name?: string
|
||||||
|
|
||||||
|
// Der Haupttext des Hero-Bereichs. Dieser wird definiert
|
||||||
|
// as `h1` tag.
|
||||||
|
text: string
|
||||||
|
|
||||||
|
// Unter `text` angezeigter Untertitel.
|
||||||
|
tagline?: string
|
||||||
|
|
||||||
|
// Das Bild wird neben dem Text- und Untertitelbereich angezeigt.
|
||||||
|
image?: ThemeableImage
|
||||||
|
|
||||||
|
// Aktionsschaltflächen, die im Hero-Bereich der Startseite angezeigt werden.
|
||||||
|
actions?: HeroAction[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type ThemeableImage =
|
||||||
|
| string
|
||||||
|
| { src: string; alt?: string }
|
||||||
|
| { light: string; dark: string; alt?: string }
|
||||||
|
|
||||||
|
interface HeroAction {
|
||||||
|
// Farbvariante der Schaltfläche. Standardmäßig `brand`.
|
||||||
|
theme?: 'brand' | 'alt'
|
||||||
|
|
||||||
|
// Beschriftung der Schaltfläche.
|
||||||
|
text: string
|
||||||
|
|
||||||
|
// Ziellink der Schaltfläche.
|
||||||
|
link: string
|
||||||
|
|
||||||
|
// Zielattribut des Links.
|
||||||
|
target?: string
|
||||||
|
|
||||||
|
// Link-rel-Attribut.
|
||||||
|
rel?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Farbe des Namens anpassen
|
||||||
|
|
||||||
|
VitePress verwendet für `name` die Markenfarbe (`--vp-c-brand-1`). Du kannst diese Farbe jedoch durch Überschreiben der Variable `--vp-home-hero-name-color` anpassen.
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--vp-home-hero-name-color: blue;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Du kannst es außerdem weiter anpassen, indem du `--vp-home-hero-name-background` to give the `name` gradient color.
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--vp-home-hero-name-color: transparent;
|
||||||
|
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Feature-Bereich
|
||||||
|
|
||||||
|
Im Feature-Bereich kannst du beliebig viele Features auflisten, die direkt nach dem Hero-Bereich angezeigt werden sollen. Übergebe dazu die Option `features` im Frontmatter.
|
||||||
|
|
||||||
|
Du kannst für jedes Feature ein Symbol angeben, which can be an emoji or any type of image. When the configured icon is an image (svg, png, jpeg...), you must provide the icon with the proper width and height; you can also provide the description, its intrinsic size as well as its variants for dark and light theme wenn erforderlich.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
features:
|
||||||
|
- icon: 🛠️
|
||||||
|
title: Simple and minimal, always
|
||||||
|
details: Lorem ipsum...
|
||||||
|
- icon:
|
||||||
|
src: /cool-feature-icon.svg
|
||||||
|
title: Another cool feature
|
||||||
|
details: Lorem ipsum...
|
||||||
|
- icon:
|
||||||
|
dark: /dark-feature-icon.svg
|
||||||
|
light: /light-feature-icon.svg
|
||||||
|
title: Another cool feature
|
||||||
|
details: Lorem ipsum...
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface Feature {
|
||||||
|
// Show icon on each feature box.
|
||||||
|
icon?: FeatureIcon
|
||||||
|
|
||||||
|
// Title of the feature.
|
||||||
|
title: string
|
||||||
|
|
||||||
|
// Details of the feature.
|
||||||
|
details: string
|
||||||
|
|
||||||
|
// Link when clicked on feature component. The link can
|
||||||
|
// be both internal or external.
|
||||||
|
//
|
||||||
|
// e.g. `guide/reference/default-theme-home-page` or `https://example.com`
|
||||||
|
link?: string
|
||||||
|
|
||||||
|
// Link text to be shown inside feature component. Best
|
||||||
|
// used with `link` option.
|
||||||
|
//
|
||||||
|
// e.g. `Learn more`, `Visit page`, etc.
|
||||||
|
linkText?: string
|
||||||
|
|
||||||
|
// Link rel attribute for the `link` option.
|
||||||
|
//
|
||||||
|
// e.g. `external`
|
||||||
|
rel?: string
|
||||||
|
|
||||||
|
// Link target attribute for the `link` option.
|
||||||
|
target?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type FeatureIcon =
|
||||||
|
| string
|
||||||
|
| { src: string; alt?: string; width?: string; height: string }
|
||||||
|
| {
|
||||||
|
light: string
|
||||||
|
dark: string
|
||||||
|
alt?: string
|
||||||
|
width?: string
|
||||||
|
height: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Markdown-Inhalt
|
||||||
|
|
||||||
|
Du kannst zusätzliche Inhalte zur Startseite deiner Website hinzufügen, indem du einfach unterhalb der `---`-Frontmatter-Trennlinie Markdown hinzufügst.
|
||||||
|
|
||||||
|
````md
|
||||||
|
---
|
||||||
|
layout: home
|
||||||
|
|
||||||
|
hero:
|
||||||
|
name: VitePress
|
||||||
|
text: Statischer Website-Generator auf Basis von Vite und Vue.
|
||||||
|
---
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
You can get started using VitePress right away using `npx`!
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm init
|
||||||
|
npx vitepress init
|
||||||
|
```
|
||||||
|
````
|
||||||
|
|
||||||
|
::: info
|
||||||
|
VitePress hat zusätzliche Inhalte einer Seite mit `layout: home` nicht immer automatisch gestaltet. Um das frühere Verhalten wiederherzustellen, kannst du `markdownStyles: false` im Frontmatter setzen.
|
||||||
|
:::
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
description: Zeige den Zeitpunkt der letzten Aktualisierung von VitePress-Seiten anhand der Git-Commit-Historie an.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Letzte Aktualisierung
|
||||||
|
|
||||||
|
Der Aktualisierungszeitpunkt des letzten Inhalts wird unten rechts auf der Seite angezeigt. Füge zum Aktivieren die Option `lastUpdated` zu deiner Konfiguration hinzu.
|
||||||
|
|
||||||
|
::: info
|
||||||
|
VitePress zeigt den Zeitpunkt der letzten Aktualisierung anhand des Zeitstempels des neuesten Git-Commits für jede Datei an. Dafür muss die Markdown-Datei in Git committed sein.
|
||||||
|
|
||||||
|
Intern führt VitePress für jede Datei `git log -1 --pretty="%ai"` aus, um den Zeitstempel abzurufen. Wenn alle Seiten dieselbe Aktualisierungszeit anzeigen, liegt dies wahrscheinlich an einem flachen Klonen (häufig in CI-Umgebungen), das den Git-Verlauf begrenzt.
|
||||||
|
|
||||||
|
Um dies in **GitHub Actions** zu beheben, verwende Folgendes in deinem Workflow:
|
||||||
|
|
||||||
|
```yaml{4}
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v5
|
||||||
|
with:
|
||||||
|
fetch-depth: 0
|
||||||
|
```
|
||||||
|
|
||||||
|
Andere CI/CD-Plattformen verfügen über ähnliche Einstellungen.
|
||||||
|
|
||||||
|
Wenn solche Optionen nicht verfügbar sind, kannst du dem Befehl `docs:build` in deiner `package.json` einen manuellen Abruf voranstellen:
|
||||||
|
|
||||||
|
```json
|
||||||
|
"docs:build": "git fetch --unshallow && vitepress build docs"
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
|
## Websiteweite Konfiguration
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
lastUpdated: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Frontmatter-Konfiguration
|
||||||
|
|
||||||
|
Dies kann pro Seite über die `lastUpdated`-Option im Frontmatter deaktiviert werden:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
lastUpdated: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Weitere Informationen findest du unter [Standard-Theme: Letzte Aktualisierung](./Standard-theme-config#lastupdated). Jeder als wahr ausgewertete Wert auf Theme-Ebene aktiviert die Funktion ebenfalls, sofern sie nicht ausdrücklich auf Website- oder Seitenebene deaktiviert wird.
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
description: Wähle zwischen den Layouts doc, page und home im VitePress-Standard-Theme.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Layout
|
||||||
|
|
||||||
|
Du kannst das Seitenlayout auswählen, indem du die Option `layout` im [Frontmatter](./frontmatter-config) der Seite setzt. Es gibt drei Layoutoptionen: `doc`, `page` und `home`. Wenn nichts angegeben ist, wird die Seite als `doc`-Seite behandelt.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
layout: doc
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
## Doc Layout
|
||||||
|
|
||||||
|
Die Option `doc` ist das Standardlayout. Sie gestaltet den gesamten Markdown-Inhalt im Stil einer „Dokumentation“, indem der gesamte Inhalt in die CSS-Klasse `vp-doc` eingeschlossen und auf die darin enthaltenen Elemente entsprechende Stile angewendet werden.
|
||||||
|
|
||||||
|
Nahezu alle allgemeinen Elemente wie `p` oder `h2` erhalten eine spezielle Gestaltung. Beachte daher, dass auch benutzerdefiniertes HTML innerhalb eines Markdown-Inhalts von diesen Stilen betroffen ist.
|
||||||
|
|
||||||
|
Außerdem stellt dieses Layout die unten aufgeführten dokumentationsspezifischen Funktionen bereit. Diese Funktionen sind nur in diesem Layout aktiviert.
|
||||||
|
|
||||||
|
- Bearbeitungslink
|
||||||
|
- Prev Weiter Link
|
||||||
|
- Outline
|
||||||
|
- [Carbon Ads](./default-theme-carbon-ads)
|
||||||
|
|
||||||
|
## Seite Layout
|
||||||
|
|
||||||
|
Die Option `page` wird als „leere Seite“ behandelt. Das Markdown wird weiterhin analysiert und alle [Markdown-Erweiterungen](../guide/markdown) funktionieren wie beim `doc`-Layout, erhalten jedoch keine Standardgestaltung.
|
||||||
|
|
||||||
|
Mit dem Seitenlayout kannst du alles selbst gestalten, ohne dass das VitePress-Theme das Markup beeinflusst. Das ist nützlich, wenn du eine eigene Seite erstellen möchtest.
|
||||||
|
|
||||||
|
Beachte, dass auch in diesem Layout die Seitenleiste angezeigt wird, wenn für die Seite eine passende Seitenleistenkonfiguration vorhanden ist.
|
||||||
|
|
||||||
|
## Home Layout
|
||||||
|
|
||||||
|
Die Option `home` erzeugt eine vorgefertigte „Startseite“. In diesem Layout kannst du zusätzliche Optionen wie `hero` und `features` festlegen, um den Inhalt weiter anzupassen. Weitere Informationen findest du unter [Standard-Theme: Startseite](./default-theme-home-page).
|
||||||
|
|
||||||
|
## No Layout
|
||||||
|
|
||||||
|
Wenn du kein Layout möchtest, kannst du über das Frontmatter `layout: false` angeben. Diese Option ist hilfreich, wenn du eine vollständig anpassbare Einstiegsseite ohne standardmäßige Seitenleiste, Navigationsleiste oder Fußzeile erstellen möchtest.
|
||||||
|
|
||||||
|
## Eigenes Layout
|
||||||
|
|
||||||
|
Du kannst auch ein eigenes Layout verwenden:
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
layout: foo
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Dadurch wird nach einer im Kontext registrierten Komponente namens `foo` gesucht. Zum Beispiel kannst du deine Komponente global in `.vitepress/theme/index.ts` registrieren:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
import Foo from './Foo.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: DefaultTheme,
|
||||||
|
enhanceApp({ app }) {
|
||||||
|
app.component('foo', Foo)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,221 @@
|
|||||||
|
---
|
||||||
|
description: Konfiguriere die Navigationsleiste im VitePress-Standard-Theme einschließlich Seitentitel, Logo und Menülinks.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Nav
|
||||||
|
|
||||||
|
Die Navigation ist die oben auf der Seite angezeigte Navigationsleiste. Sie enthält den Seitentitel, globale Menülinks usw.
|
||||||
|
|
||||||
|
## Seitentitel und Logo
|
||||||
|
|
||||||
|
Standardmäßig zeigt die Navigation den Titel der Website anhand des Werts [`config.title`](./site-config#title) an. Wenn du die Anzeige in der Navigation ändern möchtest, kannst du einen eigenen Text über die Option `themeConfig.siteTitle` festlegen.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
siteTitle: 'My Custom Title'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Wenn du ein Logo für deine Website hast, kannst du es über den Bildpfad anzeigen. Du solltest das Logo direkt in `public` ablegen und den absoluten Pfad dazu angeben.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
logo: '/my-logo.svg'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Beim Hinzufügen eines Logos wird es zusammen mit dem Seitentitel angezeigt. Wenn du nur das Logo benötigst und den Seitentitel ausblenden möchtest, setze die Option `siteTitle` auf `false`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
logo: '/my-logo.svg',
|
||||||
|
siteTitle: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Du kannst als Logo auch ein Objekt übergeben, wenn du ein `alt`-Attribut hinzufügen oder es abhängig vom Hell-/Dunkelmodus anpassen möchtest. Einzelheiten findest du unter [`themeConfig.logo`](./default-theme-config#logo).
|
||||||
|
|
||||||
|
## Navigation Links
|
||||||
|
|
||||||
|
Du kannst die Option `themeConfig.nav` definieren, um Links zur Navigation hinzuzufügen.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
{ text: 'Guide', link: '/guide' },
|
||||||
|
{ text: 'Config', link: '/config' },
|
||||||
|
{ text: 'Changelog', link: 'https://github.com/...' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`text` ist der tatsächlich angezeigte Text in der Navigation, und `link` ist das Ziel, das beim Anklicken des Textes geöffnet wird. Setze beim Link den Pfad zur tatsächlichen Datei ohne `.md` und beginne immer mit `/`.
|
||||||
|
|
||||||
|
Der `link` kann auch eine Funktion sein, die [`PageData`](./runtime-api#usedata) als Argument akzeptiert und den Pfad zurückgibt.
|
||||||
|
|
||||||
|
Navigationslinks können auch Dropdown-Menüs sein. Setze dazu den Schlüssel `items` in der Link-Option.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
{ text: 'Guide', link: '/guide' },
|
||||||
|
{
|
||||||
|
text: 'Dropdown Menu',
|
||||||
|
items: [
|
||||||
|
{ text: 'Item A', link: '/item-1' },
|
||||||
|
{ text: 'Item B', link: '/item-2' },
|
||||||
|
{ text: 'Item C', link: '/item-3' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Beachte, dass der Titel des Dropdown-Menüs (`Dropdown Menu` im obigen Beispiel) keine Eigenschaft `link` besitzen kann, da er zu einer Schaltfläche zum Öffnen des Dropdowns wird.
|
||||||
|
|
||||||
|
Du kannst den Dropdown-Menüeinträgen außerdem weitere „Abschnitte“ hinzufügen, indem du weitere verschachtelte Einträge angibst.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
{ text: 'Guide', link: '/guide' },
|
||||||
|
{
|
||||||
|
text: 'Dropdown Menu',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
// Title for the section.
|
||||||
|
text: 'Section A Title',
|
||||||
|
items: [
|
||||||
|
{ text: 'Section A Item A', link: '...' },
|
||||||
|
{ text: 'Section B Item B', link: '...' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Dropdown Menu',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
// You may also omit the title.
|
||||||
|
items: [
|
||||||
|
{ text: 'Section A Item A', link: '...' },
|
||||||
|
{ text: 'Section B Item B', link: '...' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Status des Links "active" state
|
||||||
|
|
||||||
|
Navigationseinträge werden hervorgehoben, wenn sich die aktuelle Seite unter dem passenden Pfad befindet. Wenn du den abzugleichenden Pfad anpassen möchtest, definiere die Eigenschaft `activeMatch` als Zeichenkette mit einem regulären Ausdruck.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
// This link gets active state when the user is
|
||||||
|
// on `/config/` path.
|
||||||
|
{
|
||||||
|
text: 'Guide',
|
||||||
|
link: '/guide',
|
||||||
|
activeMatch: '/config/'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
`activeMatch` is expected to be a regex string, but you must define it as a string. We can't use actual RegExp object here because it isn't serializable during the build time.
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Status des Links "target" and "rel" attributes
|
||||||
|
|
||||||
|
Standardmäßig bestimmt VitePress automatisch `target` and `rel` attributes abhängig davon, ob der Link extern ist. But if you want, you can customize them too.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
{
|
||||||
|
text: 'Merchandise',
|
||||||
|
link: 'https://www.thegithubshop.com/',
|
||||||
|
target: '_self',
|
||||||
|
rel: 'sponsored'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Social Links
|
||||||
|
|
||||||
|
Refer [`socialLinks`](./default-theme-config#sociallinks).
|
||||||
|
|
||||||
|
## Eigene Komponenten
|
||||||
|
|
||||||
|
Du kannst eigene Komponenten mithilfe der Option `component` in die Navigationsleiste aufnehmen. by using the `component` option. The `component` key should be the Vue component name, and must be registered globally using [Theme.enhanceApp](../guide/custom-theme#theme-interface).
|
||||||
|
|
||||||
|
```js [.vitepress/config.js]
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
nav: [
|
||||||
|
{
|
||||||
|
text: 'My Menu',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
component: 'MyCustomComponent',
|
||||||
|
// Optional props to pass to the component
|
||||||
|
props: {
|
||||||
|
title: 'My Custom Component'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'AnotherCustomComponent'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Anschließend musst du die Komponente global registrieren:
|
||||||
|
|
||||||
|
```js [.vitepress/theme/index.js]
|
||||||
|
import DefaultTheme from 'vitepress/theme'
|
||||||
|
|
||||||
|
import MyCustomComponent from './components/MyCustomComponent.vue'
|
||||||
|
import AnotherCustomComponent from './components/AnotherCustomComponent.vue'
|
||||||
|
|
||||||
|
/** @type {import('vitepress').Theme} */
|
||||||
|
export default {
|
||||||
|
extends: DefaultTheme,
|
||||||
|
enhanceApp({ app }) {
|
||||||
|
app.component('MyCustomComponent', MyCustomComponent)
|
||||||
|
app.component('AnotherCustomComponent', AnotherCustomComponent)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Deine Komponente wird in der Navigationsleiste gerendert. VitePress will provide the following additional props to the component:
|
||||||
|
|
||||||
|
- `screenMenu`: ein optionaler Boolean, der angibt, ob sich die Komponente im mobilen Navigationsmenü befindet
|
||||||
|
- `menu`: ein optionaler Boolean, der angibt, ob sich die Komponente in einem Dropdown-Bereich befindet — for example, the `⋯` menu that nav items collapse into when they don't fit the bar. In both these contexts, render a flat list instead of a floating flyout, which would end up nested inside the panel
|
||||||
|
|
||||||
|
Du kannst check an example in the e2e tests [here](https://github.com/vuejs/vitepress/tree/main/__tests__/e2e/.vitepress).
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
---
|
||||||
|
description: Passe die am unteren Rand von Dokumentationsseiten in VitePress angezeigten Links zur vorherigen und nächsten Seite an.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Prev Weiter Links
|
||||||
|
|
||||||
|
Du kannst Text und Link für die vorherige und nächste Seite anpassen (sie werden am Ende der Dokumentationsseite angezeigt). Das ist hilfreich, wenn du dort einen anderen Text als in deiner Seitenleiste verwenden möchtest. Außerdem kann es nützlich sein, die Fußzeile zu deaktivieren oder auf eine Seite zu verlinken, die nicht in deiner Seitenleiste enthalten ist.
|
||||||
|
|
||||||
|
## prev
|
||||||
|
|
||||||
|
- Type: `string | false | { text?: string; link?: string }`
|
||||||
|
|
||||||
|
- Details:
|
||||||
|
|
||||||
|
Legt den Text/Link fest, der für den Link zur vorherigen Seite angezeigt wird. Wenn du dies im Frontmatter nicht festlegst, werden Text und Link aus der Seitenleistenkonfiguration abgeleitet.
|
||||||
|
|
||||||
|
- Beispiele:
|
||||||
|
|
||||||
|
- Nur den Text anpassen:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
prev: 'Get Started | Markdown'
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
- Text und Link anpassen:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
prev:
|
||||||
|
text: 'Markdown'
|
||||||
|
link: '/guide/markdown'
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
- Vorherige Seite ausblenden:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
prev: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
## next
|
||||||
|
|
||||||
|
Wie `prev`, aber für die nächste Seite.
|
||||||
@ -0,0 +1,246 @@
|
|||||||
|
---
|
||||||
|
description: Konfiguriere die Seitenleistennavigation im VitePress-Standard-Theme mit Gruppen, einklappbaren Abschnitten und mehreren Seitenleisten.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Seitenleiste
|
||||||
|
|
||||||
|
Die Seitenleiste ist der zentrale Navigationsbereich deiner Dokumentation. Du kannst das Seitenleistenmenü unter [`themeConfig.sidebar`](./default-theme-config#sidebar) konfigurieren.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: 'Guide',
|
||||||
|
items: [
|
||||||
|
{ text: 'Introduction', link: '/introduction' },
|
||||||
|
{ text: 'Getting Started', link: '/getting-started' },
|
||||||
|
...
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Grundlagen
|
||||||
|
|
||||||
|
Die einfachste Form des Seitenleistenmenüs besteht aus einem einzelnen Array von Links. Das Element der ersten Ebene definiert den „Abschnitt“ der Seitenleiste. Es sollte `text`, den Titel des Abschnitts, und `items`, die eigentlichen Navigationslinks, enthalten.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: 'Section Title A',
|
||||||
|
items: [
|
||||||
|
{ text: 'Item A', link: '/item-a' },
|
||||||
|
{ text: 'Item B', link: '/item-b' },
|
||||||
|
...
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Section Title B',
|
||||||
|
items: [
|
||||||
|
{ text: 'Item C', link: '/item-c' },
|
||||||
|
{ text: 'Item D', link: '/item-d' },
|
||||||
|
...
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Jeder `link` sollte den Pfad zur tatsächlichen Datei angeben und mit `/` beginnen. Wenn du am Ende des Links einen abschließenden Schrägstrich hinzufügst, wird `index.md` des entsprechenden Verzeichnisses angezeigt.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: 'Guide',
|
||||||
|
items: [
|
||||||
|
// This shows `/guide/index.md` page.
|
||||||
|
{ text: 'Introduction', link: '/guide/' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Du kannst die Seitenleisteneinträge bis zu sechs Ebenen tief verschachteln, ausgehend von der obersten Ebene. Beachte, dass Verschachtelungen mit mehr als sechs Ebenen ignoriert und nicht in der Seitenleiste angezeigt werden.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: 'Level 1',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'Level 2',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
text: 'Level 3',
|
||||||
|
items: [
|
||||||
|
...
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Multiple Sidebars
|
||||||
|
|
||||||
|
Du kannst abhängig vom Seitenpfad unterschiedliche Seitenleisten anzeigen. Zum Beispiel möchtest du in deiner Dokumentation möglicherweise separate Inhaltsbereiche wie eine „Anleitung“-Seite und eine „Konfiguration“-Seite erstellen.
|
||||||
|
|
||||||
|
Ordne dazu zunächst deine Seiten in Verzeichnissen für die gewünschten Abschnitte an:
|
||||||
|
|
||||||
|
```
|
||||||
|
.
|
||||||
|
├─ guide/
|
||||||
|
│ ├─ index.md
|
||||||
|
│ ├─ one.md
|
||||||
|
│ └─ two.md
|
||||||
|
└─ config/
|
||||||
|
├─ index.md
|
||||||
|
├─ three.md
|
||||||
|
└─ four.md
|
||||||
|
```
|
||||||
|
|
||||||
|
Then, update your configuration to define your sidebar for each section. This time, you should pass an object instead of an array.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: {
|
||||||
|
// This sidebar gets displayed when a user
|
||||||
|
// is on `guide` directory.
|
||||||
|
'/guide/': [
|
||||||
|
{
|
||||||
|
text: 'Guide',
|
||||||
|
items: [
|
||||||
|
{ text: 'Index', link: '/guide/' },
|
||||||
|
{ text: 'One', link: '/guide/one' },
|
||||||
|
{ text: 'Two', link: '/guide/two' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
// This sidebar gets displayed when a user
|
||||||
|
// is on `config` directory.
|
||||||
|
'/config/': [
|
||||||
|
{
|
||||||
|
text: 'Config',
|
||||||
|
items: [
|
||||||
|
{ text: 'Index', link: '/config/' },
|
||||||
|
{ text: 'Three', link: '/config/three' },
|
||||||
|
{ text: 'Four', link: '/config/four' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Collapsible Seitenleiste Groups
|
||||||
|
|
||||||
|
By adding `collapsed` option to the sidebar group, it shows a toggle button to hide/show each section.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: 'Section Title A',
|
||||||
|
collapsed: false,
|
||||||
|
items: [...]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
All sections are "open" by default. Wenn du would like them to be "closed" on initial page load, set `collapsed` option to `true`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: 'Section Title A',
|
||||||
|
collapsed: true,
|
||||||
|
items: [...]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Path Prefix
|
||||||
|
|
||||||
|
When your documentation structure has deep directories or groups located under the same subdirectory, you can use the `base` option to automatisch prepend a path prefix to all nested `items` inside that group. This avoids repeating the same path prefix for every `link`.
|
||||||
|
|
||||||
|
The `base` option is supported in both multiple sidebar configurations and nested sidebar groups.
|
||||||
|
|
||||||
|
### In Multiple Sidebars
|
||||||
|
|
||||||
|
Du kannst define `base` at the root of a sidebar section configuration:
|
||||||
|
|
||||||
|
```js {5}
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: {
|
||||||
|
'/guide/': {
|
||||||
|
base: '/guide/',
|
||||||
|
items: [
|
||||||
|
// This link is resolved to `/guide/introduction`
|
||||||
|
{ text: 'Introduction', link: 'introduction' },
|
||||||
|
// This link is resolved to `/guide/getting-started`
|
||||||
|
{ text: 'Getting Started', link: 'getting-started' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### In Nested Groups
|
||||||
|
|
||||||
|
Du kannst also use `base` inside nested sidebar groups. It will apply to the immediate children of that group:
|
||||||
|
|
||||||
|
```js{6,13}
|
||||||
|
export default {
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
{
|
||||||
|
text: 'Reference',
|
||||||
|
base: '/reference/',
|
||||||
|
items: [
|
||||||
|
// This link is resolved to `/reference/site-config`
|
||||||
|
{ text: 'Site-Konfiguration', link: 'site-config' },
|
||||||
|
{
|
||||||
|
text: 'Standard-Theme',
|
||||||
|
// Nested base overrides the parent path prefix
|
||||||
|
base: '/reference/default-theme-',
|
||||||
|
items: [
|
||||||
|
// This link is resolved to `/reference/default-theme-nav`
|
||||||
|
{ text: 'Nav', link: 'nav' },
|
||||||
|
// This link is resolved to `/reference/default-theme-sidebar`
|
||||||
|
{ text: 'Seitenleiste', link: 'sidebar' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,260 @@
|
|||||||
|
---
|
||||||
|
description: Erstelle Teamseiten mit Mitgliederprofilen mithilfe der integrierten Team-Komponenten von VitePress.
|
||||||
|
---
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { VPTeamMembers } from 'vitepress/theme'
|
||||||
|
|
||||||
|
const members = [
|
||||||
|
{
|
||||||
|
avatar: 'https://github.com/yyx990803.png',
|
||||||
|
name: 'Evan You',
|
||||||
|
title: 'Creator',
|
||||||
|
links: [
|
||||||
|
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||||
|
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar: 'https://github.com/kiaking.png',
|
||||||
|
name: 'Kia King Ishii',
|
||||||
|
title: 'Developer',
|
||||||
|
links: [
|
||||||
|
{ icon: 'github', link: 'https://github.com/kiaking' },
|
||||||
|
{ icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Teamseite
|
||||||
|
|
||||||
|
Wenn du dein Team vorstellen möchtest, kannst du Team-Komponenten verwenden, um eine Teamseite zu erstellen. Es gibt zwei Möglichkeiten: Du kannst sie in eine Dokumentationsseite einbetten oder eine vollständige Teamseite erstellen.
|
||||||
|
|
||||||
|
## Teammitglieder auf einer Seite anzeigen
|
||||||
|
|
||||||
|
Du kannst die von `vitepress/theme` bereitgestellte Komponente `<VPTeamMembers>` verwenden, um auf jeder Seite eine Liste von Teammitgliedern anzuzeigen.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script setup>
|
||||||
|
import { VPTeamMembers } from 'vitepress/theme'
|
||||||
|
|
||||||
|
const members = [
|
||||||
|
{
|
||||||
|
avatar: 'https://www.github.com/yyx990803.png',
|
||||||
|
name: 'Evan You',
|
||||||
|
title: 'Creator',
|
||||||
|
links: [
|
||||||
|
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||||
|
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
...
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
# Our Team
|
||||||
|
|
||||||
|
Lerne unser großartiges Team kennen.
|
||||||
|
|
||||||
|
<VPTeamMembers size="small" :members />
|
||||||
|
```
|
||||||
|
|
||||||
|
Der obige Code zeigt ein Teammitglied in einem kartenähnlichen Element an. Das Ergebnis sollte ungefähr wie folgt aussehen.
|
||||||
|
|
||||||
|
<VPTeamMembers size="small" :members />
|
||||||
|
|
||||||
|
Die Komponente `<VPTeamMembers>` gibt es in zwei Größen: `small` und `medium`. Welche du verwendest, hängt von deinen Anforderungen ab; auf Dokumentationsseiten passt `small` normalerweise besser. Du kannst jedem Mitglied außerdem weitere Eigenschaften wie eine `description` oder eine `sponsor`-Schaltfläche hinzufügen. Weitere Informationen findest du unter [`<VPTeamMembers>`](#vpteammembers).
|
||||||
|
|
||||||
|
Das Einbetten von Teammitgliedern in eine Dokumentationsseite eignet sich für kleine Teams oder wenn nur einzelne Mitglieder im Zusammenhang mit der Dokumentation vorgestellt werden sollen.
|
||||||
|
|
||||||
|
Wenn du viele Mitglieder hast oder einfach mehr Platz für ihre Darstellung benötigst, kannst du [eine vollständige Teamseite erstellen](#create-a-full-team-page).
|
||||||
|
|
||||||
|
## Create a full Teamseite
|
||||||
|
|
||||||
|
Statt Teammitglieder in eine Dokumentationsseite einzubetten, kannst du auch eine vollständige Teamseite erstellen, ähnlich wie bei einer eigenen [Startseite](./default-theme-home-page).
|
||||||
|
|
||||||
|
Erstelle zunächst eine neue Markdown-Datei. Der Dateiname spielt keine Rolle; hier nennen wir sie `team.md`. Setze darin die Frontmatter-Option `layout: page` und baue anschließend die Seitenstruktur mit `TeamPage`-Komponenten auf.
|
||||||
|
|
||||||
|
```html
|
||||||
|
---
|
||||||
|
layout: page
|
||||||
|
---
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
VPTeamPage,
|
||||||
|
VPTeamPageTitle,
|
||||||
|
VPTeamMembers
|
||||||
|
} from 'vitepress/theme'
|
||||||
|
|
||||||
|
const members = [
|
||||||
|
{
|
||||||
|
avatar: 'https://www.github.com/yyx990803.png',
|
||||||
|
name: 'Evan You',
|
||||||
|
title: 'Creator',
|
||||||
|
links: [
|
||||||
|
{ icon: 'github', link: 'https://github.com/yyx990803' },
|
||||||
|
{ icon: 'twitter', link: 'https://twitter.com/youyuxi' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
...
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<VPTeamPage>
|
||||||
|
<VPTeamPageTitle>
|
||||||
|
<template #title>
|
||||||
|
Our Team
|
||||||
|
</template>
|
||||||
|
<template #lead>
|
||||||
|
The development of VitePress is guided by an international
|
||||||
|
team, some of whom have chosen to be featured below.
|
||||||
|
</template>
|
||||||
|
</VPTeamPageTitle>
|
||||||
|
<VPTeamMembers :members />
|
||||||
|
</VPTeamPage>
|
||||||
|
```
|
||||||
|
|
||||||
|
Bei einer vollständigen Teamseite musst du alle Komponenten mit der Komponente `<VPTeamPage>` umschließen. Sie sorgt dafür, dass alle verschachtelten Team-Komponenten die passende Layout-Struktur und Abstände erhalten.
|
||||||
|
|
||||||
|
Die Komponente `<VPPageTitle>` fügt den Seitentitelbereich hinzu. Der Titel ist eine `<h1>`-Überschrift. Verwende die Slots `#title` und `#lead`, um dein Team vorzustellen.
|
||||||
|
|
||||||
|
`<VPMembers>` funktioniert genauso wie auf einer Dokumentationsseite und zeigt eine Liste von Mitgliedern an.
|
||||||
|
|
||||||
|
### Abschnitte zur Aufteilung der Teammitglieder hinzufügen
|
||||||
|
|
||||||
|
Du kannst der Teamseite „Abschnitte“ hinzufügen. Zum Beispiel kannst du verschiedene Arten von Teammitgliedern wie Kernteammitglieder und Community-Partner haben. Mit Abschnitten kannst du die Rollen der einzelnen Gruppen besser erläutern.
|
||||||
|
|
||||||
|
Füge dazu die Komponente `<VPTeamPageSection>` in die zuvor erstellte Datei `team.md` ein.
|
||||||
|
|
||||||
|
```html
|
||||||
|
---
|
||||||
|
layout: page
|
||||||
|
---
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
VPTeamPage,
|
||||||
|
VPTeamPageTitle,
|
||||||
|
VPTeamMembers,
|
||||||
|
VPTeamPageSection
|
||||||
|
} from 'vitepress/theme'
|
||||||
|
|
||||||
|
const coreMembers = [...]
|
||||||
|
const partners = [...]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<VPTeamPage>
|
||||||
|
<VPTeamPageTitle>
|
||||||
|
<template #title>Our Team</template>
|
||||||
|
<template #lead>...</template>
|
||||||
|
</VPTeamPageTitle>
|
||||||
|
<VPTeamMembers size="medium" :members="coreMembers" />
|
||||||
|
<VPTeamPageSection>
|
||||||
|
<template #title>Partners</template>
|
||||||
|
<template #lead>...</template>
|
||||||
|
<template #members>
|
||||||
|
<VPTeamMembers size="small" :members="partners" />
|
||||||
|
</template>
|
||||||
|
</VPTeamPageSection>
|
||||||
|
</VPTeamPage>
|
||||||
|
```
|
||||||
|
|
||||||
|
Die Komponente `<VPTeamPageSection>` kann wie `VPTeamPageTitle` die Slots `#title` und `#lead` sowie zusätzlich den Slot `#members` zur Anzeige von Teammitgliedern enthalten.
|
||||||
|
|
||||||
|
Denke daran, die Komponente `<VPTeamMembers>` innerhalb des Slots `#members` einzufügen.
|
||||||
|
|
||||||
|
## `<VPTeamMembers>`
|
||||||
|
|
||||||
|
Die Komponente `<VPTeamMembers>` zeigt eine übergebene Liste von Mitgliedern an.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<VPTeamMembers
|
||||||
|
size="medium"
|
||||||
|
:members="[
|
||||||
|
{ avatar: '...', name: '...' },
|
||||||
|
{ avatar: '...', name: '...' },
|
||||||
|
...
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface Props {
|
||||||
|
// Size of each members. Defaults to `medium`.
|
||||||
|
size?: 'small' | 'medium'
|
||||||
|
|
||||||
|
// List of members to display.
|
||||||
|
members: TeamMember[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TeamMember {
|
||||||
|
// Avatar image for the member.
|
||||||
|
avatar: string
|
||||||
|
|
||||||
|
// Name of the member.
|
||||||
|
name: string
|
||||||
|
|
||||||
|
// Title to be shown below member's name.
|
||||||
|
// e.g. Developer, Software Engineer, etc.
|
||||||
|
title?: string
|
||||||
|
|
||||||
|
// Organization that the member belongs.
|
||||||
|
org?: string
|
||||||
|
|
||||||
|
// URL for the organization.
|
||||||
|
orgLink?: string
|
||||||
|
|
||||||
|
// Description for the member.
|
||||||
|
desc?: string
|
||||||
|
|
||||||
|
// Social links. e.g. GitHub, Twitter, etc. You may pass in
|
||||||
|
// the Social Links object here.
|
||||||
|
// See: https://vitepress.dev/reference/default-theme-config.html#sociallinks
|
||||||
|
links?: SocialLink[]
|
||||||
|
|
||||||
|
// URL for the sponsor page for the member.
|
||||||
|
sponsor?: string
|
||||||
|
|
||||||
|
// Text for the sponsor link. Defaults to 'Sponsor'.
|
||||||
|
actionText?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## `<VPTeamPage>`
|
||||||
|
|
||||||
|
The root component when creating a full team page. It only accepts a single slot. It will style all passed in team related components.
|
||||||
|
|
||||||
|
## `<VPTeamPageTitle>`
|
||||||
|
|
||||||
|
Adds "title" section of the page. Best use at the very beginning under `<VPTeamPage>`. It accepts `#title` and `#lead` slot.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<VPTeamPage>
|
||||||
|
<VPTeamPageTitle>
|
||||||
|
<template #title>
|
||||||
|
Our Team
|
||||||
|
</template>
|
||||||
|
<template #lead>
|
||||||
|
The development of VitePress is guided by an international
|
||||||
|
team, some of whom have chosen to be featured below.
|
||||||
|
</template>
|
||||||
|
</VPTeamPageTitle>
|
||||||
|
</VPTeamPage>
|
||||||
|
```
|
||||||
|
|
||||||
|
## `<VPTeamPageSection>`
|
||||||
|
|
||||||
|
Creates a "section" with in team page. It accepts `#title`, `#lead`, and `#members` slot. Du kannst add as many sections as you like inside `<VPTeamPage>`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<VPTeamPage>
|
||||||
|
...
|
||||||
|
<VPTeamPageSection>
|
||||||
|
<template #title>Partners</template>
|
||||||
|
<template #lead>Lorem ipsum...</template>
|
||||||
|
<template #members>
|
||||||
|
<VPTeamMembers :members="data" />
|
||||||
|
</template>
|
||||||
|
</VPTeamPageSection>
|
||||||
|
</VPTeamPage>
|
||||||
|
```
|
||||||
@ -0,0 +1,253 @@
|
|||||||
|
---
|
||||||
|
outline: deep
|
||||||
|
description: Referenz aller verfügbaren Frontmatter-Konfigurationsoptionen für VitePress-Markdown-Seiten.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Frontmatter-Konfiguration
|
||||||
|
|
||||||
|
Frontmatter ermöglicht die Konfiguration einzelner Seiten. In jeder Markdown-Datei kannst du Frontmatter verwenden, um Konfigurationsoptionen auf Website- oder Theme-Ebene zu überschreiben. Außerdem gibt es Optionen, die nur im Frontmatter definiert werden können.
|
||||||
|
|
||||||
|
Beispiel usage:
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
title: Dokumentation mit VitePress
|
||||||
|
editLink: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Du kannst über das globale `$frontmatter` in Vue-Ausdrücken auf Frontmatter-Daten zugreifen:
|
||||||
|
|
||||||
|
```md
|
||||||
|
{{ $frontmatter.title }}
|
||||||
|
```
|
||||||
|
|
||||||
|
## title
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
|
||||||
|
Titel der Seite. Entspricht [config.title](./site-config#title) und überschreibt die Konfiguration auf Websiteebene.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
title: VitePress
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
## titleTemplate
|
||||||
|
|
||||||
|
- Type: `string | boolean`
|
||||||
|
|
||||||
|
Suffix für den Titel. Entspricht [config.titleTemplate](./site-config#titletemplate) und überschreibt die Konfiguration auf Websiteebene.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
title: VitePress
|
||||||
|
titleTemplate: Statischer Website-Generator auf Basis von Vite und Vue
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
## description
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
|
||||||
|
Beschreibung der Seite. Entspricht [config.description](./site-config#description) und überschreibt die Konfiguration auf Websiteebene.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
description: VitePress
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
## head
|
||||||
|
|
||||||
|
- Type: `HeadConfig[]`
|
||||||
|
|
||||||
|
Gibt zusätzliche Head-Tags an, die für die aktuelle Seite eingefügt werden. Sie werden mit den über die Konfiguration auf Websiteebene eingefügten Head-Tags [zusammengeführt](./site-config#head).
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
head:
|
||||||
|
- - meta
|
||||||
|
- name: description
|
||||||
|
content: hello
|
||||||
|
- - meta
|
||||||
|
- name: keywords
|
||||||
|
content: super duper SEO
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
type HeadConfig =
|
||||||
|
| [string, Record<string, string>]
|
||||||
|
| [string, Record<string, string>, string]
|
||||||
|
```
|
||||||
|
|
||||||
|
## dir
|
||||||
|
|
||||||
|
- Type: `'ltr' | 'rtl' | 'auto'`
|
||||||
|
|
||||||
|
Überschreibt die [Schreibrichtung](./site-config#dir) der Website für die aktuelle Seite.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
dir: rtl
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
## Standard-Theme Only
|
||||||
|
|
||||||
|
Die folgenden Frontmatter-Optionen gelten nur bei Verwendung des Standard-Themes.
|
||||||
|
|
||||||
|
### layout
|
||||||
|
|
||||||
|
- Type: `doc | home | page`
|
||||||
|
- Default: `doc`
|
||||||
|
|
||||||
|
Legt das Layout der Seite fest.
|
||||||
|
|
||||||
|
- `doc` - Wendet die standardmäßigen Dokumentationsstile auf den Markdown-Inhalt an.
|
||||||
|
- `home` - Spezielles Layout für die „Startseite“. Du kannst zusätzliche Optionen wie `hero` und `features` hinzufügen, um schnell ansprechende Startseiten zu erstellen.
|
||||||
|
- `page` - Verhält sich ähnlich wie `doc`, wendet jedoch keine Stile auf den Inhalt an. Nützlich, wenn du eine vollständig eigene Seite erstellen möchtest.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
layout: doc
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### hero <Badge type="info" text="home page only" />
|
||||||
|
|
||||||
|
Definiert den Inhalt des Hero-Bereichs der Startseite, wenn `layout` auf `home` gesetzt ist. Weitere Details findest du unter [Standard-Theme: Startseite](./default-theme-home-page).
|
||||||
|
|
||||||
|
### features <Badge type="info" text="home page only" />
|
||||||
|
|
||||||
|
Definiert die im Feature-Bereich anzuzeigenden Elemente, wenn `layout` auf `home` gesetzt ist. Weitere Details findest du unter [Standard-Theme: Startseite](./default-theme-home-page).
|
||||||
|
|
||||||
|
### navbar
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `true`
|
||||||
|
|
||||||
|
Ob [navbar](./default-theme-nav).
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
navbar: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### sidebar
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `true`
|
||||||
|
|
||||||
|
Ob [sidebar](./default-theme-sidebar).
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
sidebar: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### aside
|
||||||
|
|
||||||
|
- Type: `boolean | 'left'`
|
||||||
|
- Default: `true`
|
||||||
|
|
||||||
|
Definiert die Position der Aside-Komponente im `doc`-Layout.
|
||||||
|
|
||||||
|
Bei `false` wird der Aside-Container nicht gerendert.\
|
||||||
|
Bei `true` wird der Aside-Container rechts gerendert.\
|
||||||
|
Bei `'left'` wird der Aside-Container links gerendert.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
aside: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### outline
|
||||||
|
|
||||||
|
- Type: `number | [number, number] | 'deep' | false`
|
||||||
|
- Default: `2`
|
||||||
|
|
||||||
|
Die Überschriftenebenen, die in der Seitenübersicht für die Seite angezeigt werden. Entspricht [config.themeConfig.outline.level](./default-theme-config#outline) und überschreibt den Wert der Konfiguration auf Websiteebene.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
outline: [2, 4]
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### lastUpdated
|
||||||
|
|
||||||
|
- Type: `boolean | Date`
|
||||||
|
- Default: `true`
|
||||||
|
|
||||||
|
Ob der Text für die [letzte Aktualisierung](./default-theme-last-updated) in der Fußzeile der aktuellen Seite angezeigt wird. Wenn ein Zeitpunkt angegeben ist, wird dieser anstelle des letzten Änderungszeitpunkts aus Git angezeigt.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
lastUpdated: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### editLink
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `true`
|
||||||
|
|
||||||
|
Ob ein [Bearbeitungslink](./default-theme-edit-link) in der Fußzeile der aktuellen Seite angezeigt wird.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
editLink: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### footer
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `true`
|
||||||
|
|
||||||
|
Ob die [Fußzeile](./default-theme-footer) angezeigt wird.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
footer: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
### pageClass
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
|
||||||
|
Füge einer bestimmten Seite einen zusätzlichen Klassennamen hinzu.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
pageClass: custom-page-class
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Anschließend kannst du die Stile dieser bestimmten Seite in der Datei `.vitepress/theme/custom.css` anpassen:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.custom-page-class {
|
||||||
|
/* page-specific styles */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### isHome
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
|
||||||
|
Das Standard-Theme verwendet Prüfungen wie `frontmatter.layout === 'home'`, um festzustellen, ob die aktuelle Seite die Startseite ist.\
|
||||||
|
Dies ist nützlich, wenn du die Startseitenelemente in einem eigenen Layout erzwingen möchtest.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
isHome: true
|
||||||
|
---
|
||||||
|
```
|
||||||
@ -0,0 +1,223 @@
|
|||||||
|
---
|
||||||
|
description: Referenz der VitePress-Runtime-APIs einschließlich Composables, Hilfsfunktionen und integrierter Komponenten.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Runtime API
|
||||||
|
|
||||||
|
VitePress bietet außerdem einige integrierte Komponenten, die global verwendet werden können.
|
||||||
|
|
||||||
|
Die Hilfsmethoden können global aus `vitepress` importiert werden und werden normalerweise in Vue-Komponenten eigener Themes verwendet. Sie können jedoch auch innerhalb von `.md`-Seiten verwendet werden, da Markdown-Dateien in Vue-[Single-File-Komponenten](https://vuejs.org/guide/scaling-up/sfc.html) kompiliert werden.
|
||||||
|
|
||||||
|
Methoden, die mit `use*` beginnen, sind [Vue-3-Composition-API](https://vuejs.org/guide/introduction.html#composition-api)-Funktionen („Composables“), die nur innerhalb von `setup()` oder `<script setup>` verwendet werden können.
|
||||||
|
|
||||||
|
## `useData` <Badge type="info" text="composable" />
|
||||||
|
|
||||||
|
Gibt seitenspezifische Daten zurück. Das zurückgegebene Objekt hat folgenden Typ:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface VitePressData<T = any> {
|
||||||
|
/**
|
||||||
|
* Metadaten auf Websiteebene
|
||||||
|
*/
|
||||||
|
site: Ref<SiteData<T>>
|
||||||
|
/**
|
||||||
|
* themeConfig aus .vitepress/config.js
|
||||||
|
*/
|
||||||
|
theme: Ref<T>
|
||||||
|
/**
|
||||||
|
* Metadaten auf Seitenebene
|
||||||
|
*/
|
||||||
|
page: Ref<PageData>
|
||||||
|
/**
|
||||||
|
* Frontmatter der Seite
|
||||||
|
*/
|
||||||
|
frontmatter: Ref<PageData['frontmatter']>
|
||||||
|
/**
|
||||||
|
* Dynamic route params
|
||||||
|
*/
|
||||||
|
params: Ref<PageData['params']>
|
||||||
|
title: Ref<string>
|
||||||
|
description: Ref<string>
|
||||||
|
lang: Ref<string>
|
||||||
|
isDark: Ref<boolean>
|
||||||
|
dir: Ref<'ltr' | 'rtl' | 'auto'>
|
||||||
|
localeIndex: Ref<string>
|
||||||
|
/**
|
||||||
|
* Current location hash
|
||||||
|
*/
|
||||||
|
hash: Ref<string>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PageData {
|
||||||
|
title: string
|
||||||
|
titleTemplate?: string | boolean
|
||||||
|
description: string
|
||||||
|
relativePath: string
|
||||||
|
filePath: string
|
||||||
|
headers: Header[]
|
||||||
|
frontmatter: Record<string, any>
|
||||||
|
params?: Record<string, any>
|
||||||
|
isNotFound?: boolean
|
||||||
|
lastUpdated?: number
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`page.headers` wird nur gefüllt, wenn [`markdown.headers`](./site-config#markdown) aktiviert ist. Ohne diese Option bleibt es ein leeres Array. Die Seitenübersicht des Standard-Themes liest gerenderte Überschriften aus dem Seiteninhalt, sodass sie auch bei leerem `page.headers` angezeigt werden kann.
|
||||||
|
|
||||||
|
**Beispiel:**
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { useData } from 'vitepress'
|
||||||
|
|
||||||
|
const { theme } = useData()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>{{ theme.footer.copyright }}</h1>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## `useRoute` <Badge type="info" text="composable" />
|
||||||
|
|
||||||
|
Gibt das aktuelle Routenobjekt mit folgendem Typ zurück:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface Route {
|
||||||
|
path: string
|
||||||
|
data: PageData
|
||||||
|
component: Component | null
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## `useRouter` <Badge type="info" text="composable" />
|
||||||
|
|
||||||
|
Gibt die VitePress-Routerinstanz zurück, mit der du programmgesteuert zu einer anderen Seite navigieren kannst.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface Router {
|
||||||
|
/**
|
||||||
|
* Current route.
|
||||||
|
*/
|
||||||
|
route: Route
|
||||||
|
/**
|
||||||
|
* Navigate to a new URL.
|
||||||
|
*/
|
||||||
|
go: (to?: string) => Promise<void>
|
||||||
|
/**
|
||||||
|
* Called before the route changes. Return `false` to cancel the navigation.
|
||||||
|
*/
|
||||||
|
onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>
|
||||||
|
/**
|
||||||
|
* Called before the page component is loaded (after the history state is updated).
|
||||||
|
* Return `false` to cancel the navigation.
|
||||||
|
*/
|
||||||
|
onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
|
||||||
|
/**
|
||||||
|
* Called after the page component is loaded (before the page component is updated).
|
||||||
|
*/
|
||||||
|
onAfterPageLoad?: (to: string) => Awaitable<void>
|
||||||
|
/**
|
||||||
|
* Called after the route changes.
|
||||||
|
*/
|
||||||
|
onAfterRouteChange?: (to: string) => Awaitable<void>
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Weise der Routerinstanz Handler für Routenänderungen zu:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
router.onBeforeRouteChange = (to) => {
|
||||||
|
console.log('navigating to', to)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Bei eigenen Themes ist derselbe Router über [`enhanceApp`](../guide/custom-theme#theme-interface).
|
||||||
|
|
||||||
|
## `useIcon` <Badge type="info" text="composable" />
|
||||||
|
|
||||||
|
- **Type**: `(icon: MaybeRefOrGetter<string | { svg: string } | undefined>, el?: MaybeRefOrGetter<HTMLElement | null>) => ComputedRef<string | undefined>`
|
||||||
|
|
||||||
|
Rendert ein [Iconify](https://iconify.design/)-Symbol über die Icon-Pipeline von VitePress. Erwartet eine vollständig qualifizierte `collection:name` (aufgelöst anhand der `@iconify-json/*`-Pakete in den Abhängigkeiten deines Projekts) und gibt die Klasse zurück, die auf dem Element gesetzt werden soll — `vpi-<collection>-<name>`.
|
||||||
|
|
||||||
|
Während SSR wird der Name im [`SSGContext`](./site-config#postrender) registriert, sodass der Build die Symbolstile in das erzeugte Stylesheet schreibt. Im Entwicklungsmodus liefert der Entwicklungsserver Symbole bei Bedarf aus den lokal installierten Sammlungen. Kein Symbol wird jemals von einem externen Dienst geladen.
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { useIcon } from 'vitepress'
|
||||||
|
import { useTemplateRef } from 'vue'
|
||||||
|
|
||||||
|
const el = useTemplateRef('el')
|
||||||
|
const iconClass = useIcon('lucide:rocket', el)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span ref="el" :class="iconClass" />
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
Übergebe die Template-Referenz des Elements, das die Klasse trägt, damit der Entwicklungsmodus das Symbol darauf auflösen kann. Das Element benötigt die Maskenregeln des Standard-Themes; bei einem eigenen Theme ohne diese Regeln verwendet der Entwicklungsmodus ein entsprechendes Inline-Äquivalent und das erzeugte Stylesheet enthält für die Produktion Basisregeln ohne Spezifität.
|
||||||
|
|
||||||
|
Bei Verwendung des Standard-Themes kapselt die Komponente `VPIcon` aus `vitepress/theme` dieses Composable (und akzeptiert auch eine rohe `{ svg }`-Zeichenkette):
|
||||||
|
|
||||||
|
```vue-html
|
||||||
|
<VPIcon icon="lucide:rocket" />
|
||||||
|
```
|
||||||
|
|
||||||
|
Symbole, die nur auf dem Client gerendert werden (z. B. innerhalb von `<ClientOnly />`), können während des Builds nicht erfasst werden. Liste sie stattdessen unter [`icons.include`](./site-config#icons) auf.
|
||||||
|
|
||||||
|
## `withBase` <Badge type="info" text="helper" />
|
||||||
|
|
||||||
|
- **Type**: `(path: string) => string`
|
||||||
|
|
||||||
|
Stellt das konfigurierte [`base`](./site-config#base) einem angegebenen URL-Pfad voran. Siehe auch [Basis-URL](../guide/asset-handling#base-url).
|
||||||
|
|
||||||
|
## `<Inhalt />` <Badge type="info" text="component" />
|
||||||
|
|
||||||
|
Die Komponente `<Content />` zeigt den gerenderten Markdown-Inhalt an. Nützlich [beim Erstellen eines eigenen Themes](../guide/custom-theme).
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<h1>Custom Layout!</h1>
|
||||||
|
<Content />
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## `<ClientOnly />` <Badge type="info" text="component" />
|
||||||
|
|
||||||
|
Die Komponente `<ClientOnly />` rendert ihren Slot nur auf der Clientseite.
|
||||||
|
|
||||||
|
Da VitePress-Anwendungen beim Erzeugen statischer Builds in Node.js serverseitig gerendert werden, muss jede Vue-Verwendung den Anforderungen an universellen Code entsprechen. Kurz gesagt: Greife nur in `beforeMount`- oder `mounted`-Hooks auf Browser-/DOM-APIs zu.
|
||||||
|
|
||||||
|
Wenn du nicht SSR-kompatible Komponenten verwendest oder demonstrierst (beispielsweise solche mit eigenen Direktiven), kannst du sie in die `ClientOnly`-Komponente einschließen.
|
||||||
|
|
||||||
|
```vue-html
|
||||||
|
<ClientOnly>
|
||||||
|
<NonSSRFriendlyComponent />
|
||||||
|
</ClientOnly>
|
||||||
|
```
|
||||||
|
|
||||||
|
- Related: [SSR Compatibility](../guide/ssr-compat)
|
||||||
|
|
||||||
|
## `$frontmatter` <Badge type="info" text="template global" />
|
||||||
|
|
||||||
|
Greife direkt auf die [Frontmatter](../guide/frontmatter)-Daten in Vue-Ausdrücken zu.
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
title: Hello
|
||||||
|
---
|
||||||
|
|
||||||
|
# {{ $frontmatter.title }}
|
||||||
|
```
|
||||||
|
|
||||||
|
## `$params` <Badge type="info" text="template global" />
|
||||||
|
|
||||||
|
Greife direkt auf die [Parameter dynamischer Routen](../guide/routing#dynamic-routes) in Vue-Ausdrücken zu.
|
||||||
|
|
||||||
|
```md
|
||||||
|
- package name: {{ $params.pkg }}
|
||||||
|
- version: {{ $params.version }}
|
||||||
|
```
|
||||||
@ -0,0 +1,862 @@
|
|||||||
|
---
|
||||||
|
outline: deep
|
||||||
|
description: Vollständige Referenz der VitePress-Website-Konfigurationsoptionen einschließlich Einstellungen auf Anwendungsebene, Theme-Konfiguration und Build-Optionen.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Website-Konfiguration
|
||||||
|
|
||||||
|
In der Website-Konfiguration definierst du die globalen Einstellungen der Website. Konfigurationsoptionen auf Anwendungsebene gelten für jede VitePress-Website, unabhängig vom verwendeten Theme. Zum Beispiel das Basisverzeichnis oder den Titel der Website.
|
||||||
|
|
||||||
|
## Übersicht
|
||||||
|
|
||||||
|
### Auflösung der Konfiguration
|
||||||
|
|
||||||
|
Die Konfigurationsdatei wird immer aus `<root>/.vitepress/config.[ext]`, wobei `<root>` dein VitePress-[Projektstammverzeichnis](../guide/routing#root-and-source-directory) ist und `[ext]` eine der unterstützten Dateierweiterungen bezeichnet. TypeScript wird standardmäßig unterstützt. Unterstützte Erweiterungen sind `.js`, `.ts`, `.mjs` und `.mts`.
|
||||||
|
|
||||||
|
Es wird empfohlen, in Konfigurationsdateien die ES-Modul-Syntax zu verwenden. Die Konfigurationsdatei sollte standardmäßig ein Objekt exportieren:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
// app level config options
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'VitePress',
|
||||||
|
description: 'Statischer Website-Generator auf Basis von Vite und Vue.',
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
::: details Dynamische (asynchrone) Konfiguration
|
||||||
|
|
||||||
|
Wenn du die Konfiguration dynamisch erzeugen musst, kannst du auch standardmäßig eine Funktion exportieren. Zum Beispiel:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
export default async () => {
|
||||||
|
const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
|
||||||
|
|
||||||
|
return defineConfig({
|
||||||
|
// app level config options
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'VitePress',
|
||||||
|
description: 'Statischer Website-Generator auf Basis von Vite und Vue.',
|
||||||
|
|
||||||
|
// Konfigurationsoptionen auf Theme-Ebene
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
...posts.map((post) => ({
|
||||||
|
text: post.name,
|
||||||
|
link: `/posts/${post.name}`
|
||||||
|
}))
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Du kannst auch `await` auf oberster Ebene verwenden. Zum Beispiel:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
const posts = await (await fetch('https://my-cms.com/blog-posts')).json()
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
// app level config options
|
||||||
|
lang: 'en-US',
|
||||||
|
title: 'VitePress',
|
||||||
|
description: 'Statischer Website-Generator auf Basis von Vite und Vue.',
|
||||||
|
|
||||||
|
// Konfigurationsoptionen auf Theme-Ebene
|
||||||
|
themeConfig: {
|
||||||
|
sidebar: [
|
||||||
|
...posts.map((post) => ({
|
||||||
|
text: post.name,
|
||||||
|
link: `/posts/${post.name}`
|
||||||
|
}))
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
### Konfigurations-IntelliSense
|
||||||
|
|
||||||
|
Die Verwendung des Helpers `defineConfig` stellt TypeScript-basierte IntelliSense für Konfigurationsoptionen bereit. Sofern deine IDE dies unterstützt, sollte dies sowohl in JavaScript als auch in TypeScript funktionieren.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
// ...
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Typisierte Theme-Konfiguration
|
||||||
|
|
||||||
|
Standardmäßig erwartet der Helper `defineConfig` den Theme-Konfigurationstyp des Standard-Themes:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineConfig } from 'vitepress'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
themeConfig: {
|
||||||
|
// Typ ist `DefaultTheme.Config`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Wenn du ein eigenes Theme verwendest und Typprüfungen für dessen Theme-Konfiguration möchtest, musst du stattdessen `defineConfigWithTheme` verwenden und den Konfigurationstyp deines eigenen Themes als generisches Argument übergeben:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineConfigWithTheme } from 'vitepress'
|
||||||
|
import type { ThemeConfig } from 'your-theme'
|
||||||
|
|
||||||
|
export default defineConfigWithTheme<ThemeConfig>({
|
||||||
|
themeConfig: {
|
||||||
|
// Type is `ThemeConfig`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vite, Vue & Markdown Config
|
||||||
|
|
||||||
|
- **Vite**
|
||||||
|
|
||||||
|
Du kannst die zugrunde liegende Vite-Instanz über die Option [vite](#vite) in deiner VitePress-Konfiguration konfigurieren. Eine separate Vite-Konfigurationsdatei ist nicht erforderlich.
|
||||||
|
|
||||||
|
- **Vue**
|
||||||
|
|
||||||
|
VitePress enthält bereits das offizielle Vue-Plugin für Vite ([@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue)). Du kannst dessen Optionen über die Option [vue](#vue) in deiner VitePress-Konfiguration konfigurieren.
|
||||||
|
|
||||||
|
- **Markdown**
|
||||||
|
|
||||||
|
Du kannst die zugrunde liegende [Markdown-It](https://github.com/markdown-it/markdown-it)-Instanz über die Option [markdown](#markdown) in deiner VitePress-Konfiguration konfigurieren.
|
||||||
|
|
||||||
|
### Überschreibungen auf Seitenebene
|
||||||
|
|
||||||
|
Einige Einstellungen können für bestimmte Seiten über das Frontmatter überschrieben werden.
|
||||||
|
|
||||||
|
Weitere Informationen findest du unter [Frontmatter-Konfiguration](./frontmatter-config).
|
||||||
|
|
||||||
|
### Überschreibungen auf Verzeichnisebene
|
||||||
|
|
||||||
|
Einige Konfigurationseinstellungen können auf Verzeichnisebene überschrieben werden, sodass alle Seiten in diesem Verzeichnis dieselben Einstellungen verwenden können, ohne sie im Frontmatter jeder Seite wiederholen zu müssen.
|
||||||
|
|
||||||
|
Dies wird erreicht, indem im entsprechenden Verzeichnis eine Datei namens `config.ts` (oder `.js`, `.mjs` bzw. `.mts`) angelegt wird. Diese Datei sollte wie die Hauptkonfigurationsdatei ein Konfigurationsobjekt über `export default` exportieren.
|
||||||
|
|
||||||
|
Verschachtelte Verzeichnisse übernehmen die Einstellungen ihres übergeordneten Verzeichnisses; Überschreibungen werden entsprechend zusammengeführt.
|
||||||
|
|
||||||
|
Der Helper `defineAdditionalConfig` kann verwendet werden, um TypeScript-basierte IntelliSense für die verfügbaren Optionen zu erhalten. Wie bei `defineConfig` ist seine Verwendung optional.
|
||||||
|
|
||||||
|
Bei einer Website mit mehreren Sprachen möchten wir beispielsweise für jede Sprache eine andere `description` verwenden. Dazu können wir `es/config.ts` mit folgendem Inhalt anlegen:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineAdditionalConfig } from 'vitepress'
|
||||||
|
|
||||||
|
export default defineAdditionalConfig({
|
||||||
|
description: 'Generador de Sitios Estáticos desarrollado con Vite y Vue.'
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Diese `description` wird anschließend für alle Seiten im Verzeichnis `es` verwendet.
|
||||||
|
|
||||||
|
Alternativ können die Einstellungen eines Sprachverzeichnisses bei Verwendung der integrierten i18n-Funktionen über die `locales`-Einstellung in der Hauptkonfigurationsdatei überschrieben werden. Weitere Informationen findest du unter [Internationalisierung](../guide/i18n).
|
||||||
|
|
||||||
|
## Website-Metadaten
|
||||||
|
|
||||||
|
### title
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `VitePress`
|
||||||
|
- Kann pro Seite über das [Frontmatter](./frontmatter-config#title) oder auf [Verzeichnisebene](#directory-level-overrides) überschrieben werden
|
||||||
|
|
||||||
|
Titel der Website. Bei Verwendung des Standard-Themes wird er in der Navigationsleiste angezeigt.
|
||||||
|
|
||||||
|
Er wird außerdem als Standardsuffix für alle einzelnen Seitentitel verwendet, sofern [`titleTemplate`](#titletemplate) nicht definiert ist. Der endgültige Titel einer einzelnen Seite besteht aus dem Text ihrer ersten `<h1>`-Überschrift und dem globalen `title` als Suffix. Zum Beispiel bei folgender Konfiguration und folgendem Seiteninhalt:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
title: 'My Awesome Site'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```md
|
||||||
|
# Hello
|
||||||
|
```
|
||||||
|
|
||||||
|
Der Titel der Seite lautet `Hello | My Awesome Site`.
|
||||||
|
|
||||||
|
### titleTemplate
|
||||||
|
|
||||||
|
- Type: `string | boolean`
|
||||||
|
- Kann pro Seite über das [Frontmatter](./frontmatter-config#titletemplate) oder auf [Verzeichnisebene](#directory-level-overrides) überschrieben werden
|
||||||
|
|
||||||
|
Ermöglicht die Anpassung des Titelsuffixes jeder Seite oder des gesamten Titels. Zum Beispiel:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
title: 'My Awesome Site',
|
||||||
|
titleTemplate: 'Custom Suffix'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```md
|
||||||
|
# Hello
|
||||||
|
```
|
||||||
|
|
||||||
|
Der Titel der Seite lautet `Hello | Eigenes Suffix`.
|
||||||
|
|
||||||
|
Um die Darstellung des Titels vollständig anzupassen, kannst du das Symbol `:title` in `titleTemplate` verwenden:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
titleTemplate: ':title - Custom Suffix'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Hier wird `:title` durch den aus der ersten `<h1>`-Überschrift der Seite ermittelten Text ersetzt. Der Titel der vorherigen Beispielseite lautet `Hello - Eigenes Suffix`.
|
||||||
|
|
||||||
|
Die Option kann auf `false` gesetzt werden, um Titelsuffixe zu deaktivieren.
|
||||||
|
|
||||||
|
### description
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Standard: `Eine VitePress-Website`
|
||||||
|
- Can be overridden per page via [frontmatter](./frontmatter-config#description) or at the [directory level](#directory-level-overrides)
|
||||||
|
|
||||||
|
Beschreibung der Website. Sie wird als `<meta>`-Tag im HTML der Seite ausgegeben.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
description: 'A VitePress site'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### head
|
||||||
|
|
||||||
|
- Type: `HeadConfig[]`
|
||||||
|
- Default: `[]`
|
||||||
|
- Can be appended per page via [frontmatter](./frontmatter-config#head) or at the [directory level](#directory-level-overrides)
|
||||||
|
|
||||||
|
Zusätzliche Elemente, die im `<head>`-Tag des Seiten-HTML gerendert werden. Vom Benutzer hinzugefügte Tags werden nach den VitePress-Tags und vor dem schließenden `head`-Tag gerendert.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
type HeadConfig =
|
||||||
|
| [string, Record<string, string>]
|
||||||
|
| [string, Record<string, string>, string]
|
||||||
|
```
|
||||||
|
|
||||||
|
Head entries from the site config, [locale config](../guide/i18n), [directory-level config](#directory-level-overrides), [frontmatter](./frontmatter-config#head) and [`transformHead`](#transformhead) are merged in that order. A later entry replaces an earlier one with the same key instead of being appended:
|
||||||
|
|
||||||
|
- Any element with an `id` attribute is keyed by its `id`.
|
||||||
|
- A `meta` element without an `id` is keyed by its first attribute other than `content` (e.g. `name`, `property`, `http-equiv`) and that attribute's value.
|
||||||
|
|
||||||
|
Other elements are never deduplicated. To render multiple `meta` tags that would share a key, like several `<meta name="author">`, give each of them a unique `id`.
|
||||||
|
|
||||||
|
#### Beispiel: Adding a favicon
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
head: [['link', { rel: 'icon', href: '/favicon.ico' }]]
|
||||||
|
} // put favicon.ico in public directory, if base is set, use /base/favicon.ico
|
||||||
|
|
||||||
|
/* Would render:
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Beispiel: Adding Google Fonts
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
head: [
|
||||||
|
[
|
||||||
|
'link',
|
||||||
|
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' }
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'link',
|
||||||
|
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'link',
|
||||||
|
{ href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', rel: 'stylesheet' }
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Would render:
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Beispiel: Registering a service worker
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
head: [
|
||||||
|
[
|
||||||
|
'script',
|
||||||
|
{ id: 'register-sw' },
|
||||||
|
`;(() => {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.register('/sw.js')
|
||||||
|
}
|
||||||
|
})()`
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Would render:
|
||||||
|
<script id="register-sw">
|
||||||
|
;(() => {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.register('/sw.js')
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
</script>
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Beispiel: Using Google Analytics
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
head: [
|
||||||
|
[
|
||||||
|
'script',
|
||||||
|
{ async: '', src: 'https://www.googletagmanager.com/gtag/js?id=TAG_ID' }
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'script',
|
||||||
|
{},
|
||||||
|
`window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
gtag('config', 'TAG_ID');`
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Would render:
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
gtag('config', 'TAG_ID');
|
||||||
|
</script>
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
### lang
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `en-US`
|
||||||
|
- Can be overridden at the [directory level](#directory-level-overrides)
|
||||||
|
|
||||||
|
The lang attribute for the site. This will render as a `<html lang="en-US">` tag in the page HTML.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
lang: 'en-US'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### dir
|
||||||
|
|
||||||
|
- Type: `'ltr' | 'rtl' | 'auto'`
|
||||||
|
- Default: `ltr`
|
||||||
|
- Can be overridden at the [directory level](#directory-level-overrides)
|
||||||
|
|
||||||
|
The text direction of the site. This will render as a `<html dir="rtl">` tag in the page HTML, and the default theme mirrors its layout for right-to-left languages. It can also be overridden per page via [frontmatter](./frontmatter-config#dir). See [RTL Support](../guide/i18n#rtl-support).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
dir: 'rtl'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### base
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `/`
|
||||||
|
|
||||||
|
The base URL the site will be deployed at. You will need to set this if you plan to deploy your site under a sub path, for example, GitHub pages. Wenn du plan to deploy your site to `https://foo.github.io/bar/`, then you should set base to `'/bar/'`. It should always start and end with a slash.
|
||||||
|
|
||||||
|
The one exception is `'./'`, which produces a [relocatable build](../guide/deploy#relocatable-builds-relative-base): pages reference everything relative to their own location, so the same output works from any sub path (IPFS gateways, archives) without rebuilding and stays browsable when opened directly from the file system.
|
||||||
|
|
||||||
|
The base is automatisch prepended to all the URLs that start with / in other options, so you only need to specify it once.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
base: '/base/'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Can also be set per build with `vitepress build --base /base/`.
|
||||||
|
|
||||||
|
## Routing
|
||||||
|
|
||||||
|
### cleanUrls
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `false`
|
||||||
|
|
||||||
|
When set to `true`, VitePress will remove the trailing `.html` from URLs. Also see [Generating Clean URLs](../guide/routing#generating-clean-urls).
|
||||||
|
|
||||||
|
::: warning Server Support Required
|
||||||
|
Enabling this may require additional configuration on your hosting platform. For it to work, your server must be able to serve `/foo.html` when visiting `/foo` **without a redirect**.
|
||||||
|
:::
|
||||||
|
|
||||||
|
### rewrites
|
||||||
|
|
||||||
|
- Type: `Record<string, string>`
|
||||||
|
|
||||||
|
Defines custom directory <-> URL mappings. See [Routing: Route Rewrites](../guide/routing#route-rewrites) for more details.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
rewrites: {
|
||||||
|
'source/:page': 'destination/:page'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
### srcDir
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `.`
|
||||||
|
|
||||||
|
The directory where your markdown pages are stored, relative to project root. Also see [Root and Quelle Verzeichnis](../guide/routing#root-and-source-directory).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
srcDir: './src'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### srcExclude
|
||||||
|
|
||||||
|
- Type: `string[]`
|
||||||
|
- Default: `undefined`
|
||||||
|
|
||||||
|
A [glob pattern](https://github.com/mrmlnc/fast-glob#pattern-syntax) for matching markdown files that should be excluded as source content.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
srcExclude: ['**/README.md', '**/TODO.md']
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### outDir
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `./.vitepress/dist`
|
||||||
|
|
||||||
|
The build output location for the site, relative to [project root](../guide/routing#root-and-source-directory).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
outDir: '../public'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### assetsDir
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `assets`
|
||||||
|
|
||||||
|
Specify the directory to nest generated assets under. The path should be inside [`outDir`](#outdir) and is resolved relative to it.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
assetsDir: 'static'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### assetsBase
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `undefined`
|
||||||
|
|
||||||
|
URL prefix the generated assets (everything under [`assetsDir`](#assetsdir)) are served from — typically a CDN. Must be an absolute URL, a protocol-relative URL, or a root-absolute path; a trailing slash is appended if missing.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
base: '/',
|
||||||
|
assetsBase: 'https://cdn.example.com/'
|
||||||
|
// scripts, styles, fonts and imported images resolve to
|
||||||
|
// https://cdn.example.com/assets/*
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The emitted asset URL is `assetsBase` joined with the output-relative file path, so the CDN should mirror the layout of `outDir` (upload `outDir/assets` so it is reachable at `<assetsBase>/assets/*`). HTML pages, Markdown links, [`public`](../guide/asset-handling#the-public-directory) files and `hashmap.json` stay on [`base`](#base).
|
||||||
|
|
||||||
|
When `assetsBase` points at another origin, VitePress adds `crossorigin` to the emitted script and preload tags — the CDN must send `Access-Control-Allow-Origin` for your site's origin (module scripts are always fetched in CORS mode).
|
||||||
|
|
||||||
|
Only production builds are affected. `vitepress preview` serves a root-absolute `assetsBase` (like `/cdn/`) from the local dist; an external one is requested from the real URL. Can also be set per build with `vitepress build --assetsBase https://cdn.example.com/`.
|
||||||
|
|
||||||
|
### assetsShards
|
||||||
|
|
||||||
|
- Type: `number`
|
||||||
|
- Default: `undefined`
|
||||||
|
|
||||||
|
Spreads the generated assets over this many subdirectories of [`assetsDir`](#assetsdir), `assets/0/` through `assets/N-1/`, instead of one flat directory. Use it when the host caps the number of files per directory; Netlify, for example, ermöglicht 54,000. Each page emits two JavaScript files, so a site with 60,000 pages needs at least three shards, plus some headroom because files are distributed by a hash of their name.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
assetsShards: 4
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Shared chunks stay in `assets/chunks/`. A file's shard depends only on its name, so unchanged files keep their URL between builds. Only production builds are affected.
|
||||||
|
|
||||||
|
### icons
|
||||||
|
|
||||||
|
- Type: `{ include?: string[] }`
|
||||||
|
|
||||||
|
Optionen for the generated icon styles. The build collects every iconify icon rendered during SSR. Names are fully qualified as `collection:name`, resolved against the `@iconify-json/*` packages declared in your project's dependencies.
|
||||||
|
|
||||||
|
Symbole, die nur auf dem Client gerendert werden — inside `<ClientOnly>`, or after hydration — are invisible to SSR collection. List them in `include` to force them into the stylesheet:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
icons: {
|
||||||
|
include: ['mdi:home', 'simple-icons:discord']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### cacheDir
|
||||||
|
|
||||||
|
- Type: `string`
|
||||||
|
- Default: `./.vitepress/cache`
|
||||||
|
|
||||||
|
The directory for cache files, relative to [project root](../guide/routing#root-and-source-directory). Siehe auch: [cacheDir](https://vite.dev/config/shared-options.html#cachedir).
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
cacheDir: './.vitepress/.vite'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### ignoreDeadLinks
|
||||||
|
|
||||||
|
- Type: `boolean | 'localhostLinks' | (string | RegExp | ((link: string, source: string) => boolean))[]`
|
||||||
|
- Default: `false`
|
||||||
|
|
||||||
|
When set to `true`, VitePress will not fail builds due to dead links.
|
||||||
|
|
||||||
|
When set to `'localhostLinks'`, the build will fail on dead links, but won't check `localhost` links.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
ignoreDeadLinks: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
It can also be an array of exact url string, regex patterns, or custom filter functions.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
ignoreDeadLinks: [
|
||||||
|
// ignore exact url "/playground"
|
||||||
|
'/playground',
|
||||||
|
// ignore all localhost links
|
||||||
|
/^https?:\/\/localhost/,
|
||||||
|
// ignore all links include "/repl/""
|
||||||
|
/\/repl\//,
|
||||||
|
// custom function, ignore all links include "ignore"
|
||||||
|
(url) => {
|
||||||
|
return url.toLowerCase().includes('ignore')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### mpa <Badge type="warning" text="experimental" />
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `false`
|
||||||
|
|
||||||
|
When set to `true`, the production app will be built in [MPA Mode](../guide/mpa-mode). MPA mode ships 0kb JavaScript by default, at the cost of disabling client-side navigation and requires explicit opt-in for interactivity.
|
||||||
|
|
||||||
|
## Theming
|
||||||
|
|
||||||
|
### appearance
|
||||||
|
|
||||||
|
- Type: `boolean | 'dark' | 'force-dark' | 'force-auto' | import('@vueuse/core').UseDarkOptions`
|
||||||
|
- Default: `true`
|
||||||
|
|
||||||
|
Whether to enable dark mode (by adding the `.dark` class to the `<html>` element).
|
||||||
|
|
||||||
|
- If the option is set to `true`, the default theme will be determined by the user's preferred color scheme.
|
||||||
|
- If the option is set to `dark`, the theme will be dark by default, unless the user manually toggles it.
|
||||||
|
- If the option is set to `false`, users will not be able to toggle the theme.
|
||||||
|
- If the option is set to `'force-dark'`, the theme will always be dark and users will not be able to toggle it.
|
||||||
|
- If the option is set to `'force-auto'`, the theme will always be determined by the user's preferred color scheme and users will not be able to toggle it.
|
||||||
|
|
||||||
|
This option injects an inline script that restores users settings from local storage using the `vitepress-theme-appearance` key. This ensures the `.dark` class is applied before the page is rendered to avoid flickering.
|
||||||
|
|
||||||
|
`appearance.initialValue` can only be `'dark' | undefined`. Refs or getters are not supported.
|
||||||
|
|
||||||
|
### lastUpdated
|
||||||
|
|
||||||
|
- Type: `boolean`
|
||||||
|
- Default: `false`
|
||||||
|
|
||||||
|
Whether to get the last updated timestamp for each page using Git. The timestamp will be included in each page's page data, accessible via [`useData`](./runtime-api#usedata).
|
||||||
|
|
||||||
|
Bei Verwendung des Standard-Themes, enabling this option will display each page's last updated time. Du kannst customize the text via [`themeConfig.lastUpdated.text`](./default-theme-config#lastupdated) option.
|
||||||
|
|
||||||
|
## Customization
|
||||||
|
|
||||||
|
### markdown
|
||||||
|
|
||||||
|
- Type: `MarkdownOption`
|
||||||
|
|
||||||
|
Konfigurieren Markdown parser options. VitePress uses [Markdown-it](https://github.com/markdown-it/markdown-it) as the parser, and [Shiki](https://github.com/shikijs/shiki) to highlight language syntax. Inside this option, you may pass various Markdown related options to fit your needs.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
markdown: {...}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Check the [type declaration and jsdocs](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts) for all the options verfügbar.
|
||||||
|
|
||||||
|
Set `markdown.headers` to `true` or pass [`@mdit-vue/plugin-headers`](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-headers) options to collect headings into [`useData().page.headers`](./runtime-api#usedata). This option is deaktiviert by default.
|
||||||
|
|
||||||
|
### vite
|
||||||
|
|
||||||
|
- Type: `import('vite').UserConfig`
|
||||||
|
|
||||||
|
Pass raw [Vite Config](https://vite.dev/config/) to internal Vite dev server / bundler.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
vite: {
|
||||||
|
// Vite config options
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### vue
|
||||||
|
|
||||||
|
- Type: `import('@vitejs/plugin-vue').Optionen`
|
||||||
|
|
||||||
|
Pass raw [`@vitejs/plugin-vue` options](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#options) to the internal plugin instance.
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
vue: {
|
||||||
|
// @vitejs/plugin-vue options
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build Hooks
|
||||||
|
|
||||||
|
VitePress build hooks allow you to add new functionality and behaviors to your website:
|
||||||
|
|
||||||
|
- Sitemap
|
||||||
|
- Suche Indexing
|
||||||
|
- PWA
|
||||||
|
- Teleports
|
||||||
|
|
||||||
|
### buildEnd
|
||||||
|
|
||||||
|
- Type: `(siteConfig: SiteConfig) => Awaitable<void>`
|
||||||
|
|
||||||
|
`buildEnd` is a build CLI hook, it will run after build (SSG) finish but before VitePress CLI process exits.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
async buildEnd(siteConfig) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### postRender
|
||||||
|
|
||||||
|
- Type: `(context: SSGContext) => Awaitable<SSGContext | void>`
|
||||||
|
|
||||||
|
`postRender` is a build hook, called when SSG rendering is done. It will allow you to handle the teleports content during SSG.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
async postRender(context) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface SSGContext {
|
||||||
|
content: string
|
||||||
|
teleports?: Record<string, string>
|
||||||
|
vpIcons: Set<string>
|
||||||
|
[key: string]: any
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### transformHead
|
||||||
|
|
||||||
|
- Type: `(context: TransformContext) => Awaitable<HeadConfig[]>`
|
||||||
|
|
||||||
|
`transformHead` is a build hook to add extra tags to the `<head>` of each page. It ermöglicht you to add head entries that cannot be statically added to your VitePress config. You only need to zurückgeben extra entries, they will be merged automatisch with the existing ones.
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
Don't mutate anything inside the `context`.
|
||||||
|
:::
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
async transformHead(context) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface TransformContext {
|
||||||
|
page: string // e.g. index.md (relative to srcDir)
|
||||||
|
assets: string[] // all non-js/css assets as fully resolved public URL
|
||||||
|
siteConfig: SiteConfig
|
||||||
|
siteData: SiteData
|
||||||
|
pageData: PageData
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
head: HeadConfig[]
|
||||||
|
content: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This hook is only called when performing a build, it is not called during dev.
|
||||||
|
|
||||||
|
The extra tags will be added to the static HTML files generated by the build. They will not be updated during client-side navigation.
|
||||||
|
|
||||||
|
In many cases, using the [`transformPageData`](#transformpagedata) hook is a cleaner solution. That hook will also be applied to both client-side navigation and during dev. But if generating the head tags is computationally expensive then `transformHead` will avoid that overhead during dev.
|
||||||
|
|
||||||
|
#### Beispiel: Adding `og:image` meta
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
async transformHead(context) {
|
||||||
|
if (context.page === '404.md') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// The implementation details of `generatePageImage` would depend
|
||||||
|
// on your requirements. Here we assume it generates a suitable
|
||||||
|
// image for each page and returns the image URL.
|
||||||
|
const imageUrl = await generatePageImage(context)
|
||||||
|
|
||||||
|
return [[
|
||||||
|
'meta',
|
||||||
|
{ name: 'og:image', content: imageUrl }
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Here we're assuming that the image URL is dynamic and time-consuming to generate. Using `transformHead` avoids that overhead during development.
|
||||||
|
|
||||||
|
For simpler cases, it may be possible to use the [`head`](./frontmatter-config#head) setting in frontmatter, or [`transformPageData`](#transformpagedata).
|
||||||
|
|
||||||
|
### transformHtml
|
||||||
|
|
||||||
|
- Type: `(code: string, id: string, context: TransformContext) => Awaitable<string | void>`
|
||||||
|
|
||||||
|
`transformHtml` is a build hook to transform the content of each page before saving to disk.
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
Don't mutate anything inside the `context`. Also, modifying the html content may cause hydration problems in runtime.
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: note
|
||||||
|
The icon stylesheet link still carries its `vp-icons.__VP_ICONS_HASH__.css` placeholder at this point — the content hash only exists once every page has rendered, and it is substituted right after. Hooks that inline or fingerprint head assets should skip that tag.
|
||||||
|
:::
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
async transformHtml(code, id, context) {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### transformPageData
|
||||||
|
|
||||||
|
- Type: `(pageData: PageData, context: TransformPageContext) => Awaitable<Partial<PageData> | { [key: string]: any } | void>`
|
||||||
|
|
||||||
|
`transformPageData` is a hook to transform the `pageData` of each page. Du kannst directly mutate `pageData` or zurückgeben changed values which will be merged into the page data.
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
Don't mutate anything inside the `context` and be careful that this might impact the performance of dev server, especially if you have some network requests or heavy computations (like generating images) in the hook. Du kannst check for `process.env.NODE_ENV === 'production'` for conditional logic.
|
||||||
|
:::
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
async transformPageData(pageData, { siteConfig }) {
|
||||||
|
pageData.contributors = await getPageContributors(pageData.relativePath)
|
||||||
|
}
|
||||||
|
|
||||||
|
// or return data to be merged
|
||||||
|
async transformPageData(pageData, { siteConfig }) {
|
||||||
|
return {
|
||||||
|
contributors: await getPageContributors(pageData.relativePath)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface TransformPageContext {
|
||||||
|
siteConfig: SiteConfig
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Beispiel: Adding a `<meta name="og:title">`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
transformPageData(pageData) {
|
||||||
|
const title = pageData.frontmatter.layout === 'home'
|
||||||
|
? 'VitePress'
|
||||||
|
: `${pageData.title} | VitePress`
|
||||||
|
|
||||||
|
pageData.frontmatter.head ??= []
|
||||||
|
pageData.frontmatter.head.push([
|
||||||
|
'meta',
|
||||||
|
{ name: 'og:title', content: title }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Beispiel: Adding a canonical URL `<link>`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export default {
|
||||||
|
transformPageData(pageData) {
|
||||||
|
const canonicalUrl = `https://example.com/${pageData.relativePath}`
|
||||||
|
.replace(/index\.md$/, '')
|
||||||
|
.replace(/\.md$/, '.html')
|
||||||
|
|
||||||
|
pageData.frontmatter.head ??= []
|
||||||
|
pageData.frontmatter.head.push([
|
||||||
|
'link',
|
||||||
|
{ rel: 'canonical', href: canonicalUrl }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
Loading…
Reference in new issue