diff --git a/docs/de/guide/what-is-vitepress.md b/docs/de/guide/what-is-vitepress.md index 97f592668..eb95db662 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-Generazur zum Erstellen schneller, inhaltsorientierter Websites auf Basis von Vite und Vue. +description: Ein statischer Website-Generator zum Erstellen schneller, inhaltsorientierter Websites auf Basis von Vite und Vue. --- # Was ist VitePress? -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. +VitePress ist ein [statischer Website-Generator](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). @@ -14,15 +14,15 @@ Du möchtest es einfach ausprobieren? Springe direkt zum [Schnellstart](./gettin - **Dokumentation** - VitePress enthält ein Stundard-Theme für technische Dokumentation. Es wird für diese Seite und unter underem für die Dokumentation von [Vite](https://vite.dev/), [Rollup](https://rollupjs.org/), [Pinia](https://pinia.vuejs.org/), [VueUse](https://vueuse.org/), [Vitest](https://vitest.dev/), [D3](https://d3js.org/), [UnoCSS](https://unocss.dev/), [Iconify](https://iconify.design/) und [many more](https://github.com/search?q=/%22vitepress%22:+/+path:/(?:package%7Cdeno)%5C.jsonc?$/+NOT+is:fork+NOT+is:archived&type=code). + VitePress enthält ein Standard-Theme für technische Dokumentation. Es wird für diese Seite und unter anderem für die Dokumentation von [Vite](https://vite.dev/), [Rollup](https://rollupjs.org/), [Pinia](https://pinia.vuejs.org/), [VueUse](https://vueuse.org/), [Vitest](https://vitest.dev/), [D3](https://d3js.org/), [UnoCSS](https://unocss.dev/), [Iconify](https://iconify.design/) und [viele weitere](https://github.com/search?q=/%22vitepress%22:+/+path:/(?:package%7Cdeno)%5C.jsonc?$/+NOT+is:fork+NOT+is:archived&type=code). Die [offizielle Vue.js-Dokumentation](https://vuejs.org/) basiert ebenfalls auf VitePress, verwendet jedoch ein eigenes Theme, das von mehreren Übersetzungen gemeinsam genutzt wird. - **Blogs, Portfolios und Marketing-Websites** - VitePress supports [fully cuszumized themes](./cuszum-theme), mit der Entwicklererfahrung einer normalen Vite- und Vue-Anwendung. Da Vite die Grundlage bildet, kannst du außerdem direkt auf Vite-Plugins aus dessen umfangreichem Ökosystem zurückgreifen. Zusätzlich bietet VitePress flexible APIs zum [Daten laden](./data-loading) (lokal oder entfernt) und [dynamische Routen erzeugen](./routing#dynamic-routes). Damit kannst du nahezu alles erstellen, solange die benötigten Daten zur Build-Zeit bestimmt werden können. + VitePress unterstützt [vollständig angepasste Themes](./custom-theme) mit der Entwicklererfahrung einer normalen Vite- und Vue-Anwendung. Da Vite die Grundlage bildet, kannst du außerdem direkt auf Vite-Plugins aus dessen umfangreichem Ökosystem zurückgreifen. Zusätzlich bietet VitePress flexible APIs zum [Daten laden](./data-loading) (lokal oder entfernt) und [dynamische Routen erzeugen](./routing#dynamic-routes). Damit kannst du nahezu alles erstellen, solange die benötigten Daten zur 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. + Der offizielle [Vue.js-Blog](https://blog.vuejs.org/) ist ein einfacher Blog, der seine Indexseite auf Grundlage lokaler Inhalte erzeugt. ## Entwicklererfahrung @@ -32,7 +32,7 @@ VitePress möchte eine hervorragende Developer Experience (DX) bei der Arbeit mi - **[Integrierte Markdown-Erweiterungen:](./markdown)** Frontmatter, Tabellen, Syntaxhervorhebung und vieles mehr. VitePress bietet insbesondere zahlreiche fortgeschrittene Funktionen für die Arbeit mit Codeblöcken und eignet sich dadurch besonders für hochtechnische Dokumentation. -- **[Vue-erweitertes Markdown:](./using-vue)** jede Markdown-Seite ist dank der 100%igen Syntaxkompatibilität von Vue-Templates mit HTML auch eine Vue-[Single-File-Komponente](https://vuejs.org/guide/scaling-up/sfc.html), 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. +- **[Vue-erweitertes Markdown:](./using-vue)** Jede Markdown-Seite ist dank der 100%igen Syntaxkompatibilität von Vue-Templates mit HTML auch eine Vue-[Single-File-Komponente](https://vuejs.org/guide/scaling-up/sfc.html). Du kannst mithilfe von Vue-Template-Funktionen oder importierten Vue-Komponenten Interaktivität in deine statischen Inhalte einbetten. 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 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. + Beim ersten Aufruf einer beliebigen Seite wird statisches, vorgerendertes HTML ausgeliefert, um schnelle Ladezeiten und optimale SEO zu ermöglichen. Anschließend lädt die Seite ein JavaScript-Bundle, das die Seite in eine Vue-SPA („Hydration“) umwandelt. Entgegen der verbreiteten Annahme, dass die Hydration von SPAs langsam sei, ist dieser Vorgang dank der hohen Leistung von Vue 3 und der Compiler-Optimierungen sehr schnell. Auf [PageSpeed Insights](https://pagespeed.web.dev/report?url=https%3A%2F%2Fvitepress.dev%2F) erreichen typische VitePress-Websites selbst auf leistungsschwachen Mobilgeräten mit langsamer Verbindung nahezu perfekte Leistungswerte. - **Schnelle Navigation nach dem Laden** - More importantly, the SPA model leads zu better user experience **after** the initial load. Bei der weiteren Navigation innerhalb der Website wird die Seite nicht mehr vollständig neu geladen. Stattdessen wird der Inhalt der Zielseite abgerufen und dynamisch aktualisiert. VitePress also auzumatically pre-fetches page chunks for links that are within viewport. In most cases, post-load navigation will feel instant. + Noch wichtiger ist, dass das SPA-Modell **nach** dem ersten Laden zu einer besseren Benutzererfahrung führt. Bei der weiteren Navigation innerhalb der Website wird die Seite nicht mehr vollständig neu geladen. Stattdessen wird der Inhalt der Zielseite abgerufen und dynamisch aktualisiert. VitePress lädt außerdem automatisch Seitenabschnitte für Links vor, die sich im sichtbaren Bereich befinden. In den meisten Fällen fühlt sich die Navigation nach dem Laden sofort an. - **Interaktivität ohne Nachteile** - 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. + Damit die in statisches Markdown eingebetteten dynamischen Vue-Teile hydratisiert werden können, wird jede Markdown-Seite als Vue-Komponente verarbeitet und in JavaScript kompiliert. Das mag ineffizient klingen, aber der Vue-Compiler kann statische und dynamische Teile voneinander trennen und dadurch sowohl die Kosten der Hydration als auch die Größe der Nutzlast minimieren. Beim ersten Laden der Seite werden die statischen Teile automatisch aus der JavaScript-Nutzlast entfernt und während der Hydration übersprungen. ## Und was ist mit VuePress? -VitePress ist der Nachfolger von VuePress 1. Das ursprüngliche VuePress 1 basierte auf Vue 2 und webpack. 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. +VitePress ist der Nachfolger von VuePress 1. Das ursprüngliche VuePress 1 basierte auf Vue 2 und webpack. Mit Vue 3 und Vite im Hintergrund bietet VitePress eine deutlich bessere Entwicklererfahrung, bessere Leistung in der Produktion, ein ausgereifteres Standard-Theme und eine flexiblere API zur Anpassung. -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. +Die API-Unterschiede zwischen VitePress und VuePress 1 liegen hauptsächlich beim Theming und bei der Anpassung. Wenn du VuePress 1 mit dem Standard-Theme verwendest, sollte die Migration zu VitePress relativ unkompliziert sein. -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. +Die parallele Pflege zweier SSGs ist langfristig nicht sinnvoll. Daher hat das Vue-Team beschlossen, sich langfristig auf VitePress als empfohlenes SSG zu konzentrieren. VuePress 1 ist inzwischen veraltet, und VuePress 2 wurde zur weiteren Entwicklung und Pflege an das VuePress-Community-Team übergeben.