From 7cd7caf0a994d2f111cfbc25a5a7b43a2331ef66 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 10:27:39 +0200 Subject: [PATCH 001/199] Create German index for VitePress documentation Added German documentation for VitePress with features and hero section. --- docs/de/index.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 docs/de/index.md diff --git a/docs/de/index.md b/docs/de/index.md new file mode 100644 index 000000000..a3c487bb8 --- /dev/null +++ b/docs/de/index.md @@ -0,0 +1,36 @@ +--- +description: VitePress ist ein auf Vite und Vue basierender Generator für statische Websites, mit dem man aus Markdown ansprechende Dokumentationen erstellen kann. +layout: home + +hero: + name: VitePress + text: Vite & Vue basierender Generator für statische Websites + tagline: Markdown zu wunderschönen Docs in 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: + title: Fokussieren auf den Inhalt + details: Erstelle mühelos wunderschöne Dokumentationsseiten mit Markdown. + - icon: + title: Genieße Vite DX + details: Sofortiger Serverstart, blitzschnelle Hot-Updates und Plugins aus dem Vite-Ökosystem. + - icon: + title: Anpassen mit Vue + details: Nutze Vue-Syntax und Komponenten direkt in Markdown, oder eigene Themes mit Vhe. + - icon: + title: Liefer schnelle Seitem + details: Schneller Initial-Load mit statischem HTML, schnellem Post-Load und Navigation mit Client-Side Routing. +--- From ba94f35c351253dbb50bcff8792ecdb1cd45ef51 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 10:38:07 +0200 Subject: [PATCH 002/199] Add guide on handling static assets in VitePress This document explains how to reference and manage static assets like images, media, and fonts in VitePress. It covers topics such as referencing static assets, the public directory, base URL configuration, and serving assets via a CDN. --- docs/de/guide/asset-handling.md | 82 +++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 docs/de/guide/asset-handling.md diff --git a/docs/de/guide/asset-handling.md b/docs/de/guide/asset-handling.md new file mode 100644 index 000000000..30a38c318 --- /dev/null +++ b/docs/de/guide/asset-handling.md @@ -0,0 +1,82 @@ +--- +description: Erfahre, wie man in VitePress auf statische Assets wie Bilder, Medien und Schriftarten verweisen und diese handhaben kann. +--- + +# Asset-Handhabung + +## Referenzieren statischer Assets + +Alle Markdown-Dateien werden in Vue-Komponenten kompiliert und von [Vite](https://vite.dev/guide/assets.html) verarbeitet. Sie können – **und sollten** – Assets über relative URLs referenzieren: + +```md +![Ein Bild](./image.png) +``` + +Sie können in Ihren Markdown-Dateien, `*.vue`-Komponenten des Themes, Styles und reinen `.css`-Dateien auf statische Assets verweisen – entweder über absolute Public-Pfade (ausgehend vom Projektstammverzeichnis) oder über relative Pfade (bezogen auf das Dateisystem). Letzteres entspricht dem Verhalten, das Sie bereits von Vite, der Vue CLI oder dem `file-loader` von webpack kennen. + +Gängige Datei-Formate für Bilder, Medien und Schriftarten werden automatisch erkannt und als Assets eingebunden. + +::: tip Verlinkte Dateien werden nicht als Assets behandelt +PDFs oder andere Dokumente, auf die in Markdown-Dateien verlinkt wird, werden nicht automatisch als Assets behandelt. Um verlinkte Dateien verfügbar zu machen, müssen Sie diese manuell im [`public`](#the-public-directory)-Verzeichnis Ihres Projekts ablegen. +::: + +Alle referenzierten Assets – einschließlich derer, die absolute Pfade verwenden – werden im Produktions-Build mit einem Hash-Dateinamen in das Ausgabeverzeichnis kopiert. Assets, auf die nicht verwiesen wird, werden nicht kopiert. Bild-Assets, die kleiner als 4 KB sind, werden als Base64 eingebettet; dieses Verhalten lässt sich über die Konfigurationsoption [`vite`](../reference/site-config#vite) anpassen. + +Alle **statischen** Pfadreferenzen, einschließlich absoluter Pfade, sollten auf der Struktur Ihres Arbeitsverzeichnisses basieren. + +## Das öffentliche Verzeichnis + +Manchmal müssen statische Assets bereitgestellt werden, auf die in Ihren Markdown- oder Theme-Komponenten nicht direkt verwiesen wird, oder Sie möchten bestimmte Dateien unter ihrem ursprünglichen Dateinamen ausliefern. Beispiele für solche Dateien sind `robots.txt`, Favicons und PWA-Icons. + +Sie können diese Dateien im `public`-Verzeichnis innerhalb des [Quellverzeichnisses](./routing#source-directory) ablegen. Wenn sich das Stammverzeichnis Ihres Projekts beispielsweise unter `./docs` befindet und Sie den Standardpfad für das Quellverzeichnis verwenden, lautet der Pfad zu Ihrem `public`-Verzeichnis `./docs/public`. + +Im Ordner `public` abgelegte Assets werden unverändert in das Stammverzeichnis des Ausgabeordners kopiert. + +Beachten Sie, dass Dateien aus dem Ordner `public` über einen absoluten Pfad ausgehend vom Stammverzeichnis referenziert werden sollten – so sollte beispielsweise `public/icon.png` im Quellcode stets als `/icon.png` angesprochen werden. + +## Basis-URL + +Wenn Ihre Website unter einer URL bereitgestellt wird, die nicht das Stammverzeichnis (Root) ist, legen Sie die Option [`base`](../reference/site-config#base) fest. Wenn Sie Ihre Website beispielsweise unter `https://foo.github.io/bar/` bereitstellen möchten, sollte `base` auf `'/bar/'` gesetzt werden. + +Verweise auf statische Assets werden automatisch an die Basis (Base) angepasst; daher funktioniert ein absoluter Verweis auf eine Datei im Ordner `public` mit jeder beliebigen Basis und muss nie aktualisiert werden: + +```md +![Ein Bild](/bild-in-public.png) +``` + +Nur dynamisch erstellte Pfade erfordern besondere Aufmerksamkeit – zum Beispiel ein Bild, dessen `src`-Attribut auf einem Konfigurationswert des Themes basiert. Umschließe diese mit dem [`withBase`-Hilfsprogramm](../reference/runtime-api#withbase), damit der Basis-Pfad zur Laufzeit vorangestellt wird: + +```vue + + + +``` + +## Bereitstellung von Assets über ein CDN + +Um die generierten Assets – Skripte, Styles, Schriftarten und Bilder, die aus Markdown oder Komponenten importiert wurden – von einem anderen Ursprung (Origin) als die Seiten bereitzustellen, konfigurieren Sie [`assetsBase`](../reference/site-config#assetsbase): + +```ts +export default { + base: '/', + assetsBase: 'https://cdn.beispiel.de/' +} +``` + +Laden Sie das Verzeichnis `assets` aus der Build-Ausgabe auf das CDN hoch, sodass es unter `https://cdn.example.com/assets/` erreichbar ist, und stellen Sie den Rest der Ausgabe wie gewohnt auf Ihrer Website bereit. Dateien im Ordner `public` werden von `base` aus referenziert und verbleiben bei den Seiten. + +Da der Wert oft umgebungsspezifisch ist, kann er auch über die Befehlszeile übergeben werden: + +```sh +vitepress build docs --assetsBase "$CDN_URL" +``` + +::: warning CORS erforderlich +Modul-Skripte werden immer im CORS-Modus geladen; daher muss ein Cross-Origin-CDN mit einem entsprechenden `Access-Control-Allow-Origin`-Header antworten. +::: From f55c63244d92a454e8895db9bd6b578e3693edc6 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 10:43:36 +0200 Subject: [PATCH 003/199] Create VitePress configuration file Added configuration for VitePress with markdown options, navigation, sidebar, and search settings. --- docs/de/config.ts | 347 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 347 insertions(+) create mode 100644 docs/de/config.ts diff --git a/docs/de/config.ts b/docs/de/config.ts new file mode 100644 index 000000000..9224ac417 --- /dev/null +++ b/docs/de/config.ts @@ -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: 'TIP', + infoLabel: 'INFO', + warningLabel: 'WARNING', + dangerLabel: 'DANGER', + detailsLabel: 'DETAILS', + noteLabel: 'NOTE', + importantLabel: 'IMPORTANT', + cautionLabel: 'CAUTION' + }, + codeCopyButton: { + tooltipText: 'Copy code', + copiedText: 'Copied' + } +} + +export default defineAdditionalConfig({ + description: 'Static site generator with Vite and Vue', + + head: [ + [ + 'link', + // for the vazirmatn font-face defined in .vitepress/theme/styles.css + { rel: 'preconnect', href: 'https://cdn.jsdelivr.net', crossorigin: '' } + ] + ], + + themeConfig: { + nav: nav(), + + search: { options: searchOptions() }, + + sidebar: { + '/fa/guide/': { base: '/fa/guide/', items: sidebarGuide() }, + '/fa/reference/': { base: '/fa/reference/', items: sidebarReference() } + }, + + editLink: { + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', + text: 'Edit this page on GitHub' + }, + + footer: { + message: 'Released under the MIT License', + copyright: 'Copyright © 2019-present Evan You' + }, + + docFooter: { + prev: 'Previous', + next: 'Next' + }, + + outline: { + label: 'On this page' + }, + + lastUpdated: { + text: 'Last updated' + }, + + notFound: { + title: 'Page not found', + quote: + 'But if you do not change your direction, and if you keep looking, you may end up where you are heading.', + linkLabel: 'Go to home', + linkText: 'Take me home' + }, + + langMenuLabel: 'Change language', + returnToTopLabel: 'Return to top', + sidebarMenuLabel: 'Sidebar menu', + darkModeSwitchLabel: 'Dark mode', + lightModeSwitchTitle: 'Switch to light mode', + darkModeSwitchTitle: 'Switch to dark mode', + siteTitle: 'VitePress' + } +}) + +function nav(): DefaultTheme.NavItem[] { + return [ + { + text: 'Guide', + link: 'fa/guide/what-is-vitepress', + activeMatch: '/guide/' + }, + { + text: 'Reference', + link: 'fa/reference/site-config', + activeMatch: '/reference/' + }, + { + text: pkg.version, + items: [ + { + text: '1.6.4', + link: 'https://vuejs.github.io/vitepress/v1/fa/' + }, + { + text: 'Changelog', + link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md' + }, + { + text: 'Contributing', + link: 'https://github.com/vuejs/vitepress/blob/main/.github/contributing.md' + } + ] + } + ] +} + +function sidebarGuide(): DefaultTheme.SidebarItem[] { + return [ + { + text: 'Introduction', + collapsed: false, + items: [ + { text: 'What is VitePress?', link: 'what-is-vitepress' }, + { text: 'Getting Started', link: 'getting-started' }, + { text: 'Routing', link: 'routing' }, + { text: 'Deployment', link: 'deploy' } + ] + }, + { + text: 'Writing', + collapsed: false, + items: [ + { text: 'Markdown Extensions', link: 'markdown' }, + { text: 'Asset Handling', link: 'asset-handling' }, + { text: 'Frontmatter', link: 'frontmatter' }, + { text: 'Using Vue in Markdown', link: 'using-vue' }, + { text: 'Internationalization', link: 'i18n' } + ] + }, + { + text: 'Customization', + collapsed: false, + items: [ + { text: 'Using a Custom Theme', link: 'custom-theme' }, + { + text: 'Extending the Default Theme', + link: 'extending-default-theme' + }, + { text: 'Data Loading', link: 'data-loading' }, + { text: 'SSR Compatibility', link: 'ssr-compat' }, + { text: 'Connecting to a CMS', link: 'cms' } + ] + }, + { + text: 'Experimental', + collapsed: false, + items: [ + { text: 'MPA Mode', link: 'mpa-mode' }, + { text: 'Sitemap Generation', link: 'sitemap-generation' } + ] + }, + { text: 'Configuration and API Reference', base: 'fa/reference/', link: 'site-config' } + ] +} + +function sidebarReference(): DefaultTheme.SidebarItem[] { + return [ + { + text: 'Reference', + base: 'fa/reference/', + items: [ + { text: 'Site Config', link: 'site-config' }, + { text: 'Frontmatter Config', link: 'frontmatter-config' }, + { text: 'Runtime API', link: 'runtime-api' }, + { text: 'CLI', link: 'cli' }, + { + text: 'Default Theme', + base: 'fa/reference/default-theme-', + items: [ + { text: 'Overview', link: 'config' }, + { text: 'Navigation', link: 'nav' }, + { text: 'Sidebar', link: 'sidebar' }, + { text: 'Home Page', link: 'home-page' }, + { text: 'Footer', link: 'footer' }, + { text: 'Layout', link: 'layout' }, + { text: 'Badge', link: 'badge' }, + { text: 'Team Page', link: 'team-page' }, + { text: 'Prev / Next Links', link: 'prev-next-links' }, + { text: 'Edit Link', link: 'edit-link' }, + { text: 'Last Updated Timestamp', link: 'last-updated' }, + { text: 'Search', link: 'search' }, + { text: 'Carbon Ads', link: 'carbon-ads' } + ] + } + ] + } + ] +} + +function searchOptions(): Partial { + return { + translations: { + button: { + buttonText: 'Search', + buttonAriaLabel: 'Search' + }, + modal: { + searchBox: { + clearButtonTitle: 'Clear', + clearButtonAriaLabel: 'Clear search query', + closeButtonText: 'Close', + closeButtonAriaLabel: 'Close', + placeholderText: 'Search the documentation or ask AI', + placeholderTextAskAi: 'Ask another question...', + placeholderTextAskAiStreaming: 'Generating answer...', + searchInputLabel: 'Search', + backToKeywordSearchButtonText: 'Back to keyword search', + backToKeywordSearchButtonAriaLabel: 'Back to keyword search', + newConversationPlaceholder: 'Ask a question', + conversationHistoryTitle: 'My conversation history', + startNewConversationText: 'Start a new conversation', + viewConversationHistoryText: 'Conversation history', + threadDepthErrorPlaceholder: 'Conversation limit reached' + }, + newConversation: { + newConversationTitle: 'How can I help you today?', + newConversationDescription: + 'I’ll search your documentation to quickly find setup guides, feature details, and troubleshooting tips.' + }, + footer: { + selectText: 'Select', + submitQuestionText: 'Submit question', + selectKeyAriaLabel: 'Enter key', + navigateText: 'Navigate', + navigateUpKeyAriaLabel: 'Arrow up', + navigateDownKeyAriaLabel: 'Arrow down', + closeText: 'Close', + backToSearchText: 'Back to search', + closeKeyAriaLabel: 'Escape key', + poweredByText: 'Powered by' + }, + errorScreen: { + titleText: 'Unable to retrieve results', + helpText: 'You may need to check your network connection.' + }, + startScreen: { + recentSearchesTitle: 'Recent', + noRecentSearchesText: 'No recent searches', + saveRecentSearchButtonTitle: 'Save this search', + removeRecentSearchButtonTitle: 'Remove this search from history', + favoriteSearchesTitle: 'Favorites', + removeFavoriteSearchButtonTitle: 'Remove this search from favorites', + recentConversationsTitle: 'Recent conversations', + removeRecentConversationButtonTitle: + 'Remove this conversation from history' + }, + noResultsScreen: { + noResultsText: 'No results for', + suggestedQueryText: 'Try searching for', + reportMissingResultsText: + 'Think this search should have results?', + reportMissingResultsLinkText: 'Let us know.' + }, + resultsScreen: { + askAiPlaceholder: 'Ask AI: ', + noResultsAskAiPlaceholder: + 'Couldn’t find it in the documentation? Ask AI: ' + }, + askAiScreen: { + disclaimerText: + 'Answers are generated by AI and may be inaccurate. Please verify.', + relatedSourcesText: 'Related sources', + thinkingText: 'Thinking...', + copyButtonText: 'Copy', + copyButtonCopiedText: 'Copied!', + copyButtonTitle: 'Copy', + likeButtonTitle: 'Helpful', + dislikeButtonTitle: 'Not helpful', + thanksForFeedbackText: 'Thanks for your feedback!', + preToolCallText: 'Searching...', + duringToolCallText: 'Searching...', + afterToolCallText: 'Search for', + stoppedStreamingText: 'You stopped this response', + errorTitleText: 'Conversation error', + startNewConversationButtonText: 'Start a new conversation' + } + } + }, + askAi: { + sidePanel: { + button: { + translations: { + buttonText: 'Ask AI', + buttonAriaLabel: 'Ask AI' + } + }, + panel: { + translations: { + header: { + title: 'Ask AI', + conversationHistoryTitle: 'My conversation history', + newConversationText: 'Start a new conversation', + viewConversationHistoryText: 'Conversation history' + }, + promptForm: { + promptPlaceholderText: 'Ask a question', + promptAnsweringText: 'Generating answer...', + promptAskAnotherQuestionText: 'Ask another question', + promptDisclaimerText: + 'Answers are generated by AI and may be inaccurate.', + promptLabelText: + 'Press Enter to submit, or Shift+Enter for a new line.', + promptAriaLabelText: 'Question input' + }, + conversationScreen: { + preToolCallText: 'Searching...', + searchingText: 'Searching...', + toolCallResultText: 'Search for', + conversationDisclaimer: + 'Answers are generated by AI and may be inaccurate. Please verify.', + reasoningText: 'Reasoning...', + thinkingText: 'Thinking...', + relatedSourcesText: 'Related sources', + stoppedStreamingText: 'You stopped this response', + copyButtonText: 'Copy', + copyButtonCopiedText: 'Copied!', + likeButtonTitle: 'Helpful', + dislikeButtonTitle: 'Not helpful', + thanksForFeedbackText: 'Thanks for your feedback!', + errorTitleText: 'Conversation error' + }, + newConversationScreen: { + titleText: 'How can I help you today?', + introductionText: + 'I’ll search your documentation to quickly find setup guides, feature details, and troubleshooting tips.' + }, + logo: { + poweredByText: 'Powered by' + } + } + } + } + } + } +} From 8b92b3ed9edfd5af7fdf907ce5c976ef9ed93ecb Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 10:56:37 +0200 Subject: [PATCH 004/199] Improve German localization in config.ts Updated German localization for various labels and messages in the config file. --- docs/de/config.ts | 164 +++++++++++++++++++++++----------------------- 1 file changed, 82 insertions(+), 82 deletions(-) diff --git a/docs/de/config.ts b/docs/de/config.ts index 9224ac417..d1da68eb1 100644 --- a/docs/de/config.ts +++ b/docs/de/config.ts @@ -7,23 +7,23 @@ import pkg from 'vitepress/package.json' with { type: 'json' } export const markdown: MarkdownLocaleOptions = { container: { - tipLabel: 'TIP', + tipLabel: 'TIPP', infoLabel: 'INFO', - warningLabel: 'WARNING', - dangerLabel: 'DANGER', + warningLabel: 'WARNUNG', + dangerLabel: 'GEFAHR', detailsLabel: 'DETAILS', - noteLabel: 'NOTE', - importantLabel: 'IMPORTANT', - cautionLabel: 'CAUTION' + noteLabel: 'NOTIZ', + importantLabel: 'WICHTIG', + cautionLabel: 'VORSICHT' }, codeCopyButton: { - tooltipText: 'Copy code', - copiedText: 'Copied' + tooltipText: 'Code kopieren', + copiedText: 'Kopiert' } } export default defineAdditionalConfig({ - description: 'Static site generator with Vite and Vue', + description: 'Static-Site-Generator mit Vue und Vite', head: [ [ @@ -39,47 +39,47 @@ export default defineAdditionalConfig({ search: { options: searchOptions() }, sidebar: { - '/fa/guide/': { base: '/fa/guide/', items: sidebarGuide() }, - '/fa/reference/': { base: '/fa/reference/', items: sidebarReference() } + '/de/guide/': { base: '/de/guide/', items: sidebarGuide() }, + '/de/reference/': { base: '/de/reference/', items: sidebarReference() } }, editLink: { pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', - text: 'Edit this page on GitHub' + text: 'Bearbeite diese Seite auf GitHub' }, footer: { - message: 'Released under the MIT License', - copyright: 'Copyright © 2019-present Evan You' + message: 'Freigegeben unter MIT License', + copyright: 'Copyright © 2019-heute Evan You' }, docFooter: { - prev: 'Previous', - next: 'Next' + prev: 'Vorheriger', + next: 'Nächster' }, outline: { - label: 'On this page' + label: 'Auf dieser Seite' }, lastUpdated: { - text: 'Last updated' + text: 'Zuletzt geupdated' }, notFound: { - title: 'Page not found', + title: 'Seite nicht gefunden', quote: - 'But if you do not change your direction, and if you keep looking, you may end up where you are heading.', - linkLabel: 'Go to home', - linkText: 'Take me home' + '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: 'Change language', - returnToTopLabel: 'Return to top', - sidebarMenuLabel: 'Sidebar menu', - darkModeSwitchLabel: 'Dark mode', - lightModeSwitchTitle: 'Switch to light mode', - darkModeSwitchTitle: 'Switch to dark mode', + langMenuLabel: 'Sprache ändern', + returnToTopLabel: 'Zurück nach oben', + sidebarMenuLabel: 'Seitenleiste', + darkModeSwitchLabel: 'Dunkelmodus', + lightModeSwitchTitle: 'Zum Hellmodus wechseln', + darkModeSwitchTitle: 'Zum Dunkelmodus wechseln', siteTitle: 'VitePress' } }) @@ -88,12 +88,12 @@ function nav(): DefaultTheme.NavItem[] { return [ { text: 'Guide', - link: 'fa/guide/what-is-vitepress', + link: 'de/guide/what-is-vitepress', activeMatch: '/guide/' }, { - text: 'Reference', - link: 'fa/reference/site-config', + text: 'Referenz', + link: 'de/reference/site-config', activeMatch: '/reference/' }, { @@ -104,11 +104,11 @@ function nav(): DefaultTheme.NavItem[] { link: 'https://vuejs.github.io/vitepress/v1/fa/' }, { - text: 'Changelog', + text: 'Änderungen', link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md' }, { - text: 'Contributing', + text: 'Mitwirken', link: 'https://github.com/vuejs/vitepress/blob/main/.github/contributing.md' } ] @@ -119,78 +119,78 @@ function nav(): DefaultTheme.NavItem[] { function sidebarGuide(): DefaultTheme.SidebarItem[] { return [ { - text: 'Introduction', + text: 'Einführung', collapsed: false, items: [ - { text: 'What is VitePress?', link: 'what-is-vitepress' }, - { text: 'Getting Started', link: 'getting-started' }, + { text: 'Was ist VitePress?', link: 'what-is-vitepress' }, + { text: 'Erste Schritte', link: 'getting-started' }, { text: 'Routing', link: 'routing' }, { text: 'Deployment', link: 'deploy' } ] }, { - text: 'Writing', + text: 'Schreiben', collapsed: false, items: [ - { text: 'Markdown Extensions', link: 'markdown' }, - { text: 'Asset Handling', link: 'asset-handling' }, + { text: 'Markdown Erweiterungen', link: 'markdown' }, + { text: 'Asset-Handhabung', link: 'asset-handling' }, { text: 'Frontmatter', link: 'frontmatter' }, - { text: 'Using Vue in Markdown', link: 'using-vue' }, - { text: 'Internationalization', link: 'i18n' } + { text: 'Vue in Markdown benutzen', link: 'using-vue' }, + { text: 'Internationalisierung', link: 'i18n' } ] }, { - text: 'Customization', + text: 'Anpassung', collapsed: false, items: [ - { text: 'Using a Custom Theme', link: 'custom-theme' }, + { text: 'Ein eigenes Theme nutzen', link: 'custom-theme' }, { - text: 'Extending the Default Theme', + text: 'Standart-Theme erweitern', link: 'extending-default-theme' }, - { text: 'Data Loading', link: 'data-loading' }, - { text: 'SSR Compatibility', link: 'ssr-compat' }, - { text: 'Connecting to a CMS', link: 'cms' } + { text: 'Datenladen', link: 'data-loading' }, + { text: 'SSR-Kompatibilität', link: 'ssr-compat' }, + { text: 'Mit einem CMS verbinden', link: 'cms' } ] }, { text: 'Experimental', collapsed: false, items: [ - { text: 'MPA Mode', link: 'mpa-mode' }, - { text: 'Sitemap Generation', link: 'sitemap-generation' } + { text: 'MPA-Modus', link: 'mpa-mode' }, + { text: 'Sitemap-Generation', link: 'sitemap-generation' } ] }, - { text: 'Configuration and API Reference', base: 'fa/reference/', link: 'site-config' } + { text: 'Konfiguration und API-Referenz', base: 'de/reference/', link: 'site-config' } ] } function sidebarReference(): DefaultTheme.SidebarItem[] { return [ { - text: 'Reference', - base: 'fa/reference/', + text: 'Referenz', + base: 'de/reference/', items: [ - { text: 'Site Config', link: 'site-config' }, - { text: 'Frontmatter Config', link: 'frontmatter-config' }, - { text: 'Runtime API', link: 'runtime-api' }, + { text: 'Seiten-Konfiguration', link: 'site-config' }, + { text: 'Frontmatter-Konfiguration', link: 'frontmatter-config' }, + { text: 'Runtime-API', link: 'runtime-api' }, { text: 'CLI', link: 'cli' }, { - text: 'Default Theme', - base: 'fa/reference/default-theme-', + text: 'Standart-Theme', + base: 'de/reference/default-theme-', items: [ - { text: 'Overview', link: 'config' }, + { text: 'Übersicht', link: 'config' }, { text: 'Navigation', link: 'nav' }, - { text: 'Sidebar', link: 'sidebar' }, - { text: 'Home Page', link: 'home-page' }, + { text: 'Seitenleiste', link: 'sidebar' }, + { text: 'Startseite', link: 'home-page' }, { text: 'Footer', link: 'footer' }, { text: 'Layout', link: 'layout' }, { text: 'Badge', link: 'badge' }, - { text: 'Team Page', link: 'team-page' }, - { text: 'Prev / Next Links', link: 'prev-next-links' }, - { text: 'Edit Link', link: 'edit-link' }, - { text: 'Last Updated Timestamp', link: 'last-updated' }, - { text: 'Search', link: 'search' }, + { text: 'Team-Seite', link: 'team-page' }, + { text: 'Vorher / Nachher Links', link: 'prev-next-links' }, + { text: 'Link bearbeiten', link: 'edit-link' }, + { text: 'Zuletzt geupdated Zeitstempel', link: 'last-updated' }, + { text: 'Suche', link: 'search' }, { text: 'Carbon Ads', link: 'carbon-ads' } ] } @@ -203,26 +203,26 @@ function searchOptions(): Partial { return { translations: { button: { - buttonText: 'Search', - buttonAriaLabel: 'Search' + buttonText: 'Suche', + buttonAriaLabel: 'Suche' }, modal: { searchBox: { - clearButtonTitle: 'Clear', - clearButtonAriaLabel: 'Clear search query', - closeButtonText: 'Close', - closeButtonAriaLabel: 'Close', - placeholderText: 'Search the documentation or ask AI', - placeholderTextAskAi: 'Ask another question...', - placeholderTextAskAiStreaming: 'Generating answer...', - searchInputLabel: 'Search', - backToKeywordSearchButtonText: 'Back to keyword search', - backToKeywordSearchButtonAriaLabel: 'Back to keyword search', - newConversationPlaceholder: 'Ask a question', - conversationHistoryTitle: 'My conversation history', - startNewConversationText: 'Start a new conversation', - viewConversationHistoryText: 'Conversation history', - threadDepthErrorPlaceholder: 'Conversation limit reached' + 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: 'How can I help you today?', From d954bb506879cf54d6842362e8e624908567ef5a Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:07:59 +0200 Subject: [PATCH 005/199] Update German translations in config.ts Updated German translations for various UI elements in the config file. --- docs/de/config.ts | 144 +++++++++++++++++++++++----------------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/docs/de/config.ts b/docs/de/config.ts index d1da68eb1..299606a21 100644 --- a/docs/de/config.ts +++ b/docs/de/config.ts @@ -225,66 +225,66 @@ function searchOptions(): Partial { threadDepthErrorPlaceholder: 'Gesprächslimit erreicht' }, newConversation: { - newConversationTitle: 'How can I help you today?', + newConversationTitle: 'Wie kann ich dir heute helfen?', newConversationDescription: - 'I’ll search your documentation to quickly find setup guides, feature details, and troubleshooting tips.' + 'Ich werde die Dokumentation durchsuchen, um schnell Einrichtungsanleitungen, Details zu Funktionen und Tipps zur Fehlerbehebung zu finden.' }, footer: { - selectText: 'Select', - submitQuestionText: 'Submit question', - selectKeyAriaLabel: 'Enter key', - navigateText: 'Navigate', - navigateUpKeyAriaLabel: 'Arrow up', - navigateDownKeyAriaLabel: 'Arrow down', - closeText: 'Close', - backToSearchText: 'Back to search', - closeKeyAriaLabel: 'Escape key', - poweredByText: 'Powered by' + 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: 'Angetrieben von' }, errorScreen: { - titleText: 'Unable to retrieve results', - helpText: 'You may need to check your network connection.' + titleText: 'Ergebnisse konnten nicht abgerufen werden.', + helpText: 'Möglicherweise müssen Sie Ihre Netzwerkverbindung überprüfen.' }, startScreen: { - recentSearchesTitle: 'Recent', - noRecentSearchesText: 'No recent searches', - saveRecentSearchButtonTitle: 'Save this search', - removeRecentSearchButtonTitle: 'Remove this search from history', - favoriteSearchesTitle: 'Favorites', - removeFavoriteSearchButtonTitle: 'Remove this search from favorites', - recentConversationsTitle: 'Recent conversations', + 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: - 'Remove this conversation from history' + 'Diese Unterhaltung aus dem Verlauf entfernen' }, noResultsScreen: { - noResultsText: 'No results for', - suggestedQueryText: 'Try searching for', + noResultsText: 'Keine Ergebnisse für', + suggestedQueryText: 'Versuchen Sie', reportMissingResultsText: - 'Think this search should have results?', - reportMissingResultsLinkText: 'Let us know.' + 'Glaubst du, diese Suche sollte Ergebnisse liefern?', + reportMissingResultsLinkText: 'Lass es uns wissen.' }, resultsScreen: { - askAiPlaceholder: 'Ask AI: ', + askAiPlaceholder: 'Frag KI: ', noResultsAskAiPlaceholder: - 'Couldn’t find it in the documentation? Ask AI: ' + 'Nicht in der Dokumentation fündig geworden? Fragen Sie die KI: ' }, askAiScreen: { disclaimerText: - 'Answers are generated by AI and may be inaccurate. Please verify.', - relatedSourcesText: 'Related sources', - thinkingText: 'Thinking...', - copyButtonText: 'Copy', - copyButtonCopiedText: 'Copied!', - copyButtonTitle: 'Copy', - likeButtonTitle: 'Helpful', - dislikeButtonTitle: 'Not helpful', - thanksForFeedbackText: 'Thanks for your feedback!', - preToolCallText: 'Searching...', - duringToolCallText: 'Searching...', - afterToolCallText: 'Search for', - stoppedStreamingText: 'You stopped this response', - errorTitleText: 'Conversation error', - startNewConversationButtonText: 'Start a new conversation' + 'Die Antworten werden von einer KI generiert und können ungenau sein. Bitte überprüfen Sie diese.', + relatedSourcesText: 'Verwandte Quellen', + thinkingText: 'Denken...', + 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' } } }, @@ -292,52 +292,52 @@ function searchOptions(): Partial { sidePanel: { button: { translations: { - buttonText: 'Ask AI', - buttonAriaLabel: 'Ask AI' + buttonText: 'Frag KI', + buttonAriaLabel: 'Frag KI' } }, panel: { translations: { header: { - title: 'Ask AI', - conversationHistoryTitle: 'My conversation history', - newConversationText: 'Start a new conversation', - viewConversationHistoryText: 'Conversation history' + title: 'Frag KI', + conversationHistoryTitle: 'Mein Gesprächsverlauf', + newConversationText: 'Neue Konversation beginnen', + viewConversationHistoryText: 'Gesprächsverlauf' }, promptForm: { - promptPlaceholderText: 'Ask a question', - promptAnsweringText: 'Generating answer...', - promptAskAnotherQuestionText: 'Ask another question', + promptPlaceholderText: 'Frage eine Frage', + promptAnsweringText: 'Antwort generieren...', + promptAskAnotherQuestionText: 'Frage eine weitere Frage', promptDisclaimerText: - 'Answers are generated by AI and may be inaccurate.', + 'Die Antworten werden von einer KI generiert und können ungenau sein.', promptLabelText: - 'Press Enter to submit, or Shift+Enter for a new line.', - promptAriaLabelText: 'Question input' + 'Drücken Sie die Eingabetaste zum Absenden oder Umschalt+Eingabetaste für eine neue Zeile.', + promptAriaLabelText: 'Frageeingabe' }, conversationScreen: { - preToolCallText: 'Searching...', - searchingText: 'Searching...', - toolCallResultText: 'Search for', + preToolCallText: 'Suchen...', + searchingText: 'Suchen...', + toolCallResultText: 'Siche nach', conversationDisclaimer: - 'Answers are generated by AI and may be inaccurate. Please verify.', - reasoningText: 'Reasoning...', - thinkingText: 'Thinking...', - relatedSourcesText: 'Related sources', - stoppedStreamingText: 'You stopped this response', - copyButtonText: 'Copy', - copyButtonCopiedText: 'Copied!', - likeButtonTitle: 'Helpful', - dislikeButtonTitle: 'Not helpful', - thanksForFeedbackText: 'Thanks for your feedback!', - errorTitleText: 'Conversation error' + 'Die Antworten werden von einer KI generiert und können ungenau sein. Bitte überprüfen Sie diese.', + reasoningText: 'Nachdenken...', + thinkingText: 'Denken...', + relatedSourcesText: 'Ähnliche 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: 'How can I help you today?', + titleText: 'Wie kann ich dir heute helfen?', introductionText: - 'I’ll search your documentation to quickly find setup guides, feature details, and troubleshooting tips.' + 'Ich werde Ihre Dokumentation durchsuchen, um schnell Einrichtungsanleitungen, Details zu Funktionen und Tipps zur Fehlerbehebung zu finden.' }, logo: { - poweredByText: 'Powered by' + poweredByText: 'Angetrieben von' } } } From 6f2d1563dc484a9137c3bc2d1d7db5c338db1159 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:31:39 +0200 Subject: [PATCH 006/199] Add German localization support to VitePress config --- docs/.vitepress/config.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 64158acfe..19bbe4e7c 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -10,6 +10,7 @@ import { } from 'vitepress-plugin-group-icons' import llmstxt from 'vitepress-plugin-llms' +import { markdown as deMarkdown } from '../de/config.ts' import { markdown as esMarkdown } from '../es/config.ts' import { markdown as faMarkdown } from '../fa/config.ts' import { markdown as jaMarkdown } from '../ja/config.ts' @@ -31,7 +32,8 @@ const localeToOgLocaleMap: Record = { es: 'es_ES', ko: 'ko_KR', fa: 'fa_IR', - ja: 'ja_JP' + ja: 'ja_JP', + de: 'de_DE' } export default defineConfig({ @@ -103,6 +105,7 @@ export default defineConfig({ // prettier-ignore locales: { root: { label: 'English', lang: 'en-US', dir: 'ltr' }, + de: { label: 'Deutsch', lang:'de-DE', dir: 'ltr', markdown: deMarkdown }, zh: { label: '简体中文', lang: 'zh-Hans', dir: 'ltr', markdown: zhMarkdown }, pt: { label: 'Português', lang: 'pt-BR', dir: 'ltr', markdown: ptMarkdown }, ru: { label: 'Русский', lang: 'ru-RU', dir: 'ltr', markdown: ruMarkdown }, From a05350a9d0dda05204d3415f906727ad59d0d4e8 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:33:25 +0200 Subject: [PATCH 007/199] Add German locale to lunaria.config.json --- docs/lunaria.config.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/lunaria.config.json b/docs/lunaria.config.json index 2de958b9e..453919ce3 100644 --- a/docs/lunaria.config.json +++ b/docs/lunaria.config.json @@ -21,6 +21,10 @@ "lang": "en" }, "locales": [ + { + "label": "Deutsch", + "lang": "de" + }, { "label": "简体中文", "lang": "zh" From 4e78e2d9bdd67c97015b04bf9a3518ab830079fc Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:40:46 +0200 Subject: [PATCH 008/199] docs(de): improve German translation --- docs/de/index.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/de/index.md b/docs/de/index.md index a3c487bb8..978e2e820 100644 --- a/docs/de/index.md +++ b/docs/de/index.md @@ -1,11 +1,11 @@ --- -description: VitePress ist ein auf Vite und Vue basierender Generator für statische Websites, mit dem man aus Markdown ansprechende Dokumentationen erstellen kann. +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: Vite & Vue basierender Generator für statische Websites - tagline: Markdown zu wunderschönen Docs in Minuten + 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? @@ -22,15 +22,15 @@ hero: features: - icon: - title: Fokussieren auf den Inhalt - details: Erstelle mühelos wunderschöne Dokumentationsseiten mit Markdown. + title: Konzentriere dich auf deine Inhalte + details: Erstelle mühelos ansprechende Dokumentationsseiten mit einfachem Markdown. - icon: - title: Genieße Vite DX - details: Sofortiger Serverstart, blitzschnelle Hot-Updates und Plugins aus dem Vite-Ökosystem. + title: Die Vite-DX nutzen + details: Sofortiger Serverstart, blitzschnelle Hot-Updates und Zugriff auf Plugins aus dem Vite-Ökosystem. - icon: - title: Anpassen mit Vue - details: Nutze Vue-Syntax und Komponenten direkt in Markdown, oder eigene Themes mit Vhe. + title: Mit Vue anpassen + details: Verwende Vue-Syntax und -Komponenten direkt in Markdown oder erstelle eigene Themes mit Vue. - icon: - title: Liefer schnelle Seitem - details: Schneller Initial-Load mit statischem HTML, schnellem Post-Load und Navigation mit Client-Side Routing. ---- + title: Schnelle Websites ausliefern + details: Schneller initialer Ladevorgang mit statischem HTML und schnelle Navigation nach dem Laden dank clientseitigem Routing. +--- \ No newline at end of file From 23535965913d466fad79d0034e64cb80e9455612 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:40:48 +0200 Subject: [PATCH 009/199] docs(de): improve German translation --- docs/de/guide/asset-handling.md | 70 ++++++++++++++++----------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/docs/de/guide/asset-handling.md b/docs/de/guide/asset-handling.md index 30a38c318..2a7e49a5d 100644 --- a/docs/de/guide/asset-handling.md +++ b/docs/de/guide/asset-handling.md @@ -1,52 +1,52 @@ --- -description: Erfahre, wie man in VitePress auf statische Assets wie Bilder, Medien und Schriftarten verweisen und diese handhaben kann. +description: Erfahre, wie du statische Assets wie Bilder, Medien und Schriftarten in VitePress referenzierst und verwaltest. --- -# Asset-Handhabung +# Asset-Verwaltung -## Referenzieren statischer Assets +## Statische Assets referenzieren -Alle Markdown-Dateien werden in Vue-Komponenten kompiliert und von [Vite](https://vite.dev/guide/assets.html) verarbeitet. Sie können – **und sollten** – Assets über relative URLs referenzieren: +Alle Markdown-Dateien werden in Vue-Komponenten kompiliert und von [Vite](https://vite.dev/guide/assets.html) verarbeitet. Du kannst und solltest Assets über relative URLs referenzieren: -```md +\`\`\`md ![Ein Bild](./image.png) -``` +\`\`\` -Sie können in Ihren Markdown-Dateien, `*.vue`-Komponenten des Themes, Styles und reinen `.css`-Dateien auf statische Assets verweisen – entweder über absolute Public-Pfade (ausgehend vom Projektstammverzeichnis) oder über relative Pfade (bezogen auf das Dateisystem). Letzteres entspricht dem Verhalten, das Sie bereits von Vite, der Vue CLI oder dem `file-loader` von webpack kennen. +Du kannst statische Assets in deinen Markdown-Dateien, deinen \`*.vue\`-Komponenten im Theme, Styles und normalen \`.css\`-Dateien entweder über absolute öffentliche Pfade (bezogen auf das Projektverzeichnis) oder über relative Pfade (bezogen auf dein Dateisystem) referenzieren. Letzteres funktioniert ähnlich wie bei Vite, Vue CLI oder Webpacks \`file-loader\`. -Gängige Datei-Formate für Bilder, Medien und Schriftarten werden automatisch erkannt und als Assets eingebunden. +Gängige Bild-, Medien- und Schriftdateitypen werden automatisch erkannt und als Assets eingebunden. -::: tip Verlinkte Dateien werden nicht als Assets behandelt -PDFs oder andere Dokumente, auf die in Markdown-Dateien verlinkt wird, werden nicht automatisch als Assets behandelt. Um verlinkte Dateien verfügbar zu machen, müssen Sie diese manuell im [`public`](#the-public-directory)-Verzeichnis Ihres Projekts ablegen. +::: tip Verknüpfte Dateien werden nicht als Assets behandelt +PDFs oder andere Dokumente, auf die in Markdown-Dateien verlinkt wird, werden nicht automatisch als Assets behandelt. Damit verknüpfte Dateien zugänglich sind, musst du sie manuell im Verzeichnis [\`public\`](#das-public-verzeichnis) deines Projekts ablegen. ::: -Alle referenzierten Assets – einschließlich derer, die absolute Pfade verwenden – werden im Produktions-Build mit einem Hash-Dateinamen in das Ausgabeverzeichnis kopiert. Assets, auf die nicht verwiesen wird, werden nicht kopiert. Bild-Assets, die kleiner als 4 KB sind, werden als Base64 eingebettet; dieses Verhalten lässt sich über die Konfigurationsoption [`vite`](../reference/site-config#vite) anpassen. +Alle referenzierten Assets, einschließlich solcher mit absoluten Pfaden, werden beim Produktions-Build mit einem gehashten Dateinamen in das Ausgabeverzeichnis kopiert. Nicht referenzierte Assets werden nicht kopiert. Bild-Assets unter 4 KB werden als Base64 eingebettet. Dies kann über die [\`vite\`](../reference/site-config#vite)-Konfigurationsoption angepasst werden. -Alle **statischen** Pfadreferenzen, einschließlich absoluter Pfade, sollten auf der Struktur Ihres Arbeitsverzeichnisses basieren. +Alle **statischen** Pfadangaben, einschließlich absoluter Pfade, sollten auf deiner Arbeitsverzeichnisstruktur basieren. -## Das öffentliche Verzeichnis +## Das Public-Verzeichnis -Manchmal müssen statische Assets bereitgestellt werden, auf die in Ihren Markdown- oder Theme-Komponenten nicht direkt verwiesen wird, oder Sie möchten bestimmte Dateien unter ihrem ursprünglichen Dateinamen ausliefern. Beispiele für solche Dateien sind `robots.txt`, Favicons und PWA-Icons. +Manchmal musst du statische Assets bereitstellen, die in keiner deiner Markdown-Dateien oder Theme-Komponenten direkt referenziert werden, oder bestimmte Dateien unter ihrem ursprünglichen Dateinamen ausliefern. Beispiele hierfür sind \`robots.txt\`, Favicons und PWA-Icons. -Sie können diese Dateien im `public`-Verzeichnis innerhalb des [Quellverzeichnisses](./routing#source-directory) ablegen. Wenn sich das Stammverzeichnis Ihres Projekts beispielsweise unter `./docs` befindet und Sie den Standardpfad für das Quellverzeichnis verwenden, lautet der Pfad zu Ihrem `public`-Verzeichnis `./docs/public`. +Du kannst diese Dateien im Verzeichnis \`public\` unterhalb des [Quellverzeichnisses](./routing#quellverzeichnis) ablegen. Wenn dein Projektverzeichnis beispielsweise \`./docs\` ist und das Standard-Quellverzeichnis verwendet wird, lautet dein Public-Verzeichnis \`./docs/public\`. -Im Ordner `public` abgelegte Assets werden unverändert in das Stammverzeichnis des Ausgabeordners kopiert. +Assets im Verzeichnis \`public\` werden unverändert in das Stammverzeichnis des Ausgabeverzeichnisses kopiert. -Beachten Sie, dass Dateien aus dem Ordner `public` über einen absoluten Pfad ausgehend vom Stammverzeichnis referenziert werden sollten – so sollte beispielsweise `public/icon.png` im Quellcode stets als `/icon.png` angesprochen werden. +Beachte, dass du Dateien aus \`public\` mit einem absoluten Pfad vom Stammverzeichnis referenzieren solltest. \`public/icon.png\` sollte im Quellcode beispielsweise immer als \`/icon.png\` referenziert werden. ## Basis-URL -Wenn Ihre Website unter einer URL bereitgestellt wird, die nicht das Stammverzeichnis (Root) ist, legen Sie die Option [`base`](../reference/site-config#base) fest. Wenn Sie Ihre Website beispielsweise unter `https://foo.github.io/bar/` bereitstellen möchten, sollte `base` auf `'/bar/'` gesetzt werden. +Wenn deine Website unter einer URL bereitgestellt wird, die nicht dem Stammverzeichnis entspricht, setze die Option [\`base\`](../reference/site-config#base). Wenn du deine Website beispielsweise unter \`https://foo.github.io/bar/\` bereitstellen möchtest, sollte \`base\` auf \`'/bar/'\` gesetzt werden. -Verweise auf statische Assets werden automatisch an die Basis (Base) angepasst; daher funktioniert ein absoluter Verweis auf eine Datei im Ordner `public` mit jeder beliebigen Basis und muss nie aktualisiert werden: +Referenzen auf statische Assets werden automatisch an \`base\` angepasst. Eine absolute Referenz auf eine Datei in \`public\` funktioniert daher mit jedem \`base\` und muss nicht aktualisiert werden: -```md -![Ein Bild](/bild-in-public.png) -``` +\`\`\`md +![Ein Bild](/image-inside-public.png) +\`\`\` -Nur dynamisch erstellte Pfade erfordern besondere Aufmerksamkeit – zum Beispiel ein Bild, dessen `src`-Attribut auf einem Konfigurationswert des Themes basiert. Umschließe diese mit dem [`withBase`-Hilfsprogramm](../reference/runtime-api#withbase), damit der Basis-Pfad zur Laufzeit vorangestellt wird: +Nur dynamisch erzeugte Pfade benötigen besondere Behandlung – beispielsweise ein Bild, dessen \`src\` auf einem Wert aus der Theme-Konfiguration basiert. Um den Basis-Pfad zur Laufzeit voranzustellen, umschließe solche Pfade mit dem [\`withBase\`-Helper](../reference/runtime-api#withbase): -```vue +\`\`\`vue + + +``` + +The [`useData()`](../reference/runtime-api#usedata) helper provides us with all the runtime data we need to conditionally render different layouts. One of the other data we can access is the current page's frontmatter. We can leverage this to allow the end user to control the layout in each page. For example, the user can indicate the page should use a special home page layout with: + +```md +--- +layout: home +--- +``` + +And we can adjust our theme to handle this: + +```vue{3,12-14} + + + +``` + +You can, of course, split the layout into more components: + +```vue{3-5,12-15} + + + +``` + +Consult the [Runtime API Reference](../reference/runtime-api) for everything available in theme components. In addition, you can leverage [Build-Time Data Loading](./data-loading) to generate data-driven layout - for example, a page that lists all blog posts in the current project. + +## Distributing a Custom Theme + +The easiest way to distribute a custom theme is by providing it as a [template repository on GitHub](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository). + +If you wish to distribute the theme as an npm package, follow these steps: + +1. Export the theme object as the default export in your package entry. + +2. If applicable, export your theme config type definition as `ThemeConfig`. + +3. If your theme requires adjusting the VitePress config, export that config under a package sub-path (e.g. `my-theme/config`) so the user can extend it. + +4. Document the theme config options (both via config file and frontmatter). + +5. Provide clear instructions on how to consume your theme (see below). + +## Consuming a Custom Theme + +To consume an external theme, import and re-export it from the custom theme entry: + +```js [.vitepress/theme/index.js] +import Theme from 'awesome-vitepress-theme' + +export default Theme +``` + +If the theme needs to be extended: + +```js [.vitepress/theme/index.js] +import Theme from 'awesome-vitepress-theme' + +export default { + extends: Theme, + enhanceApp(ctx) { + // ... + } +} +``` + +If the theme requires special VitePress config, you will need to also extend it in your own config: + +```ts [.vitepress/config.ts] +import baseConfig from 'awesome-vitepress-theme/config' + +export default { + // extend theme base config (if needed) + extends: baseConfig +} +``` + +Finally, if the theme provides types for its theme config: + +```ts [.vitepress/config.ts] +import baseConfig from 'awesome-vitepress-theme/config' +import { defineConfig } from 'vitepress' +import type { ThemeConfig } from 'awesome-vitepress-theme' + +export default defineConfig({ + extends: baseConfig, + themeConfig: { + // Type is `ThemeConfig` + } +}) +``` From 4c11fb1e76ccb258698a493ffdb18d39cb377654 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:41:20 +0200 Subject: [PATCH 012/199] docs(de): add missing documentation pages --- docs/de/guide/data-loading.md | 248 ++++++++++++++++++++++++++++++++++ 1 file changed, 248 insertions(+) create mode 100644 docs/de/guide/data-loading.md diff --git a/docs/de/guide/data-loading.md b/docs/de/guide/data-loading.md new file mode 100644 index 000000000..1c11e4698 --- /dev/null +++ b/docs/de/guide/data-loading.md @@ -0,0 +1,248 @@ +--- +description: Load arbitrary data at build time using VitePress data loaders and import it from pages or components. +--- + +# Build-Time Data Loading + +VitePress provides a feature called **data loaders** that allows you to load arbitrary data and import it from pages or components. The data loading is executed **only at build time**: the resulting data will be serialized as JSON in the final JavaScript bundle. + +Data loaders can be used to fetch remote data, or generate metadata based on local files. For example, you can use data loaders to parse all your local API pages and automatically generate an index of all API entries. + +## Basic Usage + +A data loader file must end with either `.data.js` or `.data.ts`. The file should provide a default export of an object with the `load()` method: + +```js [example.data.js] +export default { + load() { + return { + hello: 'world' + } + } +} +``` + +The loader module is evaluated only in Node.js, so you can import Node APIs and npm dependencies as needed. + +You can then import data from this file in `.md` pages and `.vue` components using the `data` named export: + +```vue + + +
{{ data }}
+``` + +Output: + +```json +{ + "hello": "world" +} +``` + +You'll notice the data loader itself does not export the `data`. It is VitePress calling the `load()` method behind the scenes and implicitly exposing the result via the `data` named export. + +This works even if the loader is async: + +```js +export default { + async load() { + // fetch remote data + return (await fetch('...')).json() + } +} +``` + +## Data from Local Files + +When you need to generate data based on local files, you should use the `watch` option in the data loader so that changes made to these files can trigger hot updates. + +The `watch` option is also convenient in that you can use [glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax) to match multiple files. The patterns can be relative to the loader file itself, and the `load()` function will receive the matched files as absolute paths. + +The following example shows loading CSV files and transforming them into JSON using [csv-parse](https://github.com/adaltas/node-csv/tree/master/packages/csv-parse/). Because this file only executes at build time, you will not be shipping the CSV parser to the client! + +```js +import fs from 'node:fs' +import { parse } from 'csv-parse/sync' + +export default { + watch: ['./data/*.csv'], + load(watchedFiles) { + // watchedFiles will be an array of absolute paths of the matched files. + // generate an array of blog post metadata that can be used to render + // a list in the theme layout + return watchedFiles.map((file) => { + return parse(fs.readFileSync(file, 'utf-8'), { + columns: true, + skip_empty_lines: true + }) + }) + } +} +``` + +## `createContentLoader` + +When building a content focused site, we often need to create an "archive" or "index" page: a page where we list all available entries in our content collection, for example blog posts or API pages. We **can** implement this directly with the data loader API, but since this is such a common use case, VitePress also provides a `createContentLoader` helper to simplify this: + +```js [posts.data.js] +import { createContentLoader } from 'vitepress' + +export default createContentLoader('posts/*.md', /* options */) +``` + +The helper takes a glob pattern relative to the [source directory](./routing#source-directory), and returns a `{ watch, load }` data loader object that can be used as the default export in a data loader file. It also implements caching based on file modified timestamps to improve dev performance. + +Note the loader only works with Markdown files - matched non-Markdown files will be skipped. + +The loaded data will be an array with the type of `ContentData[]`: + +```ts +interface ContentData { + // mapped URL for the page. e.g. /posts/hello.html (does not include base) + // manually iterate or use custom `transform` to normalize the paths + url: string + // frontmatter data of the page + frontmatter: Record + + // the following are only present if relevant options are enabled + // we will discuss them below + src: string | undefined + html: string | undefined + excerpt: string | undefined +} +``` + +By default, only `url` and `frontmatter` are provided. This is because the loaded data will be inlined as JSON in the client bundle, so we need to be cautious about its size. Here's an example using the data to build a minimal blog index page: + +```vue + + + +``` + +### Options + +The default data may not suit all needs - you can opt-in to transform the data using options: + +```js [posts.data.js] +import { createContentLoader } from 'vitepress' + +export default createContentLoader('posts/*.md', { + includeSrc: true, // include raw markdown source? + render: true, // include rendered full page HTML? + excerpt: true, // include excerpt? + transform(rawData) { + // map, sort, or filter the raw data as you wish. + // the final result is what will be shipped to the client. + return rawData.sort((a, b) => { + return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date) + }).map((page) => { + page.src // raw markdown source + page.html // rendered full page HTML + page.excerpt // rendered excerpt HTML (content above first `---`) + return {/* ... */} + }) + } +}) +``` + +Check out how it is used in the [Vue.js blog](https://github.com/vuejs/blog/blob/main/.vitepress/theme/posts.data.ts). + +The `createContentLoader` API can also be used inside [build hooks](../reference/site-config#build-hooks): + +```js [.vitepress/config.js] +export default { + async buildEnd() { + const posts = await createContentLoader('posts/*.md').load() + // generate files based on posts metadata, e.g. RSS feed + } +} +``` + +**Types** + +```ts +interface ContentOptions { + /** + * Include src? + * @default false + */ + includeSrc?: boolean + + /** + * Render src to HTML and include in data? + * @default false + */ + render?: boolean + + /** + * If `boolean`, whether to parse and include excerpt? (rendered as HTML) + * + * If `function`, control how the excerpt is extracted from the content. + * + * If `string`, define a custom separator to be used for extracting the + * excerpt. Default separator is `---` if `excerpt` is `true`. + * + * @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt + * @see https://github.com/jonschlinkert/gray-matter#optionsexcerpt_separator + * + * @default false + */ + excerpt?: + | boolean + | ((file: { data: { [key: string]: any }; content: string; excerpt?: string }, options?: any) => void) + | string + + /** + * Transform the data. Note the data will be inlined as JSON in the client + * bundle if imported from components or markdown files. + */ + transform?: (data: ContentData[]) => T | Promise +} +``` + +## Typed Data Loaders + +When using TypeScript, you can type your loader and `data` export like so: + +```ts +import { defineLoader } from 'vitepress' + +export interface Data { + // data type +} + +declare const data: Data +export { data } + +export default defineLoader({ + // type checked loader options + watch: ['...'], + async load(): Promise { + // ... + } +}) +``` + +## Configuration + +To get the configuration information inside a loader, you can use some code like this: + +```ts +import type { SiteConfig } from 'vitepress' + +const config: SiteConfig = (globalThis as any).VITEPRESS_CONFIG +``` From 319708844469dec0b7b3fa579a9df9e6949b5581 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:41:22 +0200 Subject: [PATCH 013/199] docs(de): add missing documentation pages --- docs/de/guide/deploy.md | 406 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 406 insertions(+) create mode 100644 docs/de/guide/deploy.md diff --git a/docs/de/guide/deploy.md b/docs/de/guide/deploy.md new file mode 100644 index 000000000..d3d05cec4 --- /dev/null +++ b/docs/de/guide/deploy.md @@ -0,0 +1,406 @@ +--- +outline: deep +description: Deploy your VitePress site to popular platforms like Netlify, Vercel, GitHub Pages, and more. +--- + +# Deploy Your VitePress Site + +The following guides are based on some shared assumptions: + +- The VitePress site is inside the `docs` directory of your project. +- You are using the default build output directory (`.vitepress/dist`). +- VitePress is installed as a local dependency in your project, and you have set up the following scripts in your `package.json`: + + ```json [package.json] + { + "scripts": { + "docs:build": "vitepress build docs", + "docs:preview": "vitepress preview docs" + } + } + ``` + +## Build and Test Locally + +1. Run this command to build the docs: + + ```sh + $ npm run docs:build + ``` + +2. Once built, preview it locally by running: + + ```sh + $ npm run docs:preview + ``` + + The `preview` command will boot up a local static web server that will serve the output directory `.vitepress/dist` at `http://localhost:4173`. You can use this to make sure everything looks good before pushing to production. + +3. You can configure the port of the server by passing `--port` as an argument. + + ```json + { + "scripts": { + "docs:preview": "vitepress preview docs --port 8080" + } + } + ``` + + Now the `docs:preview` method will launch the server at `http://localhost:8080`. + +## Setting a Public Base Path + +By default, we assume the site is going to be deployed at the root path of a domain (`/`). If your site is going to be served at a sub-path, e.g. `https://mywebsite.com/blog/`, then you need to set the [`base`](../reference/site-config#base) option to `'/blog/'` in the VitePress config. + +**Example:** If you're using Github (or GitLab) Pages and deploying to `user.github.io/repo/`, then set your `base` to `/repo/`. + +## Relocatable Builds (Relative Base) {#relocatable-builds-relative-base} + +When the final URL of the site isn't known at build time — an IPFS gateway (`https://gateway/ipfs//…`), the Wayback Machine, a shared folder, docs bundled into an app — set `base` to `'./'`: + +```ts +export default { + base: './' +} +``` + +Every page then references assets and other pages relative to its own location, and the client runtime recovers the real mount point when the page loads. The same build works from **any** sub path without rebuilding — including several at once — with routing, search and prefetching fully functional. + +Opening the generated HTML files straight from the file system (`file://`) also works as a styled, fully navigable static site. Browsers block JavaScript modules over `file://`, so there is no hydration there — interactive features like search stay inactive, while all pre-rendered content and links keep working. + +A few things to know: + +- Keep [`cleanUrls`](../reference/site-config#cleanurls) off (the default): portable output needs links that end in `.html`, since there is no server to rewrite pretty URLs. +- `404.html` is generated for the root depth. Hosts that serve it as a fallback for arbitrarily deep URLs will render it without styles (there is no correct relative prefix for an unknown depth). +- [`head`](../reference/site-config#head) entries are emitted verbatim, as always — avoid root-absolute paths like `/favicon.ico` there and prefer absolute URLs or `transformHead`. +- Raw HTML `` tags in Markdown keep their `href` as written — use Markdown link syntax for site-absolute links (embedded `` sources go through the asset pipeline and are handled). +- Links created by [`createContentLoader`](./data-loading#createcontentloader) content stay site-absolute (their HTML is embedded into other pages, so no single relative prefix is correct) — they resolve only for a root mount. +- Serve pages at their canonical URLs: the root as `/dir/` (not `/dir`), and no added trailing slashes on page URLs. The relative prefix is resolved against the URL the browser actually shows, and virtually all static hosts canonicalize this way already. +- The dev server always serves at `/`; the relative behavior applies to the production build. + +## HTTP Cache Headers + +If you have control over the HTTP headers on your production server, you can configure `cache-control` headers to achieve better performance on repeated visits. + +The production build uses hashed file names for static assets (JavaScript, CSS and other imported assets not in `public`). If you inspect the production preview using your browser devtools' network tab, you will see files like `app.4f283b18.js`. + +This `4f283b18` hash is generated from the content of this file. The same hashed URL is guaranteed to serve the same file content - if the contents change, the URLs change too. This means you can safely use the strongest cache headers for these files. All such files will be placed under `assets/` in the output directory, so you can configure the following header for them: + +``` +Cache-Control: max-age=31536000,immutable +``` + +::: details Example Netlify `_headers` file + +``` +/assets/* + cache-control: max-age=31536000 + cache-control: immutable +``` + +Note: the `_headers` file should be placed in the [public directory](./asset-handling#the-public-directory) - in our case, `docs/public/_headers` - so that it is copied verbatim to the output directory. + +[Netlify custom headers documentation](https://docs.netlify.com/routing/headers/) + +::: + +::: details Example Vercel config in `vercel.json` + +```json +{ + "headers": [ + { + "source": "/assets/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "max-age=31536000, immutable" + } + ] + } + ] +} +``` + +Note: the `vercel.json` file should be placed at the root of your **repository**. + +[Vercel documentation on headers config](https://vercel.com/docs/concepts/projects/project-configuration#headers) + +::: + +## Platform Guides + +### Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render {#generic} + +Set up a new project and change these settings using your dashboard: + +- **Build Command:** `npm run docs:build` +- **Output Directory:** `docs/.vitepress/dist` +- **Node Version:** `20` (or above) + +::: warning +Don't enable options like _Auto Minify_ for HTML code. It will remove comments from output which have meaning to Vue. You may see hydration mismatch errors if they get removed. +::: + +### GitHub Pages + +1. Create a file named `deploy.yml` inside `.github/workflows` directory of your project with some content like this: + + ```yaml [.github/workflows/deploy.yml] + # Sample workflow for building and deploying a VitePress site to GitHub Pages + # + name: Deploy VitePress site to Pages + + on: + # Runs on pushes targeting the `main` branch. Change this to `master` if you're + # using the `master` branch as the default branch. + push: + branches: [main] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + + # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages + permissions: + contents: read + pages: write + id-token: write + + # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. + # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. + concurrency: + group: pages + cancel-in-progress: false + + jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v5 + with: + fetch-depth: 0 # Not needed if lastUpdated is not enabled + # - uses: pnpm/action-setup@v4 # Uncomment this block if you're using pnpm + # with: + # version: 9 # Not needed if you've set "packageManager" in package.json + # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun + - name: Setup Node + uses: actions/setup-node@v6 + with: + node-version: 24 + cache: npm # or pnpm / yarn + - name: Cache VitePress + uses: actions/cache@v4 + with: + path: docs/.vitepress/cache + key: ${{ runner.os }}-vitepress-${{ hashFiles('docs/**', 'package-lock.json', 'pnpm-lock.yaml', 'yarn.lock', 'bun.lockb') }} + restore-keys: | + ${{ runner.os }}-vitepress- + - name: Setup Pages + uses: actions/configure-pages@v4 + - name: Install dependencies + run: npm ci # or pnpm install / yarn install / bun install + - name: Build with VitePress + run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs/.vitepress/dist + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + needs: build + runs-on: ubuntu-latest + name: Deploy + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 + ``` + + ::: warning + Make sure the `base` option in your VitePress is properly configured. See [Setting a Public Base Path](#setting-a-public-base-path) for more details. + ::: + +2. In your repository's settings under "Pages" menu item, select "GitHub Actions" in "Build and deployment > Source". + +3. Push your changes to the `main` branch and wait for the GitHub Actions workflow to complete. You should see your site deployed to `https://.github.io/[repository]/` or `https:///` depending on your settings. Your site will automatically be deployed on every push to the `main` branch. + +### GitLab Pages + +1. Set `outDir` in VitePress config to `../public`. Configure `base` option to `'//'` if you want to deploy to `https://.gitlab.io//`. You don't need `base` if you're deploying to custom domain, user or group pages, or have "Use unique domain" setting enabled in GitLab. + +2. Create a file named `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content: + + ```yaml [.gitlab-ci.yml] + image: node:24 + pages: + cache: + paths: + - node_modules/ + script: + # - apk add git # Uncomment this if you're using small docker images like alpine and have lastUpdated enabled + - npm install + - npm run docs:build + artifacts: + paths: + - public + only: + - main + ``` + + + +### Azure + +1. Follow the [official documentation](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration). + +2. Set these values in your configuration file (and remove the ones you don't require, like `api_location`): + + - **`app_location`**: `/` + - **`output_location`**: `docs/.vitepress/dist` + - **`app_build_command`**: `npm run docs:build` + +### CloudRay + +You can deploy your VitePress project with [CloudRay](https://cloudray.io/) by following these [instructions](https://cloudray.io/articles/how-to-deploy-vitepress-site). + +### Firebase + +1. Create `firebase.json` and `.firebaserc` at the root of your project: + + `firebase.json`: + + ```json [firebase.json] + { + "hosting": { + "public": "docs/.vitepress/dist", + "ignore": [] + } + } + ``` + + `.firebaserc`: + + ```json [.firebaserc] + { + "projects": { + "default": "" + } + } + ``` + +2. After running `npm run docs:build`, run this command to deploy: + + ```sh + firebase deploy + ``` + +### Heroku + +1. Follow documentation and guide given in [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static). + +2. Create a file called `static.json` in the root of your project with the below content: + + ```json [static.json] + { + "root": "docs/.vitepress/dist" + } + ``` + +### Hostinger + +You can deploy your VitePress project with [Hostinger](https://www.hostinger.com/web-apps-hosting) by following these [instructions](https://www.hostinger.com/support/how-to-deploy-a-nodejs-website-in-hostinger/). While configuring build settings, choose VitePress as the framework and adjust the root directory to `./docs`. + +### Lizard + +[Lizard (lizard.build)](https://lizard.build) builds VitePress sites from source and serves the generated HTML. For the layout used in this guide, it detects `docs:build` and serves `docs/.vitepress/dist` on port `80`. + +Install the [Lizard CLI](https://lizard.build/docs/cli) and sign in with `lizard login`. To deploy a local source directory, run these commands from the project root containing `package.json`: + +```sh +lizard init --name vitepress-docs +lizard add --service web +lizard up --service web --port 80 +``` + +Leave build and start command overrides unset to use automatic detection. For GitHub deployments or other layouts, see the [Lizard VitePress guide](https://lizard.build/docs/framework-guides/vitepress). + +### Stormkit + +You can deploy your VitePress project to [Stormkit](https://www.stormkit.io) by following these [instructions](https://stormkit.io/blog/how-to-deploy-vitepress). + +### Surge + +After running `npm run docs:build`, run this command to deploy to [Surge](https://surge.sh): + +```sh +npx surge docs/.vitepress/dist +``` + +### harvis + +After running `npm run docs:build`, run this command to deploy to [harvis](https://harvis.dev): + +```sh +npx harvis docs/.vitepress/dist +``` + +### nginx + +Here is a example of an nginx server block configuration. This setup includes gzip compression for common text-based assets, rules for serving your VitePress site's static files with proper caching headers as well as handling `cleanUrls: true`. + +```nginx +map $uri $cache_control { + ~^/assets/ "public, max-age=31536000, immutable"; + default "no-cache"; +} + +server { + listen 8080; + listen [::]:8080; + server_name _; + + root /usr/share/nginx/html; + index index.html; + charset utf-8; + server_tokens off; + + absolute_redirect off; + + gzip on; + gzip_vary on; + gzip_comp_level 5; + gzip_min_length 1024; + gzip_types + application/javascript + application/json + application/manifest+json + image/svg+xml + text/css + text/javascript + text/plain; + + add_header Cache-Control $cache_control always; + add_header X-Content-Type-Options "nosniff" always; + add_header X-Frame-Options "SAMEORIGIN" always; + add_header Referrer-Policy "strict-origin-when-cross-origin" always; + + location / { + try_files $uri $uri.html $uri/index.html =404; + } + + location ~ ^(?.+)/$ { + if (-f $document_root$page.html) { + return 301 $page$is_args$args; + } + try_files $page/index.html =404; + } + + error_page 404 /404.html; +} +``` From fc23a66f066c8e6509a7e3127f0ea26a6acdcbbd Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:41:24 +0200 Subject: [PATCH 014/199] docs(de): add missing documentation pages --- docs/de/guide/extending-default-theme.md | 302 +++++++++++++++++++++++ 1 file changed, 302 insertions(+) create mode 100644 docs/de/guide/extending-default-theme.md diff --git a/docs/de/guide/extending-default-theme.md b/docs/de/guide/extending-default-theme.md new file mode 100644 index 000000000..1758d19b1 --- /dev/null +++ b/docs/de/guide/extending-default-theme.md @@ -0,0 +1,302 @@ +--- +outline: deep +description: Customize and extend the VitePress default theme with custom CSS, components, layouts, and slots. +--- + +# Extending the Default Theme + +VitePress' default theme is optimized for documentation, and can be customized. Consult the [Default Theme Config Overview](../reference/default-theme-config) for a comprehensive list of options. + +However, there are a number of cases where configuration alone won't be enough. For example: + +1. You need to tweak the CSS styling; +2. You need to modify the Vue app instance, for example to register global components; +3. You need to inject custom content into the theme via layout slots. + +These advanced customizations will require using a custom theme that "extends" the default theme. + +::: tip +Before proceeding, make sure to first read [Using a Custom Theme](./custom-theme) to understand how custom themes work. +::: + +## Customizing CSS + +The default theme CSS is customizable by overriding root level CSS variables: + +```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; +} +``` + +See [default theme CSS variables](https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css) that can be overridden. + +### Navbar + +The navbar draws a single background surface controlled by CSS variables, so its look can be changed without touching component internals: + +```css +:root { + /* bar height and background */ + --vp-nav-height: 4rem; + --vp-nav-bg-color: var(--vp-c-bg); + + /* background while on top of the home page (unscrolled); + set to var(--vp-nav-bg-color) to opt out of the transparent treatment */ + --vp-nav-home-bg-color: transparent; + + /* filter applied to the content behind the bar */ + --vp-nav-backdrop-filter: none; + + /* the bar's bottom rule and the mobile menu background */ + --vp-nav-divider-color: var(--vp-c-gutter); + --vp-nav-screen-bg-color: var(--vp-c-bg); +} +``` + +For example, 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); +} +``` + +The same treatment carries over to the local nav: `--vp-local-nav-bg-color` follows the navbar surface color by default, and where the two bars meet they share a single blurred surface, so the glass stays continuous across them. + +::: warning +`backdrop-filter` has a measurable scroll performance cost, especially on large or high-DPI screens. When using a translucent bar, also check text contrast over your page content. Safari 17 and earlier don't apply variable-driven backdrop filters, so they show the translucent color without the blur. +::: + +When the nav items don't fit the available width, they move into the `⋯` menu at the end of the navbar instead of being clipped, starting with the social links, the appearance switch and the locale switcher, followed by the nav items right-to-left. Its button label can be localized with [`extraMenuLabel`](../reference/default-theme-config#extramenulabel). + +## Using Different Fonts + +VitePress uses [Inter](https://rsms.me/inter/) as the default font, and will include the fonts in the build output. The font is also auto preloaded in production. However, this may not be desirable if you want to use a different main font. + +To avoid including Inter in the build output, import the theme from `vitepress/theme-without-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 +If you are using optional components like the [Team Page](../reference/default-theme-team-page) components, make sure to also import them from `vitepress/theme-without-fonts`! +::: + +If your font is a local file referenced via `@font-face`, it will be processed as an asset and included under `.vitepress/dist/assets` with 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' /* ... */) + } +} +``` + +If you're using 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 using Vite, you can also leverage Vite's [glob import feature](https://vite.dev/guide/features.html#glob-import) to auto register a directory of components. + +## Layout Slots + +The default theme's `` component has a few slots that can be used to inject content at certain locations of the page. Here's an example of injecting a component into the before 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] + + + +``` + +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 available in the default theme layout: + +- When `layout: 'doc'` (default) is enabled via frontmatter: + - `doc-top` + - `doc-bottom` + - `doc-footer-before` + - `doc-before` + - `doc-after` + - `sidebar-nav-before` + - `sidebar-nav-after` + - `aside-top` + - `aside-bottom` + - `aside-outline-before` + - `aside-outline-after` + - `aside-ads-before` + - `aside-ads-after` +- When `layout: 'home'` is enabled via frontmatter: + - `home-hero-before` + - `home-hero-info-before` + - `home-hero-info` + - `home-hero-info-after` + - `home-hero-actions-before-actions` + - `home-hero-actions-after` + - `home-hero-image` + - `home-hero-after` + - `home-features-before` + - `home-features-after` +- When `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-before` + - `nav-bar-title-after` + - `nav-bar-content-before` + - `nav-bar-content-after` + - `nav-screen-content-before` + - `nav-screen-content-after` + +## Using View Transitions API + +### On Appearance Toggle + +You can extend the default theme to provide a custom transition when the color mode is toggled. An example: + +<<< @/components/AppearanceToggleTransition.vue [.vitepress/theme/Layout.vue] + +Result (**warning!**: flashing colors, sudden movements, bright lights): + +
+Demo + +![Appearance Toggle Transition Demo](/appearance-toggle-transition.webp) + +
+ +Refer [Chrome Docs](https://developer.chrome.com/docs/web-platform/view-transitions/) from more details on view transitions. + +### On Route Change + +Coming soon. + +## Overriding Internal Components + +You can use Vite's [aliases](https://vite.dev/config/shared-options.html#resolve-alias) to replace default theme components with 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 between minor releases. From e4aca759240c01453098d1ae8a6df8b86ee2d25d Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:41:26 +0200 Subject: [PATCH 015/199] docs(de): add missing documentation pages --- docs/de/guide/frontmatter.md | 54 ++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 docs/de/guide/frontmatter.md diff --git a/docs/de/guide/frontmatter.md b/docs/de/guide/frontmatter.md new file mode 100644 index 000000000..e8dd329a3 --- /dev/null +++ b/docs/de/guide/frontmatter.md @@ -0,0 +1,54 @@ +--- +description: Learn how to use YAML frontmatter in VitePress Markdown files to control page-level metadata and behavior. +--- + +# Frontmatter + +## Usage + +VitePress supports YAML frontmatter in all Markdown files, parsing them with [gray-matter](https://github.com/jonschlinkert/gray-matter). The frontmatter must be at the top of the Markdown file (before any elements including ` + + +``` + +## RTL Support + +For right-to-left languages, set `dir: 'rtl'` in the config. The default theme is laid out with [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values), so the layout, the navigation and directional icons follow the document direction on their own. No PostCSS plugin is needed; an RTLCSS plugin left in place would flip the mirrored styles a second time, so remove it. + +```ts [docs/.vitepress/config.ts] +export default { + lang: 'fa-IR', + dir: 'rtl' +} +``` + +For a multilingual site, set `dir` per locale in `locales`. It can also be overridden for a single page with the [`dir`](../reference/frontmatter-config#dir) frontmatter option. Code blocks always stay left-to-right. + +When adding your own styles, prefer logical properties such as `margin-inline-start` over `margin-left`, and mirror your own directional icons in right-to-left layouts: + +```css +[dir='rtl'] .my-arrow-icon { + scale: -1 1; +} +``` From 798b287d98c67365c64afe3df9e9484596f24339 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:41:33 +0200 Subject: [PATCH 018/199] docs(de): add missing documentation pages --- docs/de/guide/markdown.md | 1195 +++++++++++++++++++++++++++++++++++++ 1 file changed, 1195 insertions(+) create mode 100644 docs/de/guide/markdown.md diff --git a/docs/de/guide/markdown.md b/docs/de/guide/markdown.md new file mode 100644 index 000000000..574e9626a --- /dev/null +++ b/docs/de/guide/markdown.md @@ -0,0 +1,1195 @@ +--- +description: VitePress built-in Markdown extensions including custom containers, code blocks with syntax highlighting, line highlighting, code groups, and more. +outline: deep +--- + +# Markdown Extensions + +VitePress comes with built in Markdown Extensions. + +## Header Anchors + +Headers automatically get anchor links applied. Rendering of anchors can be configured using the `markdown.anchor` option. + +### Custom anchors + +To specify a custom anchor tag for a heading instead of using the auto-generated one, add a suffix to the heading: + +``` +# Using custom anchors {#my-anchor} +``` + +This allows you to link to the heading as `#my-anchor` instead of the default `#using-custom-anchors`. + +## Links + +Both internal and external links get special treatment. + +### Internal Links + +Internal links are converted to router links for SPA navigation. Also, every `index.md` contained in each sub-directory will automatically be converted to `index.html`, with corresponding URL `/`. + +For example, given the following directory structure: + +``` +. +├─ index.md +├─ foo +│ ├─ index.md +│ ├─ one.md +│ └─ two.md +└─ bar + ├─ index.md + ├─ three.md + └─ four.md +``` + +And providing you are in `foo/one.md`: + +```md +[Home](/) +[foo](/foo/) +[foo heading](./#heading) +[bar - three](../bar/three) +[bar - three](../bar/three.md) +[bar - four](../bar/four.html) +``` + +### Page Suffix + +Pages and internal links get generated with the `.html` suffix by default. + +### External Links + +Outbound links automatically get `target="_blank" rel="noreferrer"`: + +- [vuejs.org](https://vuejs.org) +- [VitePress on GitHub](https://github.com/vuejs/vitepress) + +## Frontmatter + +[YAML frontmatter](https://jekyllrb.com/docs/front-matter/) is supported out of the box: + +```yaml +--- +title: Blogging Like a Hacker +lang: en-US +--- +``` + +This data will be available to the rest of the page, along with all custom and theming components. + +For more details, see [Frontmatter](../reference/frontmatter-config). + +## GitHub-Style Tables + +**Input** + +```md +| Tables | Are | Cool | +| ------------- | :-----------: | ----: | +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | +``` + +**Output** + +| Tables | Are | Cool | +| ------------- | :-----------: | -----: | +| col 3 is | right-aligned | \$1600 | +| col 2 is | centered | \$12 | +| zebra stripes | are neat | \$1 | + +## Task Lists + +**Input** + +```md +- [ ] Write the press release +- [x] Update the website +``` + +**Output** + +- [ ] Write the press release +- [x] Update the website + +## Footnotes + +**Input** + +```md +Footnotes are supported[^1], including inline ones^[This is an inline footnote.]. + +[^1]: Definitions can contain **markdown** and are rendered at the end of the page. +``` + +**Output** + +Footnotes are supported[^1], including inline ones^[This is an inline footnote.]. + +[^1]: Definitions can contain **markdown** and are rendered at the end of the page. + +## Emoji :tada: + +**Input** + +``` +:tada: :100: +``` + +**Output** + +:tada: :100: + +A [list of all emojis](https://github.com/mdit-plugins/mdit-plugins/blob/main/packages/plugin-emoji/src/data/full.ts) is available. + +## Table of Contents + +**Input** + +``` +[[toc]] +``` + +**Output** + +[[toc]] + +Rendering of the TOC can be configured using the `markdown.toc` option. + +## Custom Containers + +Custom containers can be defined by their types, titles, and contents. + +### Default Title + +**Input** + +```md +::: info +This is an info box. +::: + +::: tip +This is a tip. +::: + +::: warning +This is a warning. +::: + +::: danger +This is a dangerous warning. +::: + +::: details +This is a details block. +::: +``` + +**Output** + +::: info +This is an info box. +::: + +::: tip +This is a tip. +::: + +::: warning +This is a warning. +::: + +::: danger +This is a dangerous warning. +::: + +::: details +This is a details block. +::: + +### Custom Title + +You may set custom title by appending the text right after the "type" of the container. + +**Input** + +````md +::: danger STOP +Danger zone, do not proceed +::: + +::: details Click me to toggle the code +```js +console.log('Hello, VitePress!') +``` +::: +```` + +**Output** + +::: danger STOP +Danger zone, do not proceed +::: + +::: details Click me to toggle the code +```js +console.log('Hello, VitePress!') +``` +::: + +Also, you may set custom titles globally by adding the following content in site config, helpful if not writing in English: + +```ts +// config.ts +export default defineConfig({ + // ... + markdown: { + container: { + tipLabel: '提示', + warningLabel: '警告', + dangerLabel: '危险', + infoLabel: '信息', + detailsLabel: '详细信息' + } + } + // ... +}) +``` + +On multilingual sites, these labels can also be overridden per locale - see [Per-locale Markdown Strings](./i18n#per-locale-markdown-strings). + +### Registering New Containers + +Beyond the built-in types, you can register additional containers by mapping their names to their default titles: + +```ts +// config.ts +export default defineConfig({ + // ... + markdown: { + container: { + customContainers: { + success: 'SUCCESS' + } + } + } + // ... +}) +``` + +Registered names work like the built-in ones - including custom titles, attributes, and the [GitHub-style alert syntax](#github-flavored-alerts): + +```md +::: success +You have completed the walkthrough! +::: + +> [!SUCCESS] Custom title +> This renders the same way. +``` + +New containers ship without any styling, so add some in your theme using the container name as the class. For this example, the default theme's palette already provides fitting colors: + +```css +/* .vitepress/theme/custom.css */ +.custom-block.success { + border-color: transparent; + color: var(--vp-c-text-1); + background-color: var(--vp-c-success-soft); +} +``` + +### Nesting + +The `:::` markers follow the same rules as fenced code blocks (` ``` `): a fence is only closed by a matching fence that is **at least as long** as the one that opened it. To nest containers (or to mix them with [code groups](#code-groups)) make the outer fence longer than the ones inside it. + +**Input** + +`````md +:::: info Outer container +This box contains another container. + +::: details Inner container +```js +console.log('Hello, VitePress!') +``` +::: +:::: +````` + +**Output** + +:::: info Outer container +This box contains another container. + +::: details Inner container +```js +console.log('Hello, VitePress!') +``` +::: +:::: + +### Additional Attributes + +You can add additional attributes to the custom containers. We use [@mdit/plugin-attrs](https://mdit-plugins.github.io/attrs.html) for this feature, and it is supported on almost all markdown elements. For example, you can set the `open` attribute to make the details block open by default: + +**Input** + +````md +::: details Click me to toggle the code {open} +```js +console.log('Hello, VitePress!') +``` +::: +```` + +**Output** + +::: details Click me to toggle the code {open} +```js +console.log('Hello, VitePress!') +``` +::: + +The special `no-title` attribute renders a container without a title element (it has no effect on `details`, which always needs its summary): + +**Input** + +```md +::: tip {no-title} +Just want to try it out? Skip to the [Quickstart](./getting-started). +::: +``` + +**Output** + +::: tip {no-title} +Just want to try it out? Skip to the [Quickstart](./getting-started). +::: + +### `raw` + +This is a special container that can be used to prevent style and router conflicts with VitePress. This is especially useful when you're documenting component libraries. + +**Syntax** + +```md +::: raw +Wraps in a `
` +::: +``` + +`vp-raw` class can be directly used on elements too. Style isolation is currently opt-in: + +- Install `postcss` with your preferred package manager: + + ```sh + $ npm add -D postcss + ``` + +- Create a file named `docs/postcss.config.mjs` and add this to it: + + ```js + import { postcssIsolateStyles } from 'vitepress' + + export default { + plugins: [postcssIsolateStyles()] + } + ``` + + You can pass its options like this: + + ```js + postcssIsolateStyles({ + includeFiles: [/custom\.css/] // defaults to [/vp-doc\.css/, /base\.css/] + }) + ``` + +## GitHub-flavored Alerts + +VitePress also supports [GitHub-flavored alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) to render as callouts. They will be rendered the same as the [custom containers](#custom-containers). Unlike on GitHub, text placed right after the marker becomes the title of the alert (`> [!NOTE] Custom Title`), and [containers you registered yourself](#registering-new-containers) work here too. + +```md +> [!NOTE] +> Highlights information that users should take into account, even when skimming. + +> [!TIP] +> Optional information to help a user be more successful. + +> [!IMPORTANT] +> Crucial information necessary for users to succeed. + +> [!WARNING] +> Critical content demanding immediate user attention due to potential risks. + +> [!CAUTION] +> Negative potential consequences of an action. +``` + +> [!NOTE] +> Highlights information that users should take into account, even when skimming. + +> [!TIP] +> Optional information to help a user be more successful. + +> [!IMPORTANT] +> Crucial information necessary for users to succeed. + +> [!WARNING] +> Critical content demanding immediate user attention due to potential risks. + +> [!CAUTION] +> Negative potential consequences of an action. + +By default, alert colors match GitHub's, with caution and danger both rendering in red. Enable [`themeConfig.gradedContainers`](../reference/default-theme-config#gradedcontainers) to use a graded severity scale: danger (red), warning (orange), and caution (yellow). Note that `[!DANGER]` is a VitePress extension and will render as a regular blockquote on GitHub. + +## Syntax Highlighting in Code Blocks + +VitePress uses [Shiki](https://github.com/shikijs/shiki) to highlight language syntax in Markdown code blocks, using coloured text. Shiki supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block: + +**Input** + +```` +```js +export default { + name: 'MyComponent', + // ... +} +``` +```` + +```` +```html +
    +
  • + {{ todo.text }} +
  • +
+``` +```` + +**Output** + +```js +export default { + name: 'MyComponent' + // ... +} +``` + +```html +
    +
  • + {{ todo.text }} +
  • +
+``` + +A [list of valid languages](https://shiki.style/languages) is available on Shiki's repository. + +You may also customize syntax highlight theme, configure language aliases, and set custom language labels in app config. Please see [`markdown` options](../reference/site-config#markdown) for more details. + +## Line Highlighting in Code Blocks + +**Input** + +```` +```js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` +```` + +**Output** + +```js{4} +export default { + data () { + return { + msg: 'Highlighted!' + } + } +} +``` + +In addition to a single line, you can also specify multiple single lines, ranges, or both: + +- Line ranges: for example `{5-8}`, `{3-10}`, `{10-17}` +- Multiple single lines: for example `{4,7,9}` +- Line ranges and single lines: for example `{4,7-13,16,23-27,40}` + +**Input** + +```` +```js{1,4,6-8} +export default { // Highlighted + data () { + return { + msg: `Highlighted! + This line isn't highlighted, + but this and the next 2 are.`, + motd: 'VitePress is awesome', + lorem: 'ipsum' + } + } +} +``` +```` + +**Output** + +```js{1,4,6-8} +export default { // Highlighted + data () { + return { + msg: `Highlighted! + This line isn't highlighted, + but this and the next 2 are.`, + motd: 'VitePress is awesome', + lorem: 'ipsum', + } + } +} +``` + +Alternatively, it's possible to highlight directly in the line by using the `// [!code highlight]` comment. + +**Input** + +```` +```js +export default { + data () { + return { + msg: 'Highlighted!' // [!!code highlight] + } + } +} +``` +```` + +**Output** + +```js +export default { + data() { + return { + msg: 'Highlighted!' // [!code highlight] + } + } +} +``` + +## Focus in Code Blocks + +Adding the `// [!code focus]` comment on a line will focus it and blur the other parts of the code. + +Additionally, you can define a number of lines to focus using `// [!code focus:]`. + +**Input** + +```` +```js +export default { + data () { + return { + msg: 'Focused!' // [!!code focus] + } + } +} +``` +```` + +**Output** + +```js +export default { + data() { + return { + msg: 'Focused!' // [!code focus] + } + } +} +``` + +## Colored Diffs in Code Blocks + +Adding the `// [!code --]` or `// [!code ++]` comments on a line will create a diff of that line, while keeping the colors of the codeblock. + +**Input** + +```` +```js +export default { + data () { + return { + msg: 'Removed' // [!!code --] + msg: 'Added' // [!!code ++] + } + } +} +``` +```` + +**Output** + +```js +export default { + data () { + return { + msg: 'Removed' // [!code --] + msg: 'Added' // [!code ++] + } + } +} +``` + +## Errors and Warnings in Code Blocks + +Adding the `// [!code warning]` or `// [!code error]` comments on a line will color it accordingly. + +**Input** + +```` +```js +export default { + data () { + return { + msg: 'Error', // [!!code error] + msg: 'Warning' // [!!code warning] + } + } +} +``` +```` + +**Output** + +```js +export default { + data() { + return { + msg: 'Error', // [!code error] + msg: 'Warning' // [!code warning] + } + } +} +``` + +## Line Numbers + +You can enable line numbers for each code blocks via config: + +```js +export default { + markdown: { + lineNumbers: true + } +} +``` + +Please see [`markdown` options](../reference/site-config#markdown) for more details. + +You can add `:line-numbers` / `:no-line-numbers` mark in your fenced code blocks to override the value set in config. + +You can also customize the starting line number by adding `=` after `:line-numbers`. For example, `:line-numbers=2` means the line numbers in code blocks will start from `2`. + +**Input** + +````md +```ts {1} +// line-numbers is disabled by default +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + +```ts:line-numbers {1} +// line-numbers is enabled +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + +```ts:line-numbers=2 {1} +// line-numbers is enabled and start from 2 +const line3 = 'This is line 3' +const line4 = 'This is line 4' +``` +```` + +**Output** + +```ts {1} +// line-numbers is disabled by default +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + +```ts:line-numbers {1} +// line-numbers is enabled +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + +```ts:line-numbers=2 {1} +// line-numbers is enabled and start from 2 +const line3 = 'This is line 3' +const line4 = 'This is line 4' +``` + +## Import Code Snippets + +You can import code snippets from existing files via following syntax: + +```md +<<< @/filepath +``` + +It also supports [line highlighting](#line-highlighting-in-code-blocks): + +```md +<<< @/filepath{highlightLines} +``` + +**Input** + +```md +<<< @/snippets/snippet.js{2} +``` + +**Code file** + +<<< @/snippets/snippet.js + +**Output** + +<<< @/snippets/snippet.js{2} + +::: tip +The value of `@` corresponds to the source root. By default it's the VitePress project root, unless `srcDir` is configured. Alternatively, you can also import from relative paths: + +```md +<<< ../snippets/snippet.js +``` + +::: + +You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath: + +**Input** + +```md +<<< @/snippets/snippet-with-region.js#snippet{1} +``` + +**Code file** + +<<< @/snippets/snippet-with-region.js + +**Output** + +<<< @/snippets/snippet-with-region.js#snippet{1} + +If a file contains multiple regions with the same name, all of them are imported and concatenated — including regions written in different comment styles, such as a `` in the template and a `// #region` in the script of the same Vue SFC. The marker comments delimiting them are removed from the output; set `markdown.snippet.stripRegionMarkers` to `'all'` to also remove markers of other comment styles nested inside the region, or to `false` to keep all of them. + +::: tip +Region names may contain letters, digits, `_`, `-` and `.`. Since the name is taken from the end of the path, a file whose name itself contains a `#` needs an explicit region — write `<<< ./my#file.js#region` rather than `<<< ./my#file.js`. +::: + +::: warning +Importing a file or region that does not exist throws a build error. Set `markdown.snippet.silent: true` to log a warning and render nothing instead. +::: + +You can also specify the language inside the braces (`{}`) like this: + +```md +<<< @/snippets/snippet.cs{c#} + + + +<<< @/snippets/snippet.cs{1,2,4-6 c#} + + + +<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers} +``` + +This is helpful if source language cannot be inferred from your file extension. Only alphanumeric extensions are inferred, so files like `main.c++` or `scss.code-snippets` need the language spelled out this way. + +Anything after the language inside the braces is passed along to the code block as extra attributes — for example, `<<< @/snippets/snippet.ts{ts twoslash}` enables twoslash processing when [`@shikijs/vitepress-twoslash`](https://shiki.style/packages/vitepress#twoslash) is configured. Note that attributes may not contain square brackets. + +## Code Groups + +You can group multiple code blocks like this: + +**Input** + +````md +::: code-group + +```js [config.js] +/** + * @type {import('vitepress').UserConfig} + */ +const config = { + // ... +} + +export default config +``` + +```ts [config.ts] +import type { UserConfig } from 'vitepress' + +const config: UserConfig = { + // ... +} + +export default config +``` + +::: +```` + +**Output** + +::: code-group + +```js [config.js] +/** + * @type {import('vitepress').UserConfig} + */ +const config = { + // ... +} + +export default config +``` + +```ts [config.ts] +import type { UserConfig } from 'vitepress' + +const config: UserConfig = { + // ... +} + +export default config +``` + +::: + +You can also [import snippets](#import-code-snippets) in code groups: + +**Input** + +```md +::: code-group + + + +<<< @/snippets/snippet.js + + + +<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region] + +::: +``` + +**Output** + +::: code-group + +<<< @/snippets/snippet.js + +<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region] + +::: + +## Markdown File Inclusion + +You can include a markdown file in another markdown file, even nested. + +::: tip +You can also prefix the markdown path with `@`, and it will act as the source root. By default, the source root is the VitePress project root, unless `srcDir` is configured. +::: + +For example, you can include a relative markdown file using this: + +**Input** + +```md +# Docs + +## Basics + + +``` + +**Part file** (`parts/basics.md`) + +```md +Some getting started stuff. + +### Configuration + +Can be created using `.foorc.json`. +``` + +**Equivalent code** + +```md +# Docs + +## Basics + +Some getting started stuff. + +### Configuration + +Can be created using `.foorc.json`. +``` + +It also supports selecting a line range: + +**Input** + +```md:line-numbers +# Docs + +## Basics + + +``` + +**Part file** (`parts/basics.md`) + +```md:line-numbers +Some getting started stuff. + +### Configuration + +Can be created using `.foorc.json`. +``` + +**Equivalent code** + +```md:line-numbers +# Docs + +## Basics + +### Configuration + +Can be created using `.foorc.json`. +``` + +The format of the selected line range can be: `{3,}`, `{,10}`, `{1,10}` + +You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath: + +**Input** + +```md:line-numbers +# Docs + +## Basics + + + +``` + +**Part file** (`parts/basics.md`) + +```md:line-numbers + +## Usage Line 1 + +## Usage Line 2 + +## Usage Line 3 + +``` + +**Equivalent code** + +```md:line-numbers +# Docs + +## Basics + +## Usage Line 1 + +## Usage Line 3 +``` + +::: warning +Including a missing file, region, heading anchor, or an out-of-range line selection throws a build error. Set `markdown.include.silent: true` to log a warning and skip the inclusion instead. +::: + +Instead of VS Code regions, you can also use header anchors to include a specific section of the file. For example, if you have a header in your markdown file like this: + +```md +## My Base Section + +Some content here. + +### My Sub Section + +Some more content here. + +## Another Section + +Content outside `My Base Section`. +``` + +You can include the `My Base Section` section like this: + +```md +## My Extended Section + +``` + +**Equivalent code** + +```md +## My Extended Section + +Some content here. + +### My Sub Section + +Some more content here. +``` + +Here, `my-base-section` is the generated id of the heading element. In case it's not easily guessable, you can open the part file in your browser and click on the heading anchor (`#` symbol left to the heading when hovered) to see the id in the URL bar. Or use browser dev tools to inspect the element. Alternatively, you can also specify the id to the part file like this: + +```md +## My Base Section {#custom-id} +``` + +and include it like this: + +```md + +``` + +Relative links and images inside included files resolve from the _included_ file's location, so a partial can link to its neighbors no matter which page includes it. Set `markdown.include.rebaseRelativeUrls: false` to leave them resolving relative to the including page instead. + +### Including Code Files {#including-code-files} + +Since inclusion happens before code blocks are parsed, the directive also works inside fences. Combined with a line range, this lets you show only part of a code file — an alternative to [importing snippets](#import-code-snippets) when regions are not an option: + +**Input** + +````md +```js + +``` +```` + +**Output** + +```js + +``` + +Note that the included lines are inserted verbatim (indentation is preserved), and content containing backticks needs a longer outer fence. + +## Math Equations + +This is currently opt-in. To enable it, you need to install `markdown-it-mathjax3` and set `markdown.math` to `true` in your config file: + +```sh +npm add -D markdown-it-mathjax3@^4 +``` + +```ts [.vitepress/config.ts] +export default { + markdown: { + math: true + } +} +``` + +**Input** + +```md +When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are +$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ + +**Maxwell's equations:** + +| equation | description | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero | +| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ | +| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ | +``` + +**Output** + +When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are +$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ + +**Maxwell's equations:** + +| equation | description | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero | +| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ | +| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ | + +## Image Lazy Loading + +You can enable lazy loading for each image added via markdown by setting `lazyLoad` to `true` in your config file: + +```js +export default { + markdown: { + image: { + // image lazy loading is disabled by default + lazyLoad: true + } + } +} +``` + +## Advanced Configuration + +VitePress uses [markdown-it](https://github.com/markdown-it/markdown-it) as the Markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the `markdown-it` instance using the `markdown` option in `.vitepress/config.js`: + +```js +import { defineConfig } from 'vitepress' +import { headerLink } from '@mdit/plugin-anchor' +import markdownItFoo from 'markdown-it-foo' + +export default defineConfig({ + markdown: { + // options for @mdit/plugin-anchor + // https://mdit-plugins.github.io/anchor.html + anchor: { + permalink: headerLink() + }, + + // options for @mdit-vue/plugin-toc + // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options + toc: { level: [1, 2] }, + + config: (md) => { + // use more markdown-it plugins! + md.use(markdownItFoo) + } + } +}) +``` + +See full list of configurable properties in [Config Reference: App Config](../reference/site-config#markdown). From efd3cf73d2f61b60673bce5fe42273d6b0bcedcd Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:43:14 +0200 Subject: [PATCH 019/199] docs(de): add missing localized documentation --- docs/de/guide/migration-from-vitepress-0.md | 23 +++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/de/guide/migration-from-vitepress-0.md diff --git a/docs/de/guide/migration-from-vitepress-0.md b/docs/de/guide/migration-from-vitepress-0.md new file mode 100644 index 000000000..18268da48 --- /dev/null +++ b/docs/de/guide/migration-from-vitepress-0.md @@ -0,0 +1,23 @@ +# Migration von VitePress 0.x + +If you're coming from VitePress 0.x version, there're several breaking changes due to new features and enhancement. Please follow this guide to see how to migrate your app over to the latest VitePress. + +## App Config + +- The internationalization feature is not yet implemented. + +## Theme Config + +- `sidebar` option has changed its structure. + - `children` key is now named `items`. + - Top level item may not contain `link` at the moment. We're planning to bring it back. +- `repo`, `repoLabel`, `docsDir`, `docsBranch`, `editLinks`, `editLinkText` are removed in favor of more flexible api. + - For adding GitHub link with icon to the nav, use [Social Links](../reference/default-theme-nav#navigation-links) feature. + - For adding "Edit this page" feature, use [Edit Link](../reference/default-theme-edit-link) feature. +- `lastUpdated` option is now split into `config.lastUpdated` and `themeConfig.lastUpdated.text`. +- `carbonAds.carbon` is changed to `carbonAds.code`. + +## Frontmatter-Konfiguration + +- `home: true` option has changed to `layout: home`. Also, many Homepage related settings have been modified to provide additional features. See [Home Page guide](../reference/default-theme-home-page) for details. +- `footer` option is moved to [`themeConfig.footer`](../reference/default-theme-config#footer). From aa5cea6151118a22ed570afb6ad15d32c412450f Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:43:16 +0200 Subject: [PATCH 020/199] docs(de): add missing localized documentation --- docs/de/guide/migration-from-vuepress.md | 30 ++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 docs/de/guide/migration-from-vuepress.md diff --git a/docs/de/guide/migration-from-vuepress.md b/docs/de/guide/migration-from-vuepress.md new file mode 100644 index 000000000..cfbc8f28a --- /dev/null +++ b/docs/de/guide/migration-from-vuepress.md @@ -0,0 +1,30 @@ +# Migration von VuePress + +## Konfiguration + +### Seitenleiste + +The sidebar is no longer automatically populated from frontmatter. You can [read the frontmatter yourself](https://github.com/vuejs/vitepress/issues/572#issuecomment-1170116225) to dynamically populate the sidebar. [Additional utilities for this](https://github.com/vuejs/vitepress/issues/96) may be provided in the future. + +## Markdown + +### Bilder + +Unlike VuePress, VitePress handles [`base`](./asset-handling#base-url) of your config automatically when you use static image. + +Hence, now you can render images without `img` tag. + +```diff +- foo ++ ![foo](/foo.png) +``` + +::: warning +For dynamic images you still need `withBase` as shown in [Base URL guide](./asset-handling#base-url). +::: + +Use `` regex to find and replace it with `![$2]($1)` to replace all the images with `![](...)` syntax. + +--- + +more to follow... From d9419fffce21c6fabe5a39b07b2170225414f006 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:43:18 +0200 Subject: [PATCH 021/199] docs(de): add missing localized documentation --- docs/de/guide/mpa-mode.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 docs/de/guide/mpa-mode.md diff --git a/docs/de/guide/mpa-mode.md b/docs/de/guide/mpa-mode.md new file mode 100644 index 000000000..5e0fc24cb --- /dev/null +++ b/docs/de/guide/mpa-mode.md @@ -0,0 +1,27 @@ +--- +description: MPA (Multi-Page Application) mode in VitePress for zero-JavaScript pages with better initial performance. +--- + +# MPA-Modus + +MPA (Multi-Page Application) mode can be enabled via the command line via `vitepress build --mpa`, or via config through the `mpa: true` option. + +In MPA mode, all pages are rendered without any JavaScript included by default. As a result, the production site will likely have a better initial visit performance score from audit tools. + +However, due to the absence of SPA navigation, cross-page links will lead to full page reloads. Post-load navigations in MPA mode will not feel as instant as in SPA mode. + +Also note that no-JS-by-default means you are essentially using Vue purely as a server-side templating language. No event handlers will be attached in the browser, so there will be no interactivity. To load client-side JavaScript, you will need to use the special ` + +# Hello +``` + +` +``` + +### Rohinhalt rendern + +Params passed to the page will be serialized in the client JavaScript payload, so you should avoid passing heavy data in params, for example raw Markdown or HTML content fetched from a remote CMS. + +Instead, you can pass such content to each page using the `content` property on each path object: + +```js +export default { + async paths() { + const posts = await (await fetch('https://my-cms.com/blog-posts')).json() + + return posts.map((post) => { + return { + params: { id: post.id }, + content: post.content // raw Markdown or HTML + } + }) + } +} +``` + +Then, use the following special syntax to render the content as part of the Markdown file itself: + +```md + +``` From 51cfc7d314a399b3d69146ac313ab1e2e68757c3 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:43:23 +0200 Subject: [PATCH 023/199] docs(de): add missing localized documentation --- docs/de/guide/sitemap-generation.md | 62 +++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 docs/de/guide/sitemap-generation.md diff --git a/docs/de/guide/sitemap-generation.md b/docs/de/guide/sitemap-generation.md new file mode 100644 index 000000000..5bef11fa7 --- /dev/null +++ b/docs/de/guide/sitemap-generation.md @@ -0,0 +1,62 @@ +--- +description: a sitemap.xml file for your VitePress site to improve search engine discoverability. +--- + +# Sitemap-Generierung + +VitePress comes with out-of-the-box support for generating a `sitemap.xml` file for your site. To enable it, add the following to your `.vitepress/config.js`: + +```ts +export default { + sitemap: { + hostname: 'https://example.com' + } +} +``` + +To have `` tags in your `sitemap.xml`, you can enable the [`lastUpdated`](../reference/default-theme-last-updated) option. + +## Optionen + +Sitemap support is powered by the [`sitemap`](https://www.npmjs.com/package/sitemap) module. You can pass any options supported by it to the `sitemap` option in your config file. These will be passed directly to the `SitemapStream` constructor. Refer to the [`sitemap` documentation](https://www.npmjs.com/package/sitemap#options-you-can-pass) for more details. Example: + +```ts +export default { + sitemap: { + hostname: 'https://example.com', + lastmodDateOnly: false + } +} +``` + +If you're using `base` in your config, you should append it to the `hostname` option: + +```ts +export default { + base: '/my-site/', + sitemap: { + hostname: 'https://example.com/my-site/' + } +} +``` + +## `transformItems` Hook + +You can use the `sitemap.transformItems` hook to modify the sitemap items before they are written to the `sitemap.xml` file. This hook is called with an array of sitemap items and expects an array of sitemap items to be returned. Example: + +```ts +export default { + sitemap: { + hostname: 'https://example.com', + transformItems: (items) => { + // add new items or modify/filter existing items + items.push({ + url: '/extra-page', + changefreq: 'monthly', + priority: 0.8 + }) + return items + } + } +} +``` From de2f7fb1934b8b797a99133963e3eed3a9ca43ba Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:43:25 +0200 Subject: [PATCH 024/199] docs(de): add missing localized documentation --- docs/de/guide/ssr-compat.md | 135 ++++++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 docs/de/guide/ssr-compat.md diff --git a/docs/de/guide/ssr-compat.md b/docs/de/guide/ssr-compat.md new file mode 100644 index 000000000..879a56092 --- /dev/null +++ b/docs/de/guide/ssr-compat.md @@ -0,0 +1,135 @@ +--- +outline: deep +description: your VitePress theme components and custom code are compatible with server-side rendering. +--- + +# SSR-Kompatibilität + +VitePress pre-renders the app in Node.js during the production build, using Vue's Server-Side Rendering (SSR) capabilities. This means all custom code in theme components are subject to SSR Compatibility. + +The [SSR section in official Vue docs](https://vuejs.org/guide/scaling-up/ssr.html) provides more context on what SSR is, the relationship between SSR / SSG, and common notes on writing SSR-friendly code. The rule of thumb is to only access browser / DOM APIs in `beforeMount` or `mounted` hooks of Vue components. + +## `` + +If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the built-in `` component: + +```md + + + +``` + +## Libraries that Access Browser API on Import + +Some components or libraries access browser APIs **on import**. To use code that assumes a browser environment on import, you need to dynamically import them. + +### Importing in Mounted Hook + +```vue + +``` + +### Conditional Import + +You can also conditionally import a dependency using the `import.meta.env.SSR` flag (part of [Vite env variables](https://vite.dev/guide/env-and-mode.html#env-variables)): + +```js +if (!import.meta.env.SSR) { + import('./lib-that-access-window-on-import').then((module) => { + // use code + }) +} +``` + +Since [`Theme.enhanceApp`](./custom-theme#theme-interface) can be async, you can conditionally import and register Vue plugins that access browser APIs on import: + +```js [.vitepress/theme/index.js] +/** @type {import('vitepress').Theme} */ +export default { + // ... + async enhanceApp({ app }) { + if (!import.meta.env.SSR) { + const plugin = await import('plugin-that-access-window-on-import') + app.use(plugin.default) + } + } +} +``` + +If you're using TypeScript: +```ts [.vitepress/theme/index.ts] +import type { Theme } from 'vitepress' + +export default { + // ... + async enhanceApp({ app }) { + if (!import.meta.env.SSR) { + const plugin = await import('plugin-that-access-window-on-import') + app.use(plugin.default) + } + } +} satisfies Theme +``` + +### `defineClientComponent` + +VitePress provides a convenience helper for importing Vue components that access browser APIs on import. + +```vue + + + +``` + +You can also pass props/children/slots to the target component: + +```vue + + + +``` + +The target component will only be imported in the mounted hook of the wrapper component. From 0800ece6179de0fc44290b5b1d1fc2c0fd4a50e3 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:43:28 +0200 Subject: [PATCH 025/199] docs(de): add missing localized documentation --- docs/de/guide/using-vue.md | 295 +++++++++++++++++++++++++++++++++++++ 1 file changed, 295 insertions(+) create mode 100644 docs/de/guide/using-vue.md diff --git a/docs/de/guide/using-vue.md b/docs/de/guide/using-vue.md new file mode 100644 index 000000000..ef3f57085 --- /dev/null +++ b/docs/de/guide/using-vue.md @@ -0,0 +1,295 @@ +--- +description: Vue components and dynamic templating features directly inside Markdown files in VitePress. +--- + +# Vue in Markdown verwenden + +In VitePress, each Markdown file is compiled into HTML and then processed as a [Vue Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html). This means you can use any Vue features inside the Markdown, including dynamic templating, using Vue components, or arbitrary in-page Vue component logic by adding a ` + +## Markdown Content + +The count is: {{ count }} + + + + +``` + +::: warning Avoid ` +``` + +## Using Teleports + +VitePress currently has SSG support for teleports to body only. For other targets, you can wrap them inside the built-in `` component or inject the teleport markup into the correct location in your final page HTML through [`postRender` hook](../reference/site-config#postrender). + + + +::: details +<<< @/components/ModalDemo.vue +::: + +```md + + +
+ // ... +
+
+
+``` + + + + + + +## VS Code IntelliSense Support + + + +Vue provides 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"] +} +``` +::: From 6146b2ad0d6ccbbf3445387ad51a5ffa54cd2a7d Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:43:30 +0200 Subject: [PATCH 026/199] docs(de): add missing localized documentation --- docs/de/guide/what-is-vitepress.md | 59 ++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 docs/de/guide/what-is-vitepress.md diff --git a/docs/de/guide/what-is-vitepress.md b/docs/de/guide/what-is-vitepress.md new file mode 100644 index 000000000..662611786 --- /dev/null +++ b/docs/de/guide/what-is-vitepress.md @@ -0,0 +1,59 @@ +--- +description: a static site generator designed for building fast, content-centric websites powered by Vite and Vue. +--- + +# Was ist VitePress? + +VitePress is a [Static Site Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in [Markdown](https://en.wikipedia.org/wiki/Markdown), applies a theme to it, and generates static HTML pages that can be easily deployed anywhere. + +::: tip {no-title} +Just want to try it out? Skip to the [Quickstart](./getting-started). +::: + +## Anwendungsfälle + +- **Documentation** + + VitePress ships with a default theme designed for technical documentation. It powers this page you are reading right now, along with the documentation for [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/) and [many more](https://github.com/search?q=/%22vitepress%22:+/+path:/(?:package%7Cdeno)%5C.jsonc?$/+NOT+is:fork+NOT+is:archived&type=code). + + The [official Vue.js documentation](https://vuejs.org/) is also based on VitePress, but uses a custom theme shared between multiple translations. + +- **Blogs, Portfolios, and Marketing Sites** + + VitePress supports [fully customized themes](./custom-theme), with the developer experience of a standard Vite + Vue application. Being built on Vite also means you can directly leverage Vite plugins from its rich ecosystem. In addition, VitePress provides flexible APIs to [load data](./data-loading) (local or remote) and [dynamically generate routes](./routing#dynamic-routes). You can use it to build almost anything as long as the data can be determined at build time. + + The official [Vue.js blog](https://blog.vuejs.org/) is a simple blog that generates its index page based on local content. + +## Entwicklererfahrung + +VitePress aims to provide a great Developer Experience (DX) when working with Markdown content. + +- **[Vite-Powered:](https://vite.dev/)** instant server start, with edits always instantly reflected (<100ms) without page reload. + +- **[Built-in Markdown Extensions:](./markdown)** Frontmatter, tables, syntax highlighting... you name it. Specifically, VitePress provides many advanced features for working with code blocks, making it ideal for highly technical documentation. + +- **[Vue-Enhanced Markdown:](./using-vue)** each Markdown page is also a Vue [Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html), thanks to Vue template's 100% syntax compatibility with HTML. You can embed interactivity in your static content using Vue templating features or imported Vue components. + +## Performance + +Unlike many traditional SSGs where each navigation results in a full page reload, a website generated by VitePress serves static HTML on the initial visit, but becomes a [Single Page Application](https://en.wikipedia.org/wiki/Single-page_application) (SPA) for subsequent navigation within the site. This model, in our opinion, provides an optimal balance for performance: + +- **Fast Initial Load** + + The initial visit to any page will be served the static, pre-rendered HTML for fast loading speed and optimal SEO. The page then loads a JavaScript bundle that turns the page into a Vue SPA ("hydration"). Contrary to common assumptions of SPA hydration being slow, this process is actually extremely fast thanks to Vue 3's raw performance and compiler optimizations. On [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F), typical VitePress sites achieve near-perfect performance scores even on low-end mobile devices with a slow network. + +- **Fast Post-load Navigation** + + More importantly, the SPA model leads to better user experience **after** the initial load. Subsequent navigation within the site will no longer cause a full page reload. Instead, the incoming page's content will be fetched and dynamically updated. VitePress also automatically pre-fetches page chunks for links that are within viewport. In most cases, post-load navigation will feel instant. + +- **Interactivity Without Penalty** + + To be able to hydrate the dynamic Vue parts embedded inside static Markdown, each Markdown page is processed as a Vue component and compiled into JavaScript. This may sound inefficient, but the Vue compiler is smart enough to separate the static and dynamic parts, minimizing both the hydration cost and payload size. For the initial page load, the static parts are automatically eliminated from the JavaScript payload and skipped during hydration. + +## What About VuePress? + +VitePress is the spiritual successor of VuePress 1. The original VuePress 1 was based on Vue 2 and webpack. With Vue 3 and Vite under the hood, VitePress provides significantly better DX, better production performance, a more polished default theme, and a more flexible customization API. + +The API difference between VitePress and VuePress 1 mostly lies in theming and customization. If you are using VuePress 1 with the default theme, it should be relatively straightforward to migrate to VitePress. + +Maintaining two SSGs in parallel isn't sustainable, so the Vue team has decided to focus on VitePress as the main recommended SSG in the long run. Now VuePress 1 has been deprecated, and VuePress 2 has been handed over to the VuePress community team for further development and maintenance. From 1573d5ce1fd28706db19ad31b5eefb98c4f908fb Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:43:32 +0200 Subject: [PATCH 027/199] docs(de): add missing localized documentation --- docs/de/reference/cli.md | 79 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 docs/de/reference/cli.md diff --git a/docs/de/reference/cli.md b/docs/de/reference/cli.md new file mode 100644 index 000000000..2c221d3fe --- /dev/null +++ b/docs/de/reference/cli.md @@ -0,0 +1,79 @@ +--- +description: of VitePress CLI commands including dev, build, preview, and init. +--- + +# Kommandozeilenschnittstelle + +## `vitepress dev` + +Start VitePress dev server using designated directory as root. Defaults to current directory. The `dev` command can also be omitted when running in current directory. + +### Verwendung + +```sh +# start in current directory, omitting `dev` +vitepress + +# start in sub directory +vitepress dev [root] +``` + +### Optionen + +| Option | Description | +| --------------- | ----------------------------------------------------------------- | +| `--open [path]` | Open browser on startup (`boolean \| string`) | +| `--port ` | Specify port (`number`) | +| `--base ` | Public base path (default: `/`) (`string`) | +| `--cors` | Enable CORS | +| `--strictPort` | Exit if specified port is already in use (`boolean`) | +| `--force` | Force the optimizer to ignore the cache and re-bundle (`boolean`) | + +## `vitepress build` + +Build the VitePress site for production. + +### Verwendung + +```sh +vitepress build [root] +``` + +### Optionen + +| Option | Description | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------- | +| `--mpa` (experimental) | Build in [MPA mode](../guide/mpa-mode) without client-side hydration (`boolean`) | +| `--base ` | Public base path (default: `/`) (`string`) | +| `--assetsBase ` | URL prefix the generated assets are served from, e.g. a CDN (`string`) | +| `--target ` | Transpile target (default: `"modules"`) (`string`) | +| `--outDir
` | Output directory relative to **cwd** (default: `/.vitepress/dist`) (`string`) | +| `--assetsInlineLimit ` | Static asset base64 inline threshold in bytes (default: `4096`) (`number`) | + +## `vitepress preview` + +Locally preview the production build. + +### Verwendung + +```sh +vitepress preview [root] +``` + +### Optionen + +| Option | Description | +| --------------- | ------------------------------------------ | +| `--base ` | Public base path (default: `/`) (`string`) | +| `--assetsBase ` | URL prefix the generated assets are served from, e.g. a CDN (`string`) | +| `--port ` | Specify port (`number`) | + +## `vitepress init` + +Start the [Setup Wizard](../guide/getting-started#setup-wizard) in current directory. + +### Verwendung + +```sh +vitepress init +``` From 2df49bd107c1b16e8c73ddbee6274a7dc4b054cb Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:00 +0200 Subject: [PATCH 028/199] docs(de): add German reference page --- docs/de/reference/default-theme-badge.md | 85 ++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 docs/de/reference/default-theme-badge.md diff --git a/docs/de/reference/default-theme-badge.md b/docs/de/reference/default-theme-badge.md new file mode 100644 index 000000000..d1468a43f --- /dev/null +++ b/docs/de/reference/default-theme-badge.md @@ -0,0 +1,85 @@ +--- +description: Use the Badge component to add status labels to headers in VitePress documentation. +--- + +# Badge + +The badge lets you add status to your headers. For example, it could be useful to specify the section's type, or supported version. + +## Verwendung + +You may use the `Badge` component which is globally available. + +```html +### Title +### Title +### Title +### Title +``` + +Code above renders like: + +### Title +### Title +### Title +### Title + +## Custom Children + +`` accept `children`, which will be displayed in the badge. + +```html +### Title custom element +``` + +### Title custom element + +## Anpassen Type Color + +You can customize the style of badges by overriding css variables. The following are the default values: + +```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); +} +``` + +## `` + +`` component accepts following props: + +```ts +interface Props { + // When `` is passed, this value gets ignored. + text?: string + + // Defaults to `tip`. Matches markdown containers/alerts colors. + type?: 'info' | 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'danger' +} +``` From 6f7b08a8f1eb50c80b5b4230ac4afdfa8fd36aee Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:03 +0200 Subject: [PATCH 029/199] docs(de): add German reference page --- docs/de/reference/default-theme-carbon-ads.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 docs/de/reference/default-theme-carbon-ads.md diff --git a/docs/de/reference/default-theme-carbon-ads.md b/docs/de/reference/default-theme-carbon-ads.md new file mode 100644 index 000000000..e12f6b12e --- /dev/null +++ b/docs/de/reference/default-theme-carbon-ads.md @@ -0,0 +1,29 @@ +--- +description: Integrate Carbon Ads into your VitePress site using the default theme's built-in support. +--- + +# Carbon Ads + +VitePress has built in native support for [Carbon Ads](https://www.carbonads.net/). By defining the Carbon Ads credentials in config, VitePress will display ads on the page. + +```js +export default { + themeConfig: { + carbonAds: { + code: 'your-carbon-code', + placement: 'your-carbon-placement', + format: 'classic' + } + } +} +``` + +These values are used to call carbon CDN script as shown below. + +The `format` option supports `classic`, `responsive`, and `cover`. + +```js +`//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}&format=${format}` +``` + +To learn more about Carbon Ads configuration, please visit [Carbon Ads website](https://www.carbonads.net/). From 327990adcd496fa18aae7da054cd7af53d220bab Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:06 +0200 Subject: [PATCH 030/199] docs(de): add German reference page --- docs/de/reference/default-theme-config.md | 552 ++++++++++++++++++++++ 1 file changed, 552 insertions(+) create mode 100644 docs/de/reference/default-theme-config.md diff --git a/docs/de/reference/default-theme-config.md b/docs/de/reference/default-theme-config.md new file mode 100644 index 000000000..28e09d79b --- /dev/null +++ b/docs/de/reference/default-theme-config.md @@ -0,0 +1,552 @@ +--- +description: Reference of all configuration options available for the VitePress default theme. +--- + +# Konfiguration des Standard-Themes + +Theme config lets you customize your theme. You can define theme config via the `themeConfig` option in the config file: + +```ts +export default { + lang: 'en-US', + title: 'VitePress', + description: 'Vite & Vue powered static site generator.', + + // Theme related configurations. + themeConfig: { + logo: '/logo.svg', + nav: [...], + sidebar: { ... } + } +} +``` + +**The options documented on this page only apply to the default theme.** Different themes expect different theme config. When using a custom theme, the theme config object will be passed to the theme so the theme can define conditional behavior based on it. + +## i18nRouting + +- Type: `boolean | ((data: VitePressData, route: Route, targetLocale: string) => string)` + +Changing locale to say `zh` will change the URL from `/foo` (or `/en/foo/`) to `/zh/foo`. You can disable this behavior by setting `themeConfig.i18nRouting` to `false`. + +Set `themeConfig.i18nRouting` to a function to customize the locale link. The function receives the current VitePress data, the current route, and the target locale key, and returns the target link. + +```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 file to display in nav bar, right before the site title. Accepts a path string, or an object to set a different logo for light/dark mode. + +```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` + +You can customize this item to replace the default site title (`title` in app config) in nav. When set to `false`, title in nav will be disabled. Useful when you have `logo` that already contains the site title text. + +```ts +export default { + themeConfig: { + siteTitle: 'Hello World' + } +} +``` + +## nav + +- Type: `NavItem` + +The configuration for the nav menu item. More details in [Default Theme: Nav](./default-theme-nav#navigation-links). + +```ts +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' } + ] + } + ] + } +} +``` + +```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` + +The configuration for the sidebar menu item. More details in [Default Theme: Sidebar](./default-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 = { + /** + * The text label of the item. + */ + text?: string + + /** + * The link of the item. + */ + 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.\ +Setting this value to `left` renders the aside to the left.\ +In right-to-left layouts, both sides are mirrored. + +If you want to disable it for all viewports, you should use `outline: false` instead. + +## outline + +- Type: `Outline | Outline['level'] | false` +- Level can be overridden per page via [frontmatter](./frontmatter-config#outline) + +Setting this value to `false` prevents rendering of outline container. Refer this interface for more details: + +```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 `

` to `

` 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[]` + +You may define this option to show your social account links with icons in nav. + +```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: 'Dribbble' + }, + 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) + +Fußzeile configuration. You can add a message or copyright text on the footer, however, it will only be displayed when the page doesn't contain a sidebar. This is due to design concerns. + +```ts +export default { + themeConfig: { + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2019-present Evan You' + } + } +} +``` + +```ts +export interface Fußzeile { + 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 [Default Theme: Bearbeitungslink](./default-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` + +Allows customization for the last updated text and date format. + +```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 [Default Theme: Search](./default-theme-search) + +```ts +export interface AlgoliaSearchOptions extends DocSearchProps { + locales?: Record> +} +``` + +View full options [here](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' +} +``` + +Learn more in [Default Theme: Carbon Ads](./default-theme-carbon-ads) + +## docFooter + +- Type: `DocFooter` + +Can be used to customize text appearing above previous and next links. Helpful if not writing docs in English. Also can be used to disable prev/next links globally. If you want to selectively enable/disable prev/next links, you can use [frontmatter](./default-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` + +Can be used to customize the dark mode switch label. This label is only displayed in the mobile view. + +## lightModeSwitchTitle + +- Type: `string` +- Default: `Switch to light theme` + +Can be used to customize the light mode switch title that appears on hovering. + +## darkModeSwitchTitle + +- Type: `string` +- Default: `Switch to dark theme` + +Can be used to customize the dark mode switch title that appears on hovering. + +## sidebarMenuLabel + +- Type: `string` +- Default: `Menu` + +Can be used to customize the sidebar menu label. This label is only displayed in the mobile view. + +## returnToTopLabel + +- Type: `string` +- Default: `Return to top` + +Can be used to customize the label of the return to top button. This label is only displayed in the mobile view. + +## langMenuLabel + +- Type: `string` +- Default: `Change language` + +Can be used to customize the aria-label of the language toggle button in navbar. This is only used if you're using [i18n](../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. This 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 default, colors match GitHub's alerts, where caution shares danger's red and warning is yellow. + +## `useLayout` + +Returns layout-related data. The returned object has the following type: + +```ts +interface { + isHome: ComputedRef + + sidebar: Readonly> + sidebarGroups: ComputedRef + hasSidebar: ComputedRef + isSidebarEnabled: ComputedRef + + hasAside: ComputedRef + leftAside: ComputedRef + + headers: Readonly> + hasLocalNav: ComputedRef +} +``` + +**Beispiel:** + +```vue + + + +``` From f21673dc96d18861ebb80c8979bff091462bc58e Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:09 +0200 Subject: [PATCH 031/199] docs(de): add German reference page --- docs/de/reference/default-theme-edit-link.md | 64 ++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 docs/de/reference/default-theme-edit-link.md diff --git a/docs/de/reference/default-theme-edit-link.md b/docs/de/reference/default-theme-edit-link.md new file mode 100644 index 000000000..0c12bfc18 --- /dev/null +++ b/docs/de/reference/default-theme-edit-link.md @@ -0,0 +1,64 @@ +--- +description: Display an edit link on doc pages to let users suggest changes on GitHub or GitLab. +--- + +# Bearbeitungslink + +## Site-Level Config + +Bearbeitungslink lets you display a link to edit the page on Git management services such as GitHub, or GitLab. To enable it, add `themeConfig.editLink` options to your config. + +```js +export default { + themeConfig: { + editLink: { + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path' + } + } +} +``` + +The `pattern` option defines the URL structure for the link, and `:path` is going to be replaced with the page path. + +You can also put a pure function that accepts [`PageData`](./runtime-api#usedata) as the argument and returns the URL string. + +```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}` + } + } + } + } +} +``` + +It should not have side-effects nor access anything outside of its scope since it will be serialized and executed in the browser. + +By default, this will add the link text "Edit this page" at the bottom of the doc page. You may customize this text by defining the `text` option. + +```js +export default { + themeConfig: { + editLink: { + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', + text: 'Edit this page on GitHub' + } + } +} +``` + +## Frontmatter Config + +This can be disabled per-page using the `editLink` option on frontmatter: + +```yaml +--- +editLink: false +--- +``` From dd161c4b84513d901216ba51c09f546b32537459 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:12 +0200 Subject: [PATCH 032/199] docs(de): add German reference page --- docs/de/reference/default-theme-footer.md | 57 +++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 docs/de/reference/default-theme-footer.md diff --git a/docs/de/reference/default-theme-footer.md b/docs/de/reference/default-theme-footer.md new file mode 100644 index 000000000..7070e220e --- /dev/null +++ b/docs/de/reference/default-theme-footer.md @@ -0,0 +1,57 @@ +--- +description: Configure the global footer displayed at the bottom of VitePress pages. +--- + +# Fußzeile + +VitePress will display global footer at the bottom of the page when `themeConfig.footer` is present. + +```ts +export default { + themeConfig: { + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2019-present Evan You' + } + } +} +``` + +```ts +export interface Fußzeile { + // The message shown right before copyright. + message?: string + + // The actual copyright text. + copyright?: string +} +``` + +The above configuration also supports HTML strings. So, for example, if you want to configure footer text to have some links, you can adjust the configuration as follows: + +```ts +export default { + themeConfig: { + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2019-present Evan You' + } + } +} +``` + +::: warning +Only inline elements can be used in `message` and `copyright` as they are rendered inside a `

` element. If you want to add block elements, consider using [`layout-bottom`](../guide/extending-default-theme#layout-slots) slot instead. +::: + +Note that footer will not be displayed when the [SideBar](./default-theme-sidebar) is visible. + +## Frontmatter Config + +This can be disabled per-page using the `footer` option on frontmatter: + +```yaml +--- +footer: false +--- +``` From e7c82563283d3a7ac98b6fc6b66d7ccd3951ad99 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:14 +0200 Subject: [PATCH 033/199] docs(de): add German reference page --- docs/de/reference/default-theme-home-page.md | 199 +++++++++++++++++++ 1 file changed, 199 insertions(+) create mode 100644 docs/de/reference/default-theme-home-page.md diff --git a/docs/de/reference/default-theme-home-page.md b/docs/de/reference/default-theme-home-page.md new file mode 100644 index 000000000..a1a27b964 --- /dev/null +++ b/docs/de/reference/default-theme-home-page.md @@ -0,0 +1,199 @@ +--- +description: Configure the VitePress default theme home page layout with hero sections, features, and custom content. +--- + +# Startseite + +VitePress default theme provides a homepage layout, which you can also see used on [the homepage of this site](../). You may use it on any of your pages by specifying `layout: home` in the [frontmatter](./frontmatter-config). + +```yaml +--- +layout: home +--- +``` + +However, this option alone wouldn't do much. You can add several different pre templated "sections" to the homepage by setting additional other options such as `hero` and `features`. + +## Hero Section + +The Hero section comes at the top of the homepage. Here's how you can configure the Hero section. + +```yaml +--- +layout: home + +hero: + name: VitePress + text: Vite & Vue powered static site generator. + tagline: Lorem ipsum... + image: + src: /logo.png + alt: VitePress + actions: + - theme: brand + text: Get Started + link: /guide/what-is-vitepress + - theme: alt + text: View on GitHub + link: https://github.com/vuejs/vitepress +--- +``` + +```ts +interface Hero { + // The string shown top of `text`. Comes with brand color + // and expected to be short, such as product name. + name?: string + + // The main text for the hero section. This will be defined + // as `h1` tag. + text: string + + // Tagline displayed below `text`. + tagline?: string + + // The image is displayed next to the text and tagline area. + image?: ThemeableImage + + // Action buttons to display in home hero section. + actions?: HeroAction[] +} + +type ThemeableImage = + | string + | { src: string; alt?: string } + | { light: string; dark: string; alt?: string } + +interface HeroAction { + // Color theme of the button. Defaults to `brand`. + theme?: 'brand' | 'alt' + + // Label of the button. + text: string + + // Destination link of the button. + link: string + + // Link target attribute. + target?: string + + // Link rel attribute. + rel?: string +} +``` + +### Customizing the name color + +VitePress uses the brand color (`--vp-c-brand-1`) for the `name`. However, you may customize this color by overriding `--vp-home-hero-name-color` variable. + +```css +:root { + --vp-home-hero-name-color: blue; +} +``` + +Also you may customize it further by combining `--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); +} +``` + +## Features Section + +In Features section, you can list any number of features you would like to show right after the Hero section. To configure it, pass `features` option to the frontmatter. + +You can provide an icon for each feature, 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 when required. + +```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 Content + +You can add additional content to your site's homepage just by adding Markdown below the `---` frontmatter divider. + +````md +--- +layout: home + +hero: + name: VitePress + text: Vite & Vue powered static site generator. +--- + +## Getting Started + +You can get started using VitePress right away using `npx`! + +```sh +npm init +npx vitepress init +``` +```` + +::: info +VitePress didn't always auto-style the extra content of the `layout: home` page. To revert to older behavior, you can add `markdownStyles: false` to the frontmatter. +::: From 7a5534aa84d1dd4597beea3a924fdb87f3a84ae4 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:17 +0200 Subject: [PATCH 034/199] docs(de): add German reference page --- .../reference/default-theme-last-updated.md | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 docs/de/reference/default-theme-last-updated.md diff --git a/docs/de/reference/default-theme-last-updated.md b/docs/de/reference/default-theme-last-updated.md new file mode 100644 index 000000000..e2d2d6356 --- /dev/null +++ b/docs/de/reference/default-theme-last-updated.md @@ -0,0 +1,50 @@ +--- +description: Show the last updated timestamp on VitePress pages based on Git commit history. +--- + +# Letzte Aktualisierung + +The update time of the last content will be displayed in the lower right corner of the page. To enable it, add `lastUpdated` options to your config. + +::: info +VitePress displays the "last updated" time using the timestamp of the most recent Git commit for each file. To enable this, the Markdown file must be committed to Git. + +Internally, VitePress runs `git log -1 --pretty="%ai"` on each file to retrieve its timestamp. If all pages show the same update time, it's likely due to shallow cloning (common in CI environments), which limits Git history. + +To fix this in **GitHub Actions**, use the following in your workflow: + +```yaml{4} +- name: Checkout + uses: actions/checkout@v5 + with: + fetch-depth: 0 +``` + +Other CI/CD platforms have similar settings. + +If such options aren't available, you can prepend the `docs:build` command in your `package.json` with a manual fetch: + +```json +"docs:build": "git fetch --unshallow && vitepress build docs" +``` +::: + +## Site-Level Config + +```js +export default { + lastUpdated: true +} +``` + +## Frontmatter Config + +This can be disabled per-page using the `lastUpdated` option on frontmatter: + +```yaml +--- +lastUpdated: false +--- +``` + +Also refer [Default Theme: Letzte Aktualisierung](./default-theme-config#lastupdated) for more details. Any truthy value at theme-level will also enable the feature unless explicitly disabled at site or page level. From beedbc4c6975f33ac9c2fb306b51b240d675307c Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:19 +0200 Subject: [PATCH 035/199] docs(de): add German reference page --- docs/de/reference/default-theme-layout.md | 66 +++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 docs/de/reference/default-theme-layout.md diff --git a/docs/de/reference/default-theme-layout.md b/docs/de/reference/default-theme-layout.md new file mode 100644 index 000000000..d15e4330c --- /dev/null +++ b/docs/de/reference/default-theme-layout.md @@ -0,0 +1,66 @@ +--- +description: Choose between doc, page, and home layouts in the VitePress default theme. +--- + +# Layout + +You may choose the page layout by setting `layout` option to the page [frontmatter](./frontmatter-config). There are 3 layout options, `doc`, `page`, and `home`. If nothing is specified, then the page is treated as `doc` page. + +```yaml +--- +layout: doc +--- +``` + +## Doc Layout + +Option `doc` is the default layout and it styles the whole Markdown content into "documentation" look. It works by wrapping whole content within `vp-doc` css class, and applying styles to elements underneath it. + +Almost all generic elements such as `p`, or `h2` get special styling. Therefore, keep in mind that if you add any custom HTML inside a Markdown content, those will get affected by those styles as well. + +It also provides documentation specific features listed below. These features are only enabled in this layout. + +- Bearbeitungslink +- Prev Next Link +- Outline +- [Carbon Ads](./default-theme-carbon-ads) + +## Page Layout + +Option `page` is treated as "blank page". The Markdown will still be parsed, and all of the [Markdown Extensions](../guide/markdown) work as same as `doc` layout, but it wouldn't get any default stylings. + +The page layout will let you style everything by you without VitePress theme affecting the markup. This is useful when you want to create your own custom page. + +Note that even in this layout, sidebar will still show up if the page has a matching sidebar config. + +## Home Layout + +Option `home` will generate templated "Homepage". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Default Theme: Startseite](./default-theme-home-page) for more details. + +## No Layout + +If you don't want any layout, you can pass `layout: false` through frontmatter. This option is helpful if you want a fully-customizable landing page (without any sidebar, navbar, or footer by default). + +## Custom Layout + +You can also use a custom layout: + +```md +--- +layout: foo +--- +``` + +This will look for a component named `foo` registered in context. For example, you can register your component globally in `.vitepress/theme/index.ts`: + +```ts +import DefaultTheme from 'vitepress/theme' +import Foo from './Foo.vue' + +export default { + extends: DefaultTheme, + enhanceApp({ app }) { + app.component('foo', Foo) + } +} +``` From b1b3939fcdeb6fc0d8e0faf0f9aaac253d56677c Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:26 +0200 Subject: [PATCH 036/199] docs(de): add German reference pages --- docs/de/reference/default-theme-nav.md | 221 +++++++++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 docs/de/reference/default-theme-nav.md diff --git a/docs/de/reference/default-theme-nav.md b/docs/de/reference/default-theme-nav.md new file mode 100644 index 000000000..02caac415 --- /dev/null +++ b/docs/de/reference/default-theme-nav.md @@ -0,0 +1,221 @@ +--- +description: Configure the navigation bar in the VitePress default theme including site title, logo, and menu links. +--- + +# Nav + +The Nav is the navigation bar displayed on top of the page. It contains the site title, global menu links, etc. + +## Site Title and Logo + +By default, nav shows the title of the site referencing [`config.title`](./site-config#title) value. If you would like to change what's displayed on nav, you may define custom text in `themeConfig.siteTitle` option. + +```js +export default { + themeConfig: { + siteTitle: 'My Custom Title' + } +} +``` + +If you have a logo for your site, you can display it by passing in the path to the image. You should place the logo within `public` directly, and define the absolute path to it. + +```js +export default { + themeConfig: { + logo: '/my-logo.svg' + } +} +``` + +When adding a logo, it gets displayed along with the site title. If your logo is all you need and if you would like to hide the site title text, set `false` to the `siteTitle` option. + +```js +export default { + themeConfig: { + logo: '/my-logo.svg', + siteTitle: false + } +} +``` + +You can also pass an object as logo if you want to add `alt` attribute or customize it based on dark/light mode. Refer [`themeConfig.logo`](./default-theme-config#logo) for details. + +## Navigation Links + +You may define `themeConfig.nav` option to add links to your nav. + +```js +export default { + themeConfig: { + nav: [ + { text: 'Guide', link: '/guide' }, + { text: 'Config', link: '/config' }, + { text: 'Changelog', link: 'https://github.com/...' } + ] + } +} +``` + +The `text` is the actual text displayed in nav, and the `link` is the link that will be navigated to when the text is clicked. For the link, set path to the actual file without `.md` prefix, and always start with `/`. + +The `link` can also be a function that accepts [`PageData`](./runtime-api#usedata) as the argument and returns the path. + +Nav links can also be dropdown menus. To do this, set `items` key on 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' } + ] + } + ] + } +} +``` + +Note that dropdown menu title (`Dropdown Menu` in the above example) can not have `link` property since it becomes a button to open dropdown dialog. + +You may further add "sections" to the dropdown menu items as well by passing in more nested items. + +```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: '...' } + ] + } + ] + } + ] + } +} +``` + +### Customize link's "active" state + +Nav menu items will be highlighted when the current page is under the matching path. if you would like to customize the path to be matched, define `activeMatch` property and regex as a string value. + +```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. +::: + +### Customize link's "target" and "rel" attributes + +By default, VitePress automatically determines `target` and `rel` attributes based on whether the link is an external link. 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). + +## Custom Components + +You can include custom components in the navigation bar 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' + } + ] + } +} +``` + +Then, you need to register the component globally: + +```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) + } +} +``` + +Your component will be rendered in the navigation bar. VitePress will provide the following additional props to the component: + +- `screenMenu`: an optional boolean indicating whether the component is inside mobile navigation menu +- `menu`: an optional boolean indicating whether the component is inside a dropdown panel — 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 + +You can check an example in the e2e tests [here](https://github.com/vuejs/vitepress/tree/main/__tests__/e2e/.vitepress). From a42dace7b16661e8ac840886f6594743455d6db0 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:29 +0200 Subject: [PATCH 037/199] docs(de): add German reference pages --- .../default-theme-prev-next-links.md | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 docs/de/reference/default-theme-prev-next-links.md diff --git a/docs/de/reference/default-theme-prev-next-links.md b/docs/de/reference/default-theme-prev-next-links.md new file mode 100644 index 000000000..e57360b46 --- /dev/null +++ b/docs/de/reference/default-theme-prev-next-links.md @@ -0,0 +1,47 @@ +--- +description: Customize the previous and next page links displayed at the bottom of doc pages in VitePress. +--- + +# Prev Next Links + +You can customize the text and link for the previous and next pages (shown at doc footer). This is helpful if you want a different text there than what you have on your sidebar. Additionally, you may find it useful to disable the footer or link to a page that is not included in your sidebar. + +## prev + +- Type: `string | false | { text?: string; link?: string }` + +- Details: + + Specifies the text/link to show on the link to the previous page. If you don't set this in frontmatter, the text/link will be inferred from the sidebar config. + +- Beispiele: + + - To customize only the text: + + ```yaml + --- + prev: 'Get Started | Markdown' + --- + ``` + + - To customize both text and link: + + ```yaml + --- + prev: + text: 'Markdown' + link: '/guide/markdown' + --- + ``` + + - To hide previous page: + + ```yaml + --- + prev: false + --- + ``` + +## next + +Same as `prev` but for the next page. From 4e1be8907ab40d69091d13413710fe1e4e3cc8e9 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:31 +0200 Subject: [PATCH 038/199] docs(de): add German reference pages --- docs/de/reference/default-theme-search.md | 371 ++++++++++++++++++++++ 1 file changed, 371 insertions(+) create mode 100644 docs/de/reference/default-theme-search.md diff --git a/docs/de/reference/default-theme-search.md b/docs/de/reference/default-theme-search.md new file mode 100644 index 000000000..0c81da715 --- /dev/null +++ b/docs/de/reference/default-theme-search.md @@ -0,0 +1,371 @@ +--- +outline: deep +description: Set up local or Algolia-powered search for your VitePress site. +--- + +# Suche + +## Local Suche + +VitePress supports fuzzy full-text search using an in-browser index thanks to [minisearch](https://github.com/lucaong/minisearch/). To enable this feature, simply set the `themeConfig.search.provider` option to `'local'` in your `.vitepress/config.ts` file: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'local' + } + } +}) +``` + +Beispiel result: + +![screenshot of the search modal](/search.png) + +Alternatively, you can use [Algolia DocSearch](#algolia-search) or some community plugins like: + +- +- +- + + + +### i18n {#local-search-i18n} + +You can use a config like this to use multilingual search: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'local', + options: { + locales: { + zh: { // make this `root` if you want to translate the default locale + translations: { + button: { + buttonText: '搜索', + buttonAriaLabel: '搜索' + }, + modal: { + displayDetails: '显示详细列表', + resetButtonTitle: '重置搜索', + backButtonTitle: '关闭搜索', + noResultsText: '没有结果', + footer: { + selectText: '选择', + selectKeyAriaLabel: '输入', + navigateText: '导航', + navigateUpKeyAriaLabel: '上箭头', + navigateDownKeyAriaLabel: '下箭头', + closeText: '关闭', + closeKeyAriaLabel: 'esc' + } + } + } + } + } + } + } + } +}) +``` + +### miniSearch options + +You can configure MiniSearch like this: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'local', + options: { + miniSearch: { + /** + * @type {Pick} + */ + options: { + /* ... */ + }, + /** + * @type {import('minisearch').SearchOptions} + * @default + * { fuzzy: 0.2, prefix: true, boost: { title: 4, text: 2, titles: 1 } } + */ + searchOptions: { + /* ... */ + } + } + } + } + } +}) +``` + +Learn more in [MiniSearch docs](https://lucaong.github.io/minisearch/classes/MiniSearch.MiniSearch.html). + +::: info Document IDs +Suche document IDs (as seen by `searchOptions.filter`, `boostDocument`, and in the raw index) are site-relative paths like `/guide/page.html#section` — they do not include [`base`](../reference/site-config#base). The theme resolves them against the base when rendering results. +::: + +### Custom content renderer + +You can customize the function used to render the markdown content before indexing it: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'local', + options: { + /** + * @param {string} src + * @param {import('vitepress').MarkdownEnv} env + * @param {import('markdown-it-async')} md + */ + async _render(src, env, md) { + // return html string + } + } + } + } +}) +``` + +This function will be stripped from client-side site data, so you can use Node.js APIs in it. + +#### Beispiel: Excluding pages from search + +You can exclude pages from search by adding `search: false` to the frontmatter of the page. Alternatively: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'local', + options: { + async _render(src, env, md) { + const html = await md.renderAsync(src, env) + if (env.frontmatter?.search === false) return '' + if (env.relativePath.startsWith('some/path')) return '' + return html + } + } + } + } +}) +``` + +::: warning Note +In case a custom `_render` function is provided, you need to handle the `search: false` frontmatter yourself. Also, the `env` object won't be completely populated before `md.renderAsync` is called, so any checks on optional `env` properties like `frontmatter` should be done after that. +::: + +#### Beispiel: Transforming content - adding anchors + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'local', + options: { + async _render(src, env, md) { + const html = await md.renderAsync(src, env) + if (env.frontmatter?.title) + return (await md.renderAsync(`# ${env.frontmatter.title}`)) + html + return html + } + } + } + } +}) +``` + +## Algolia Suche + +VitePress supports searching your docs site using [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Refer to their getting started guide. In your `.vitepress/config.ts` you'll need to provide at least the following to make it work: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'algolia', + options: { + appId: '...', + apiKey: '...', + indexName: '...' + } + } + } +}) +``` + +### i18n {#algolia-search-i18n} + +You can use a config like this to use multilingual search: + +

+View full example + +<<< @/snippets/algolia-i18n.ts + +
+ +Refer [official Algolia docs](https://docsearch.algolia.com/docs/api#translations) to learn more about them. To quickly get started, you can also copy the translations used by this site from [our GitHub repo](https://github.com/search?q=repo:vuejs/vitepress+%22function+searchOptions%22&type=code). + +### Algolia Ask AI Support {#ask-ai} + +If you would like to include **Ask AI**, pass the `askAi` option (or any of the partial fields) inside `options`: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'algolia', + options: { + appId: '...', + apiKey: '...', + indexName: '...', + // askAi: "YOUR-ASSISTANT-ID" + // OR + askAi: { + // at minimum you must provide the assistantId you received from Algolia + assistantId: 'XXXYYY', + // optional overrides – if omitted, the top-level appId/apiKey/indexName values are reused + // apiKey: '...', + // appId: '...', + // indexName: '...' + } + } + } + } +}) +``` + +::: warning Note +If you want to default to keyword search and do not want to use Ask AI, omit the `askAi` property. +::: + +### Ask AI Side Panel {#ask-ai-side-panel} + +DocSearch v4.5+ supports an optional **Ask AI side panel**. When enabled, it can be opened with **Ctrl/Cmd+I** by default. The [Sidepanel API Reference](https://docsearch.algolia.com/docs/sidepanel/api-reference) contains the full list of options. + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'algolia', + options: { + appId: '...', + apiKey: '...', + indexName: '...', + askAi: { + assistantId: 'XXXYYY', + sidePanel: { + panel: { + variant: 'floating', // or 'inline' + side: 'right', + width: '360px', + expandedWidth: '580px', + suggestedQuestions: true + } + } + } + } + } + } +}) +``` + +Use `askAi.sidePanel.panel.suggestedQuestions` for side panel suggested +questions. Algolia's standalone Ask AI examples also mention +`askAi.suggestedQuestions`, but that top-level option is not enough for +VitePress side panel mode and does not make the integrated keyword-search +modal display suggested questions on first open. + +If you need to disable the keyboard shortcut, use the `keyboardShortcuts` option at the sidepanel root level: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'algolia', + options: { + appId: '...', + apiKey: '...', + indexName: '...', + askAi: { + assistantId: 'XXXYYY', + sidePanel: { + keyboardShortcuts: { + 'Ctrl/Cmd+I': false + } + } + } + } + } + } +}) +``` + +#### Mode (auto / sidePanel / hybrid / modal) {#ask-ai-mode} + +You can optionally control how VitePress integrates keyword search and Ask AI: + +- `mode: 'auto'` (default): infer `hybrid` when keyword search is configured, otherwise `sidePanel` when Ask AI side panel is configured. +- `mode: 'sidePanel'`: force side panel only (hides the keyword search button). +- `mode: 'hybrid'`: enable keyword search modal + Ask AI side panel (requires keyword search configuration). +- `mode: 'modal'`: keep Ask AI inside the DocSearch modal (even if you configured the side panel). + +#### Ask AI only (no keyword search) {#ask-ai-only} + +If you want to use **Ask AI side panel only**, you can omit top-level keyword search config and provide credentials under `askAi`: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + search: { + provider: 'algolia', + options: { + mode: 'sidePanel', + askAi: { + assistantId: 'XXXYYY', + appId: '...', + apiKey: '...', + indexName: '...', + sidePanel: true + } + } + } + } +}) +``` + +### Crawler Config + +Here is an example config based on what this site uses: + +<<< @/snippets/algolia-crawler.js From e962979ba7f573d8da94abb28a45e6fb56107864 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:34 +0200 Subject: [PATCH 039/199] docs(de): add German reference pages --- docs/de/reference/default-theme-sidebar.md | 246 +++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 docs/de/reference/default-theme-sidebar.md diff --git a/docs/de/reference/default-theme-sidebar.md b/docs/de/reference/default-theme-sidebar.md new file mode 100644 index 000000000..52bccc783 --- /dev/null +++ b/docs/de/reference/default-theme-sidebar.md @@ -0,0 +1,246 @@ +--- +description: Configure the sidebar navigation in the VitePress default theme with groups, collapsible sections, and multiple sidebars. +--- + +# Seitenleiste + +The sidebar is the main navigation block for your documentation. You can configure the sidebar menu in [`themeConfig.sidebar`](./default-theme-config#sidebar). + +```js +export default { + themeConfig: { + sidebar: [ + { + text: 'Guide', + items: [ + { text: 'Introduction', link: '/introduction' }, + { text: 'Getting Started', link: '/getting-started' }, + ... + ] + } + ] + } +} +``` + +## The Basics + +The simplest form of the sidebar menu is passing in a single array of links. The first level item defines the "section" for the sidebar. It should contain `text`, which is the title of the section, and `items` which are the actual navigation links. + +```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' }, + ... + ] + } + ] + } +} +``` + +Each `link` should specify the path to the actual file starting with `/`. If you add trailing slash to the end of link, it will show `index.md` of the corresponding directory. + +```js +export default { + themeConfig: { + sidebar: [ + { + text: 'Guide', + items: [ + // This shows `/guide/index.md` page. + { text: 'Introduction', link: '/guide/' } + ] + } + ] + } +} +``` + +You may further nest the sidebar items up to 6 level deep counting up from the root level. Note that deeper than 6 level of nested items gets ignored and will not be displayed on the sidebar. + +```js +export default { + themeConfig: { + sidebar: [ + { + text: 'Level 1', + items: [ + { + text: 'Level 2', + items: [ + { + text: 'Level 3', + items: [ + ... + ] + } + ] + } + ] + } + ] + } +} +``` + +## Multiple Sidebars + +You may show different sidebar depending on the page path. For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and "Config" page. + +To do so, first organize your pages into directories for each desired section: + +``` +. +├─ 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. If you 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 automatically 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 + +You can 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 + +You can 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' } + ] + } + ] + } + ] + } +} +``` From fee1681a9fd2008f162fe5b40796cbfacf658008 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:36 +0200 Subject: [PATCH 040/199] docs(de): add German reference pages --- docs/de/reference/default-theme-team-page.md | 260 +++++++++++++++++++ 1 file changed, 260 insertions(+) create mode 100644 docs/de/reference/default-theme-team-page.md diff --git a/docs/de/reference/default-theme-team-page.md b/docs/de/reference/default-theme-team-page.md new file mode 100644 index 000000000..99bed39cd --- /dev/null +++ b/docs/de/reference/default-theme-team-page.md @@ -0,0 +1,260 @@ +--- +description: Create team pages with member profiles using VitePress built-in team components. +--- + + + +# Teamseite + +If you would like to introduce your team, you may use Team components to construct the Teamseite. There are two ways of using these components. One is to embed it in doc page, and another is to create a full Teamseite. + +## Show team members in a page + +You may use `` component exposed from `vitepress/theme` to display a list of team members on any page. + +```html + + +# Our Team + +Say hello to our awesome team. + + +``` + +The above will display a team member in card looking element. It should display something similar to below. + + + +`` component comes in 2 different sizes, `small` and `medium`. While it boils down to your preference, usually `small` size should fit better when used in doc page. Also, you may add more properties to each member such as adding "description" or "sponsor" button. Learn more about it in [``](#vpteammembers). + +Embedding team members in doc page is good for small size team where having dedicated full team page might be too much, or introducing partial members as a reference to documentation context. + +If you have large number of members, or simply would like to have more space to show team members, consider [creating a full team page](#create-a-full-team-page). + +## Create a full Teamseite + +Instead of adding team members to doc page, you may also create a full Teamseite, similar to how you can create a custom [Startseite](./default-theme-home-page). + +To create a team page, first, create a new md file. The file name doesn't matter, but here lets call it `team.md`. In this file, set frontmatter option `layout: page`, and then you may compose your page structure using `TeamPage` components. + +```html +--- +layout: page +--- + + + + + + + + + +``` + +When creating a full team page, remember to wrap all components with `` component. This component will ensure all nested team related components get the proper layout structure like spacings. + +`` component adds the page title section. The title being `

` heading. Use `#title` and `#lead` slot to document about your team. + +`` works as same as when used in a doc page. It will display list of members. + +### Add sections to divide team members + +You may add "sections" to the team page. For example, you may have different types of team members such as Core Team Members and Community Partners. You can divide these members into sections to better explain the roles of each group. + +To do so, add `` component to the `team.md` file we created previously. + +```html +--- +layout: page +--- + + + + + + + + + + + + + + +``` + +The `` component can have `#title` and `#lead` slot similar to `VPTeamPageTitle` component, and also `#members` slot for displaying team members. + +Remember to put in `` component within `#members` slot. + +## `` + +The `` component displays a given list of members. + +```html + +``` + +```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 +} +``` + +## `` + +The root component when creating a full team page. It only accepts a single slot. It will style all passed in team related components. + +## `` + +Adds "title" section of the page. Best use at the very beginning under ``. It accepts `#title` and `#lead` slot. + +```html + + + + + + +``` + +## `` + +Creates a "section" with in team page. It accepts `#title`, `#lead`, and `#members` slot. You may add as many sections as you like inside ``. + +```html + + ... + + + + + + +``` From e401d162248aa7d581e2acfc1b2dfa4f68bc54fb Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:39 +0200 Subject: [PATCH 041/199] docs(de): add German reference pages --- docs/de/reference/frontmatter-config.md | 253 ++++++++++++++++++++++++ 1 file changed, 253 insertions(+) create mode 100644 docs/de/reference/frontmatter-config.md diff --git a/docs/de/reference/frontmatter-config.md b/docs/de/reference/frontmatter-config.md new file mode 100644 index 000000000..1fb437338 --- /dev/null +++ b/docs/de/reference/frontmatter-config.md @@ -0,0 +1,253 @@ +--- +outline: deep +description: Reference of all available frontmatter configuration options for VitePress Markdown pages. +--- + +# Frontmatter-Konfiguration + +Frontmatter enables page based configuration. In every markdown file, you can use frontmatter config to override site-level or theme-level config options. Also, there are config options which you can only define in frontmatter. + +Beispiel usage: + +```md +--- +title: Docs with VitePress +editLink: true +--- +``` + +You can access frontmatter data via the `$frontmatter` global in Vue expressions: + +```md +{{ $frontmatter.title }} +``` + +## title + +- Type: `string` + +Title for the page. It's same as [config.title](./site-config#title), and it overrides the site-level config. + +```yaml +--- +title: VitePress +--- +``` + +## titleTemplate + +- Type: `string | boolean` + +The suffix for the title. It's same as [config.titleTemplate](./site-config#titletemplate), and it overrides the site-level config. + +```yaml +--- +title: VitePress +titleTemplate: Vite & Vue powered static site generator +--- +``` + +## description + +- Type: `string` + +Description for the page. It's same as [config.description](./site-config#description), and it overrides the site-level config. + +```yaml +--- +description: VitePress +--- +``` + +## head + +- Type: `HeadConfig[]` + +Specify extra head tags to be injected for the current page. They are [merged](./site-config#head) with the head tags injected by site-level config. + +```yaml +--- +head: + - - meta + - name: description + content: hello + - - meta + - name: keywords + content: super duper SEO +--- +``` + +```ts +type HeadConfig = + | [string, Record] + | [string, Record, string] +``` + +## dir + +- Type: `'ltr' | 'rtl' | 'auto'` + +Overrides the [text direction](./site-config#dir) of the site for the current page. + +```yaml +--- +dir: rtl +--- +``` + +## Standard-Theme Only + +The following frontmatter options are only applicable when using the default theme. + +### layout + +- Type: `doc | home | page` +- Default: `doc` + +Determines the layout of the page. + +- `doc` - It applies default documentation styles to the markdown content. +- `home` - Special layout for "Startseite". You may add extra options such as `hero` and `features` to rapidly create beautiful landing page. +- `page` - Behave similar to `doc` but it applies no styles to the content. Useful when you want to create a fully custom page. + +```yaml +--- +layout: doc +--- +``` + +### hero + +Defines contents of home hero section when `layout` is set to `home`. More details in [Standard-Theme: Startseite](./default-theme-home-page). + +### features + +Defines items to display in features section when `layout` is set to `home`. More details in [Standard-Theme: Startseite](./default-theme-home-page). + +### navbar + +- Type: `boolean` +- Default: `true` + +Whether to display [navbar](./default-theme-nav). + +```yaml +--- +navbar: false +--- +``` + +### sidebar + +- Type: `boolean` +- Default: `true` + +Whether to display [sidebar](./default-theme-sidebar). + +```yaml +--- +sidebar: false +--- +``` + +### aside + +- Type: `boolean | 'left'` +- Default: `true` + +Defines the location of the aside component in the `doc` layout. + +Setting this value to `false` prevents rendering of aside container.\ +Setting this value to `true` renders the aside to the right.\ +Setting this value to `'left'` renders the aside to the left. + +```yaml +--- +aside: false +--- +``` + +### outline + +- Type: `number | [number, number] | 'deep' | false` +- Default: `2` + +The levels of header in the outline to display for the page. It's same as [config.themeConfig.outline.level](./default-theme-config#outline), and it overrides the value set in site-level config. + +```yaml +--- +outline: [2, 4] +--- +``` + +### lastUpdated + +- Type: `boolean | Date` +- Default: `true` + +Whether to display [last updated](./default-theme-last-updated) text in the footer of the current page. If a datetime is specified, it will be displayed instead of the last git modified timestamp. + +```yaml +--- +lastUpdated: false +--- +``` + +### editLink + +- Type: `boolean` +- Default: `true` + +Whether to display [edit link](./default-theme-edit-link) in the footer of the current page. + +```yaml +--- +editLink: false +--- +``` + +### footer + +- Type: `boolean` +- Default: `true` + +Whether to display [footer](./default-theme-footer). + +```yaml +--- +footer: false +--- +``` + +### pageClass + +- Type: `string` + +Add extra class name to a specific page. + +```yaml +--- +pageClass: custom-page-class +--- +``` + +Then you can customize styles of this specific page in `.vitepress/theme/custom.css` file: + +```css +.custom-page-class { + /* page-specific styles */ +} +``` + +### isHome + +- Type: `boolean` + +The default theme relies on checks like `frontmatter.layout === 'home'` to determine if the current page is the home page.\ +This is useful when you want to force show the home page elements in a custom layout. + +```yaml +--- +isHome: true +--- +``` From 21751f4e52a3bb797a18a230aaa47c31eaef2f57 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:41 +0200 Subject: [PATCH 042/199] docs(de): add German reference pages --- docs/de/reference/runtime-api.md | 223 +++++++++++++++++++++++++++++++ 1 file changed, 223 insertions(+) create mode 100644 docs/de/reference/runtime-api.md diff --git a/docs/de/reference/runtime-api.md b/docs/de/reference/runtime-api.md new file mode 100644 index 000000000..aaab22aac --- /dev/null +++ b/docs/de/reference/runtime-api.md @@ -0,0 +1,223 @@ +--- +description: Reference of VitePress runtime APIs including composables, helper functions, and built-in components. +--- + +# Runtime API + +VitePress offers several built-in APIs to let you access app data. VitePress also comes with a few built-in components that can be used globally. + +The helper methods are globally importable from `vitepress` and are typically used in custom theme Vue components. However, they are also usable inside `.md` pages because markdown files are compiled into Vue [Single-File Components](https://vuejs.org/guide/scaling-up/sfc.html). + +Methods that start with `use*` indicates that it is a [Vue 3 Composition API](https://vuejs.org/guide/introduction.html#composition-api) function ("Composable") that can only be used inside `setup()` or ` + + +``` + +## `useRoute` + +Returns the current route object with the following type: + +```ts +interface Route { + path: string + data: PageData + component: Component | null +} +``` + +## `useRouter` + +Returns the VitePress router instance so you can programmatically navigate to another page. + +```ts +interface Router { + /** + * Current route. + */ + route: Route + /** + * Navigate to a new URL. + */ + go: (to?: string) => Promise + /** + * Called before the route changes. Return `false` to cancel the navigation. + */ + onBeforeRouteChange?: (to: string) => Awaitable + /** + * Called before the page component is loaded (after the history state is updated). + * Return `false` to cancel the navigation. + */ + onBeforePageLoad?: (to: string) => Awaitable + /** + * Called after the page component is loaded (before the page component is updated). + */ + onAfterPageLoad?: (to: string) => Awaitable + /** + * Called after the route changes. + */ + onAfterRouteChange?: (to: string) => Awaitable +} +``` + +Assign route-change handlers on the router instance: + +```ts +const router = useRouter() + +router.onBeforeRouteChange = (to) => { + console.log('navigating to', to) +} +``` + +For custom themes, the same router is available from [`enhanceApp`](../guide/custom-theme#theme-interface). + +## `useIcon` + +- **Type**: `(icon: MaybeRefOrGetter, el?: MaybeRefOrGetter) => ComputedRef` + +Renders an [iconify](https://iconify.design/) icon through VitePress's icon pipeline. Takes a fully qualified `collection:name` (resolved against the `@iconify-json/*` packages in your project's dependencies) and returns the class to put on the element — `vpi--`. + +During SSR the name is registered on the page's [`SSGContext`](./site-config#postrender), so the build emits the icon's styles into the generated stylesheet; in dev, icons are served on demand by the dev server from the locally installed collections. No icon is ever fetched from an external service. + +```vue + + + +``` + +Pass the template ref of the element carrying the class so dev mode can resolve the icon on it. The element needs the mask rules the default theme ships; in a custom theme without them, dev applies an inline equivalent and the generated stylesheet includes zero-specificity base rules for production. + +When using the default theme, the `VPIcon` component from `vitepress/theme` wraps this composable (and also accepts a raw `{ svg }` string): + +```vue-html + +``` + +Icons rendered only on the client (e.g. inside ``) can't be collected during the build — list them in [`icons.include`](./site-config#icons) instead. + +## `withBase` + +- **Type**: `(path: string) => string` + +Prepends the configured [`base`](./site-config#base) to a given URL path. Also see [Base URL](../guide/asset-handling#base-url). + +## `` + +The `` component displays the rendered markdown contents. Useful [when creating your own theme](../guide/custom-theme). + +```vue + +``` + +## `` + +The `` component renders its slot only at client side. + +Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks. + +If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the `ClientOnly` component. + +```vue-html + + + +``` + +- Related: [SSR Compatibility](../guide/ssr-compat) + +## `$frontmatter` + +Directly access current page's [frontmatter](../guide/frontmatter) data in Vue expressions. + +```md +--- +title: Hello +--- + +# {{ $frontmatter.title }} +``` + +## `$params` + +Directly access current page's [dynamic route params](../guide/routing#dynamic-routes) in Vue expressions. + +```md +- package name: {{ $params.pkg }} +- version: {{ $params.version }} +``` From bd72e1797835820e66eda28fd3e86afbbb097ede Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:44:44 +0200 Subject: [PATCH 043/199] docs(de): add German reference pages --- docs/de/reference/site-config.md | 862 +++++++++++++++++++++++++++++++ 1 file changed, 862 insertions(+) create mode 100644 docs/de/reference/site-config.md diff --git a/docs/de/reference/site-config.md b/docs/de/reference/site-config.md new file mode 100644 index 000000000..6eddae7a2 --- /dev/null +++ b/docs/de/reference/site-config.md @@ -0,0 +1,862 @@ +--- +outline: deep +description: Complete reference of VitePress site configuration options including app-level settings, theming, and build options. +--- + +# Site-Konfiguration + +Site config is where you can define the global settings of the site. App config options define settings that apply to every VitePress site, regardless of what theme it is using. For example, the base directory or the title of the site. + +## Übersicht + +### Config Resolution + +The config file is always resolved from `/.vitepress/config.[ext]`, where `` is your VitePress [project root](../guide/routing#root-and-source-directory), and `[ext]` is one of the supported file extensions. TypeScript is supported out of the box. Supported extensions include `.js`, `.ts`, `.mjs`, and `.mts`. + +It is recommended to use ES modules syntax in config files. The config file should default export an object: + +```ts +export default { + // app level config options + lang: 'en-US', + title: 'VitePress', + description: 'Vite & Vue powered static site generator.', + ... +} +``` + +::: details Dynamic (Async) Config + +If you need to dynamically generate the config, you can also default export a function. For example: + +```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: 'Vite & Vue powered static site generator.', + + // theme level config options + themeConfig: { + sidebar: [ + ...posts.map((post) => ({ + text: post.name, + link: `/posts/${post.name}` + })) + ] + } + }) +} +``` + +You can also use top-level `await`. For example: + +```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: 'Vite & Vue powered static site generator.', + + // theme level config options + themeConfig: { + sidebar: [ + ...posts.map((post) => ({ + text: post.name, + link: `/posts/${post.name}` + })) + ] + } +}) +``` + +::: + +### Config Intellisense + +Using the `defineConfig` helper will provide TypeScript-powered intellisense for config options. Assuming your IDE supports it, this should work in both JavaScript and TypeScript. + +```js +import { defineConfig } from 'vitepress' + +export default defineConfig({ + // ... +}) +``` + +### Typed Theme Config + +By default, `defineConfig` helper expects the theme config type from default theme: + +```ts +import { defineConfig } from 'vitepress' + +export default defineConfig({ + themeConfig: { + // Type is `DefaultTheme.Config` + } +}) +``` + +If you use a custom theme and want type checks for the theme config, you'll need to use `defineConfigWithTheme` instead, and pass the config type for your custom theme via a generic argument: + +```ts +import { defineConfigWithTheme } from 'vitepress' +import type { ThemeConfig } from 'your-theme' + +export default defineConfigWithTheme({ + themeConfig: { + // Type is `ThemeConfig` + } +}) +``` + +### Vite, Vue & Markdown Config + +- **Vite** + + You can configure the underlying Vite instance using the [vite](#vite) option in your VitePress config. No need to create a separate Vite config file. + +- **Vue** + + VitePress already includes the official Vue plugin for Vite ([@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue)). You can configure its options using the [vue](#vue) option in your VitePress config. + +- **Markdown** + + You can configure the underlying [Markdown-It](https://github.com/markdown-it/markdown-it) instance using the [markdown](#markdown) option in your VitePress config. + +### Page-Level Overrides + +Some settings can be overridden for specific pages using frontmatter. + +See [Frontmatter-Konfiguration](./frontmatter-config) for details. + +### Directory-Level Overrides + +Some config settings can be overridden at the directory level, allowing all pages in that directory to share settings without needing to repeat them in the frontmatter of each page. + +This is achieved by adding a file called `config.ts` (or `.js`, `.mjs`, or `.mts`) in the relevant directory. This file should export a config object using `export default`, similar to the main config file. + +Nested directories inherit settings from their parent directory, with configuration overrides being merged accordingly. + +The `defineAdditionalConfig` helper can be used to get TypeScript-powered intellisense for the available options, though as with `defineConfig` its use is optional. + +For example, for a site with multiple languages we might want a different `description` for each language. We could add `es/config.ts` with the following content: + +```ts +import { defineAdditionalConfig } from 'vitepress' + +export default defineAdditionalConfig({ + description: 'Generador de Sitios Estáticos desarrollado con Vite y Vue.' +}) +``` + +This `description` would then be used for all pages in the `es` directory. + +Alternatively, when using the built-in i18n features, the settings for a locale directory can be overridden via the `locales` setting in the main configuration file. See [Internationalization](../guide/i18n) for details. + +## Site Metadata + +### title + +- Type: `string` +- Default: `VitePress` +- Can be overridden per page via [frontmatter](./frontmatter-config#title) or at the [directory level](#directory-level-overrides) + +Title for the site. When using the default theme, this will be displayed in the nav bar. + +It will also be used as the default suffix for all individual page titles, unless [`titleTemplate`](#titletemplate) is defined. An individual page's final title will be the text content of its first `

` header, combined with the global `title` as the suffix. For example with the following config and page content: + +```ts +export default { + title: 'My Awesome Site' +} +``` + +```md +# Hello +``` + +The title of the page will be `Hello | My Awesome Site`. + +### titleTemplate + +- Type: `string | boolean` +- Can be overridden per page via [frontmatter](./frontmatter-config#titletemplate) or at the [directory level](#directory-level-overrides) + +Allows customizing each page's title suffix or the entire title. For example: + +```ts +export default { + title: 'My Awesome Site', + titleTemplate: 'Custom Suffix' +} +``` + +```md +# Hello +``` + +The title of the page will be `Hello | Custom Suffix`. + +To completely customize how the title should be rendered, you can use the `:title` symbol in `titleTemplate`: + +```ts +export default { + titleTemplate: ':title - Custom Suffix' +} +``` + +Here `:title` will be replaced with the text inferred from the page's first `

` header. The title of the previous example page will be `Hello - Custom Suffix`. + +The option can be set to `false` to disable title suffixes. + +### description + +- Type: `string` +- Default: `A VitePress site` +- Can be overridden per page via [frontmatter](./frontmatter-config#description) or at the [directory level](#directory-level-overrides) + +Description for the site. This will render as a `` tag in the page HTML. + +```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) + +Additional elements to render in the `` tag in the page HTML. The user-added tags are rendered before the closing `head` tag, after VitePress tags. + +```ts +type HeadConfig = + | [string, Record] + | [string, Record, 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 ``, 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: + +*/ +``` + +#### 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: + + + +*/ +``` + +#### Beispiel: Registering a service worker + +```ts +export default { + head: [ + [ + 'script', + { id: 'register-sw' }, + `;(() => { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw.js') + } + })()` + ] + ] +} + +/* Would render: + +*/ +``` + +#### 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: + + +*/ +``` + +### 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 `` 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 `` 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. If you 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 automatically 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` + +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 Source Directory](../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 `/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, allows 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. + +Icons rendered only on the client — inside ``, 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). See also: [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 + +- 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 `` 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). + +When using the default theme, enabling this option will display each page's last updated time. You can customize the text via [`themeConfig.lastUpdated.text`](./default-theme-config#lastupdated) option. + +## Customization + +### markdown + +- Type: `MarkdownOption` + +Configure 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 available. + +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 disabled 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` + +`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` + +`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 + vpIcons: Set + [key: string]: any +} +``` + +### transformHead + +- Type: `(context: TransformContext) => Awaitable` + +`transformHead` is a build hook to add extra tags to the `` of each page. It allows you to add head entries that cannot be statically added to your VitePress config. You only need to return extra entries, they will be merged automatically 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` + +`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 | { [key: string]: any } | void>` + +`transformPageData` is a hook to transform the `pageData` of each page. You can directly mutate `pageData` or return 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. You can 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 `` + +```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 `` + +```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 } + ]) + } +} +``` From dd610a3853a0eac90e1ca56bb1596f6b126b2625 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:46:10 +0200 Subject: [PATCH 044/199] docs(de): translate guide text --- docs/de/guide/asset-handling.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/de/guide/asset-handling.md b/docs/de/guide/asset-handling.md index 2a7e49a5d..36da2d87c 100644 --- a/docs/de/guide/asset-handling.md +++ b/docs/de/guide/asset-handling.md @@ -41,14 +41,14 @@ Wenn deine Website unter einer URL bereitgestellt wird, die nicht dem Stammverze Referenzen auf statische Assets werden automatisch an \`base\` angepasst. Eine absolute Referenz auf eine Datei in \`public\` funktioniert daher mit jedem \`base\` und muss nicht aktualisiert werden: \`\`\`md -![Ein Bild](/image-inside-public.png) +![Ein Bild](/image-innerhalb-public.png) \`\`\` Nur dynamisch erzeugte Pfade benötigen besondere Behandlung – beispielsweise ein Bild, dessen \`src\` auf einem Wert aus der Theme-Konfiguration basiert. Um den Basis-Pfad zur Laufzeit voranzustellen, umschließe solche Pfade mit dem [\`withBase\`-Helper](../reference/runtime-api#withbase): \`\`\`vue From a250581c52d725e4ea9c7b30189748e87bf32fd0 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:46:12 +0200 Subject: [PATCH 045/199] docs(de): translate guide text --- docs/de/guide/cms.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/de/guide/cms.md b/docs/de/guide/cms.md index 0bff6746f..b627c2d08 100644 --- a/docs/de/guide/cms.md +++ b/docs/de/guide/cms.md @@ -1,13 +1,13 @@ --- outline: deep -description: Connect VitePress to a headless CMS using dynamic routes and data loaders. +description: Connect VitePress to a headless CMS Verwendung dynamic routes and data loaders. --- -# Connecting to a CMS +# Mit einem CMS verbinden ## General Workflow -Connecting VitePress to a CMS will largely revolve around [Dynamic Routes](./routing#dynamic-routes). Make sure to understand how it works before proceeding. +Connecting VitePress to a CMS will largely revolve around [Dynamisch Routes](./routing#dynamic-routes). Stelle sicher to understand how it works bevor proceeding. Since each CMS will work differently, here we can only provide a generic workflow that you will need to adapt to your specific scenario. @@ -20,7 +20,7 @@ Since each CMS will work differently, here we can only provide a generic workflo const env = loadEnv('', process.cwd()) ``` -2. Fetch the necessary data from the CMS and format it into proper paths data: +2. Fetch the necessary data von the CMS and format it in proper paths data: ```js export default { @@ -54,4 +54,4 @@ Since each CMS will work differently, here we can only provide a generic workflo ## Integration Guides -If you have written a guide on integrating VitePress with a specific CMS, please use the "Edit this page" link below to submit it here! +Wenn du have written a guide on integrating VitePress mit a specific CMS, please use the "Edit this page" link below to submit it here! From f2f9ab8d69099e13087eacb2391a8fcac1b4748d Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:46:15 +0200 Subject: [PATCH 046/199] docs(de): translate guide text --- docs/de/guide/data-loading.md | 44 +++++++++++++++++------------------ 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/docs/de/guide/data-loading.md b/docs/de/guide/data-loading.md index 1c11e4698..0b81fd98b 100644 --- a/docs/de/guide/data-loading.md +++ b/docs/de/guide/data-loading.md @@ -1,16 +1,16 @@ --- -description: Load arbitrary data at build time using VitePress data loaders and import it from pages or components. +description: Load arbitrary data at build time Verwendung VitePress data loaders and import it von pages or components. --- -# Build-Time Data Loading +# Build-Time Daten laden -VitePress provides a feature called **data loaders** that allows you to load arbitrary data and import it from pages or components. The data loading is executed **only at build time**: the resulting data will be serialized as JSON in the final JavaScript bundle. +VitePress stellt bereit a feature genannt **data loaders** that ermöglicht you to load arbitrary data and import it von pages or components. The data loading is executed **only at build time**: the resulting data will be serialized as JSON in the final JavaScript bundle. -Data loaders can be used to fetch remote data, or generate metadata based on local files. For example, you can use data loaders to parse all your local API pages and automatically generate an index of all API entries. +Data loaders can be verwendet to fetch remote data, or generate metadata based on local files. Zum Beispiel, you can use data loaders to parse all your local API pages and automatisch generate an index of all API entries. -## Basic Usage +## Basic Verwendung -A data loader file must end with either `.data.js` or `.data.ts`. The file should provide a default export of an object with the `load()` method: +A data loader file must end mit either `.data.js` or `.data.ts`. The file should provide a default export of an object mit the `load()` method: ```js [example.data.js] export default { @@ -24,7 +24,7 @@ export default { The loader module is evaluated only in Node.js, so you can import Node APIs and npm dependencies as needed. -You can then import data from this file in `.md` pages and `.vue` components using the `data` named export: +Du kannst then import data von this file in `.md` pages and `.vue` components Verwendung the `data` named export: ```vue ``` -::: warning Avoid ` ``` -## Using Teleports +## Teleports verwenden -VitePress currently has SSG support for teleports to body only. For other targets, you can wrap them inside the built-in `` Komponente or inject the teleport markup into the correct location in your final page HTML through [`postRender` hook](../reference/site-config#postrender). +VitePress currently has SSG support for teleports zu body only. For other targets, kannst du sie in die integrierte `` Komponente or inject the teleport markup inzu the correct location in your final page HTML through [`postRender` hook](../reference/site-config#postrender). @@ -238,7 +238,7 @@ VitePress currently has SSG support for teleports to body only. For other target ```md - +
// ...
@@ -260,14 +260,14 @@ import ComponentInHeader from '../../Komponenten/ComponentInHeader.vue' -## VS Code IntelliSense Support +## VS-Code-IntelliSense-Unterstützung - + -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. +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, zu enable it for `.md` files, you need zu make some adjustments zu the configuration files. -1. Add `.md` pattern to the `include` and `vueCompilerOptions.vitePressExtensions` options in the tsconfig/jsconfig file: +1. Add `.md` pattern zu the `include` and `vueCompilerOptions.vitePressExtensions` options in the tsconfig/jsconfig file: ::: code-group ```json [tsconfig.json] @@ -284,7 +284,7 @@ Vue stellt bereit IntelliSense support out of the box via the [Vue - Official VS ``` ::: -2. Add `markdown` to the `vue.server.includeLanguages` option in the VS Code setting: +2. Add `markdown` zu the `vue.server.includeLanguages` option in the VS Code setting: ::: code-group ```json [.vscode/settings.json] From 4f374a6bf2611f8f59da1e55d10ad5641a1e801d Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:56:23 +0200 Subject: [PATCH 096/199] docs(de): translate remaining guide prose --- docs/de/guide/what-is-vitepress.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/de/guide/what-is-vitepress.md b/docs/de/guide/what-is-vitepress.md index 6f2689278..b5991c249 100644 --- a/docs/de/guide/what-is-vitepress.md +++ b/docs/de/guide/what-is-vitepress.md @@ -1,10 +1,10 @@ --- -description: Ein statischer Website-Generator zum Erstellen schneller, inhaltsorientierter Websites auf Basis von Vite und Vue. +description: Ein statischer Website-Generazur 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. +VitePress ist ein [statischer Website-Generazur](https://en.wikipedia.org/wiki/Static_site_generazur) (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). @@ -20,7 +20,7 @@ Du möchtest es einfach ausprobieren? Springe direkt zum [Schnellstart](./gettin - **Blogs, Portfolios und Marketing-Websites** - VitePress supports [fully customized themes](./custom-theme), with the developer experience of a stundard Vite + Vue application. 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 [load data](./data-loading) (local or remote) und [dynamically generate routes](./routing#dynamic-routes). Damit kannst du nahezu alles erstellen, solange die benötigten Daten zur Build-Zeit bestimmt werden können. + VitePress supports [fully cuszumized themes](./cuszum-theme), with the developer experience of a stundard Vite + Vue application. 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 [load data](./data-loading) (local or remote) und [dynamically generate routes](./routing#dynamic-routes). Damit kannst du nahezu alles erstellen, solange die benötigten Daten zur Build-Zeit bestimmt werden können. Der offizielle [Vue.js-Blog](https://blog.vuejs.org/) is a simple blog that generates its index page based on local content. @@ -32,7 +32,7 @@ VitePress möchte eine hervorragende Developer Experience (DX) bei der Arbeit mi - **[Built-in Markdown Extensions:](./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-Enhanced 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), thanks to Vue template's 100% syntax compatibility with HTML. Du kannst mithilfe von Vue-Template-Funktionen oder importierten Vue-Komponenten Interaktivität in deine statischen Inhalte einbetten. +- **[Vue-Enhanced 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), thanks zu Vue template's 100% syntax compatibility with HTML. Du kannst mithilfe von Vue-Template-Funktionen oder importierten Vue-Komponenten Interaktivität in deine statischen Inhalte einbetten. ## Leistung @@ -40,20 +40,20 @@ Anders als bei vielen herkömmlichen SSGs, bei denen jede Navigation ein vollst - **Schnelles erstes Laden** - The initial visit to any page will be served the static, pre-rendered HTML for fast loading speed und optimal SEO. The page then loads a JavaScript bundle that turns the page into a Vue SPA ("hydration"). Contrary to common assumptions of SPA hydration being slow, this process is actually extremely fast thanks to Vue 3's raw performance und compiler optimizations. On [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F), typical VitePress sites achieve near-perfect performance scores even on low-end mobile devices with a slow network. + The initial visit zu any page will be served the static, pre-rendered HTML for fast loading speed und optimal SEO. The page then loads a JavaScript bundle that turns the page inzu a Vue SPA ("hydration"). Contrary zu common assumptions of SPA hydration being slow, this process is actually extremely fast thanks zu Vue 3's raw performance und compiler optimizations. On [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F), typical VitePress sites achieve near-perfect performance scores even on low-end mobile devices with a slow network. - **Schnelle Navigation nach dem Laden** - More importantly, the SPA model leads to better user experience **after** the initial load. Subsequent navigation within the site will no longer cause a full page reload. Instead, the incoming page's content will be fetched und dynamically updated. VitePress also automatically pre-fetches page chunks for links that are within viewport. In most cases, post-load navigation will feel instant. + More importantly, the SPA model leads zu better user experience **after** the initial load. Subsequent navigation within the site will no longer cause a full page reload. Instead, the incoming page's content will be fetched und dynamically updated. VitePress also auzumatically pre-fetches page chunks for links that are within viewport. In most cases, post-load navigation will feel instant. - **Interaktivität ohne Nachteile** - To be able to hydrate the dynamic Vue parts embedded inside static Markdown, each Markdown page is processed as a Vue component und compiled into JavaScript. This may sound inefficient, but the Vue compiler is smart enough to separate the static und dynamic parts, minimizing both the hydration cost und payload size. For the initial page load, the static parts are automatically eliminated from the JavaScript payload und skipped during hydration. + To be able zu hydrate the dynamic Vue parts embedded inside static Markdown, each Markdown page is processed as a Vue Komponente und compiled inzu JavaScript. This may sound inefficient, but the Vue compiler is smart enough zu separate the static und dynamic parts, minimizing both the hydration cost und payload size. For the initial page load, the static parts are auzumatically eliminated from the JavaScript payload und skipped during hydration. ## Und was ist mit VuePress? -VitePress is the spiritual successor of VuePress 1. The original VuePress 1 was based on Vue 2 und webpack. With Vue 3 und Vite under the hood, VitePress provides significantly better DX, better production performance, a more polished default theme, und a more flexible customization API. +VitePress is the spiritual successor of VuePress 1. The original VuePress 1 was based on Vue 2 und webpack. With Vue 3 und Vite under the hood, VitePress provides significantly better DX, better production performance, a more polished default theme, und a more flexible cuszumization API. -The API difference between VitePress und VuePress 1 mostly lies in theming und customization. If you are using VuePress 1 with the default theme, it should be relatively straightforward to migrate to VitePress. +The API difference between VitePress und VuePress 1 mostly lies in theming und cuszumization. If you are using VuePress 1 with the default theme, it should be relatively straightforward zu migrate zu VitePress. -Maintaining two SSGs in parallel isn't sustainable, so the Vue team has decided to focus on VitePress as the main recommended SSG in the long run. Now VuePress 1 has been deprecated, und VuePress 2 has been hunded over to the VuePress community team for further development und maintenance. +Maintaining two SSGs in parallel isn't sustainable, so the Vue team has decided zu focus on VitePress as the main recommended SSG in the long run. Now VuePress 1 has been deprecated, und VuePress 2 has been hunded over zu the VuePress community team for further development und maintenance. From 8b9f3a4c74f0daa90e2292431ec8742e6ceb1e07 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:56:56 +0200 Subject: [PATCH 097/199] docs(de): translate guide prose safely --- docs/de/guide/migration-from-vuepress.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/de/guide/migration-from-vuepress.md b/docs/de/guide/migration-from-vuepress.md index b38e074ce..da390deed 100644 --- a/docs/de/guide/migration-from-vuepress.md +++ b/docs/de/guide/migration-from-vuepress.md @@ -4,13 +4,13 @@ ### Seitenleiste -The sidebar is no longer auzumatisch populated from frontmatter. Du kannst [read the frontmatter yourself](https://github.com/vuejs/vitepress/issues/572#issuecomment-1170116225) zu dynamically populate the sidebar. [Additional utilities for this](https://github.com/vuejs/vitepress/issues/96) may be provided in the future. +The sidebar is no longer automatisch populated from frontmatter. Du kannst [read the frontmatter yourself](https://github.com/vuejs/vitepress/issues/572#issuecomment-1170116225) to dynamically populate the sidebar. [Additional utilities for this](https://github.com/vuejs/vitepress/issues/96) may be provided in the future. ## Markdown ### Bilder -Unlike VuePress, VitePress handles [`base`](./asset-handling#base-url) of your config auzumatisch when you use static image. +Unlike VuePress, VitePress handles [`base`](./asset-handling#base-url) of your config automatisch when you use static image. Hence, now you can render images without `img` tag. @@ -23,8 +23,8 @@ Hence, now you can render images without `img` tag. For dynamic images you still need `withBase` as shown in [Base URL guide](./asset-handling#base-url). ::: -Use `` regex zu find and replace it with `![$2]($1)` zu replace all the images with `![](...)` syntax. +Use `` regex to find and replace it with `![$2]($1)` to replace all the images with `![](...)` syntax. --- -more zu follow... +more to follow... From aa8865ccf54699c7a22c02056e5ae5e11e9ca103 Mon Sep 17 00:00:00 2001 From: Intense Date: Sun, 27 Sep 2026 11:56:59 +0200 Subject: [PATCH 098/199] docs(de): translate guide prose safely --- docs/de/guide/mpa-mode.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/de/guide/mpa-mode.md b/docs/de/guide/mpa-mode.md index 255baed9a..4f11b5ccd 100644 --- a/docs/de/guide/mpa-mode.md +++ b/docs/de/guide/mpa-mode.md @@ -6,15 +6,15 @@ description: MPA (Multi-Seite Application) mode in VitePress for zero-JavaScript MPA (Multi-Seite Application) mode can be enabled via the command line via `vitepress build --mpa`, or via config through the `mpa: true` option. -In MPA mode, all pages are rendered without any JavaScript included by default. As a result, the production site will likely have a better initial visit performance score from audit zuols. +In MPA mode, all pages are rendered without any JavaScript included by default. As a result, the production site will likely have a better initial visit performance score from audit tools. -However, due zu the absence of SPA navigation, cross-page links will lead zu full page reloads. Post-laden navigations in MPA mode will not feel as instant as in SPA mode. +However, due to the absence of SPA navigation, cross-page links will lead to full page reloads. Post-laden navigations in MPA mode will not feel as instant as in SPA mode. -Also note that no-JS-by-default means you are essentially Verwendung Vue purely as a server-side templating language. No event handlers will be attached in the browser, so there will be no interactivity. To laden client-side JavaScript, you will need zu use the special ` @@ -22,6 +22,6 @@ document.querySeleczur('h1').addEventListener('click', () => { # Hello ``` -` @@ -97,7 +97,7 @@ const ClientComp = defineClientComponent(() => { ``` -Du kannst also pass props/children/slots zu the target Komponente: +Du kannst also pass props/children/slots to the target Komponente: ```vue # Docs -This is a .md using a cuszum Komponente +This is a .md using a custom component - + ## More docs @@ -126,10 +126,10 @@ This is a .md using a cuszum Komponente ### Komponenten global registrieren -If a Komponente is going zu be verwendet on most of the pages, they can be registered globally by cuszumizing the Vue app instance. Siehe relevant section in [Extending Standard-Theme](./extending-default-theme#registering-global-Komponenten) for an example. +If a Komponente is going to be verwendet on most of the pages, they can be registered globally by customizing the Vue app instance. See relevant section in [Extending Standard-Theme](./extending-default-theme#registering-global-Komponenten) for an example. -::: warning WICHTIG -Stelle sicher a cuszum Komponente's name either contains a hyphen or is in PascalCase. Otherwise, it will be treated as an inline element and wrapped inside a `

` tag, which will lead zu hydration mismatch because `

` does not allow block elements zu be placed inside it. +::: warning IMPORTANT +Stelle sicher a custom Komponente's name either contains a hyphen or is in PascalCase. Otherwise, it will be treated as an inline element and wrapped inside a `

` tag, which will lead to hydration mismatch because `

` does not allow block elements to be placed inside it. ::: ### Komponenten verwenden In Headers @@ -144,7 +144,7 @@ Du kannst use Vue Komponenten in the headers, but note the difference between th The HTML wrapped by `` will be displayed as-is; only the HTML that is **not** wrapped will be parsed by Vue. ::: tip -Das Ausgabe-HTML wird von [Markdown-it](https://github.com/Markdown-it/Markdown-it), während die analysierten Überschriften von VitePress (and verwendet for both the sidebar and document title). +The output HTML is accomplished by [Markdown-it](https://github.com/Markdown-it/Markdown-it), while the parsed headers are handled by VitePress (and verwendet for both the sidebar and document title). ::: @@ -164,7 +164,7 @@ This {{ will be displayed as-is }}

This {{ will be displayed as-is }}

-Alternativ kannst du den gesamten Absatz in a `v-pre` cuszum container: +Alternativ kannst du den gesamten Absatz in a `v-pre` custom container: ```md ::: v-pre @@ -184,7 +184,7 @@ Alternativ kannst du den gesamten Absatz in a `v-pre` cuszum container: ## Maskierung in Codeblöcken aufheben -Standardmäßig, all fenced code blocks are auzumatisch wrapped with `v-pre`, umschlossen, sodass darin keine Vue-Syntax verarbeitet wird. Um Vue-artige Interpolation innerhalb von Codeblöcken zu aktivieren, kannst du an die Sprache das `-vue` suffix, e.g. `js-vue`: +Standardmäßig, all fenced code blocks are automatisch wrapped with `v-pre`, so no Vue syntax will be processed inside. To enable Vue-style interpolation inside fences, you can append the language with the `-vue` suffix, e.g. `js-vue`: **Input** @@ -200,11 +200,11 @@ Hello {{ 1 + 1 }} Hello {{ 1 + 1 }} ``` -Beachte, dass this might prevent certain zukens from being syntax highlighted properly. +Beachte, dass this might prevent certain tokens from being syntax highlighted properly. ## CSS-Präprozessoren verwenden -VitePress has [built-in support](https://vite.dev/guide/features.html#css-pre-processors) for CSS pre-processors: `.scss`, `.sass`, `.less`, `.styl` and `.stylus` files. There is no need zu install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed: +VitePress has [built-in support](https://vite.dev/guide/features.html#css-pre-processors) for CSS pre-processors: `.scss`, `.sass`, `.less`, `.styl` and `.stylus` files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed: ``` # .scss and .sass @@ -217,7 +217,7 @@ npm install -D less npm install -D stylus ``` -Danach kannst du Folgendes verwenden in Markdown and theme Komponenten: +Then you can use the following in Markdown and theme Komponenten: ```vue