* Update config.ts again Recreating recent changes to the de menu section that got lost during some other PR using outdated data or whatever))) * Update getting-started.md Recreating re-routes in text links Recreating replacement of snowpackjs by withastro in links * Update quick-start.md Recreating re-routes in text links Recreating replacement of snowpackjs by withastro in links * Update getting-started.md Recreating title replacement in frontmatter * Update installation.md Recreating re-routes in text links Recreating replacement of snowpackjs by withastro in links * Update comparing-astro-vs-other-tools.md Recreating re-routes in text links Recreating replacement of snowpackjs by withastro in links * Update quick-start.md Adds missing preceding slash * Update astro-components.md Recreating re-routes in text links Recreating replacement of the term Rückfall by Fallback Updating frontmatter * Update astro-pages.md Recreating re-routes in text links Recreating changes to frontmatter * Update component-hydration.md Recreating re-routes in text links Recreating changes to frontmatter * Update layouts.md Recreating re-routes in text links Recreating changes to frontmatter * Update project-structure.md Recreating re-routes in text links Recreating changes to frontmatter * Update routing.md Recreating re-routes in text links Recreating replacement of snowpackjs by withastro in links Recreating changes to frontmatter * Update 0.21.0.md Small grammar fix
This commit is contained in:
borisv
GitHub
parent
a7e2070abc
commit
31af8efa10
12 changed files with 78 additions and 74 deletions
|
|
@ -40,21 +40,25 @@ export const SIDEBAR = {
|
|||
{ text: 'Renderer Reference', link: 'reference/renderer-reference' },
|
||||
],
|
||||
de: [
|
||||
{ text: 'Setup', header: true },
|
||||
{ text: 'Erste Schritte', link: 'getting-started' },
|
||||
{ text: 'Schnellstart', link: 'quick-start' },
|
||||
{ text: 'Installation', link: 'installation' },
|
||||
{ text: 'Vorlagen', link: 'themes' },
|
||||
{ text: 'Astro vs. X', link: 'comparing-astro-vs-other-tools' },
|
||||
{ text: 'Umstellung auf v0.21', link: 'migration/0.21.0' },
|
||||
{ text: 'Einrichtung', header: true },
|
||||
{ text: 'Erste Schritte', link: 'de/getting-started' },
|
||||
{ text: 'Schnellstart', link: 'de/quick-start' },
|
||||
{ text: 'Installation', link: 'de/installation' },
|
||||
{ text: 'Vorlagen', link: 'de/themes' },
|
||||
{ text: 'Astro vs. X', link: 'de/comparing-astro-vs-other-tools' },
|
||||
{ text: 'Umstellung auf v0.21', link: 'de/migration/0.21.0' },
|
||||
|
||||
{ text: 'Grundlagen', header: true },
|
||||
{ text: 'Projekt-Struktur', link: 'core-concepts/project-structure' },
|
||||
{ text: 'Komponenten-Syntax', link: 'core-concepts/astro-components' },
|
||||
{ text: 'Seiten', link: 'core-concepts/astro-pages' },
|
||||
{ text: 'Layouts', link: 'core-concepts/layouts' },
|
||||
{ text: 'Routing', link: 'core-concepts/routing' },
|
||||
{ text: 'Partial Hydration', link: 'core-concepts/component-hydration' },
|
||||
{ text: 'Projektstruktur', link: 'de/core-concepts/project-structure' },
|
||||
{ text: 'Astro-Komponenten', link: 'de/core-concepts/astro-components' },
|
||||
{ text: 'Astro-Seiten', link: 'de/core-concepts/astro-pages' },
|
||||
{ text: 'Layouts', link: 'de/core-concepts/layouts' },
|
||||
{ text: 'Routing', link: 'de/core-concepts/routing' },
|
||||
{ text: 'Partial Hydration', link: 'de/core-concepts/component-hydration' },
|
||||
|
||||
{ text: 'Anleitungen', header: true },
|
||||
|
||||
{ text: 'Referenz', header: true },
|
||||
],
|
||||
nl: [
|
||||
{ text: 'Welkom', header: true },
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ Einige Features sind noch nicht verfügbar und Teile der API noch nicht vollstä
|
|||
|
||||
[Docusaurus](https://docusaurus.io/) ist ein populärer Dokumentationssite-Renderer. Docusaurus verwendet React, um deine Website-UI zu generieren, während Astro in diesem Bereich React, Preact, Vue, Svelte, Solid und andere unterstützt - sowie auch eine an HTML angelehnte Komponenten-Syntax, die sich ähnlich verhält wie HTML + JSX.
|
||||
|
||||
Docusaurus wurde entwickelt, um Dokumentationswebsites zu erzeugen und bietet einige dokumentationsspezifische Features, über die Astro nicht verfügt. Stattdessen kannst du in Astro auf dokumentationsspezifische Features mittels einer offiziellen [`docs`](https://github.com/snowpackjs/astro/tree/main/examples/docs)-Vorlage zugreifen, die du für deine Site verwenden kannst. Diese Dokumentationswebsite wurde unter Verwendung dieser Vorlage erstellt!
|
||||
Docusaurus wurde entwickelt, um Dokumentationswebsites zu erzeugen und bietet einige dokumentationsspezifische Features, über die Astro nicht verfügt. Stattdessen kannst du in Astro auf dokumentationsspezifische Features mittels einer offiziellen [`docs`](https://github.com/withastro/astro/tree/main/examples/docs)-Vorlage zugreifen, die du für deine Site verwenden kannst. Diese Dokumentationswebsite wurde unter Verwendung dieser Vorlage erstellt!
|
||||
|
||||
### Leistungsvergleich Docusaurus vs. Astro
|
||||
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als Docusaurus-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt.
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als Docusaurus-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
|
||||
|
||||
Docusaurus unterstützt Partial Hydration nicht. Stattdessen wird die gesamte Seite im Browser mit JavaScript angereichert, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und insgesamt schlechterer Leistung deiner Website. Es gibt keine Möglichkeit dieses Verhalten in Docusaurus abzuschalten.
|
||||
|
||||
|
|
@ -41,9 +41,9 @@ Ein wesentlicher Grund für diesen Leistungsunterschied liegt in Astros geringer
|
|||
|
||||
Elder.js verwendet Svelte, um deine Website zu rendern. Astro ist hierin flexibler: Du kannst frei entscheiden mit welcher UI-Komponenten-Bibliothek du deine Oberfläche erzeugen willst (React, Preact, Vue, Svelte, Solid und andere), oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX.
|
||||
|
||||
Elder.js hat eine besondere Stellung in dieser Auflistung, da es neben Astro der einzige Site-Renderer ist, der [Partial Hydration](/core-concepts/component-hydration) unterstützt. Sowohl Astro als auch Elder.js vermeiden automatisch unnötiges JavaScript auf der Seite und reichern nur die Komponenten damit an, die dies benötigen. Elders API für Partial Hydration unterscheidet sich etwas von der, die Astro verwendet. Und Astro unterstützt einige Features, über die Elder.js nicht verfügt (wie z. B. `client:media`). Wie auch immer, beide Werkzeuge erzeugen bezüglich der Leistung betrachtet sehr ähnliche Sites.
|
||||
Elder.js hat eine besondere Stellung in dieser Auflistung, da es neben Astro der einzige Site-Renderer ist, der [Partial Hydration](/de/core-concepts/component-hydration) unterstützt. Sowohl Astro als auch Elder.js vermeiden automatisch unnötiges JavaScript auf der Seite und reichern nur die Komponenten damit an, die dies benötigen. Elders API für Partial Hydration unterscheidet sich etwas von der, die Astro verwendet. Und Astro unterstützt einige Features, über die Elder.js nicht verfügt (wie z. B. `client:media`). Wie auch immer, beide Werkzeuge erzeugen bezüglich der Leistung betrachtet sehr ähnliche Sites.
|
||||
|
||||
Elder.js verwendet eine spezifische Routing-Lösung, die für neue Entwickler ungewohnt erscheinen kann. Astro verwendet [dateibasiertes Routing](/core-concepts/routing), das sich für alle vertraut anfühlen sollte, die Erfahrung mit Next.js, SvelteKit oder auch anderen Site-Renderern wie Eleventy haben.
|
||||
Elder.js verwendet eine spezifische Routing-Lösung, die für neue Entwickler ungewohnt erscheinen kann. Astro verwendet [dateibasiertes Routing](/de/core-concepts/routing), das sich für alle vertraut anfühlen sollte, die Erfahrung mit Next.js, SvelteKit oder auch anderen Site-Renderern wie Eleventy haben.
|
||||
|
||||
Elder.js wurde entwickelt, um große Websites zu erzeugen - und behauptet, es könne eine Website mit ca 20.000 Seiten in weniger als 10 Minuten rendern (auf einer durchschnittlichen VM). Zum Zeitpunkt der Erstellung dieses Textes rendert Astro ca 1.000 Seiten in 66 Sekunden, aber wurde noch nicht mit Projekten im Umfang von 20.000 Seiten getestet. Astro ist noch in einem frühen Beta-Stadium, und Elder.js Render-Geschwindigkeit zu erreichen ist ein Ziel für Astro v1.0.
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ Konzeptuell ist Eleventy auf Augenhöhe mit Astros "minimalistischem Einsatz von
|
|||
|
||||
Eleventy erreicht dies, indem es dich dazu anhält JavaScript gänzlich zu vermeiden. Eleventy-Sites werden oft mit sehr wenig bis hin zu gar keinem JavaScript geschrieben. Dies wird allerdings dann zum Thema, wenn du tatsächlich Client-seitig JavaScript einsetzen musst. Es bleibt dann dir überlassen eine entsprechende Build-Pipeline für deine Skripte und weitere Elemente aufzubauen. Dies kann sich sehr zeitaufwendig gestalten, und es zwingt dich das Packen der Anwendung, sowie Minifizierung und weitere komplizierte Optimierungen von Hand aufzusetzen.
|
||||
|
||||
Im Gegensatz dazu kompiliert Astro automatisch dein Client-seitiges JavaScript & CSS für dich. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Eleventy von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
|
||||
Im Gegensatz dazu kompiliert Astro automatisch dein Client-seitiges JavaScript & CSS für dich. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Eleventy von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
|
||||
|
||||
## Gatsby vs. Astro
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ Gatsby erfordert für deine gesamte Arbeit mit Site-Inhalten eine eigene GraphQL
|
|||
|
||||
### Leistungsvergleich Gatsby vs. Astro
|
||||
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als Gatsby-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt.
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als Gatsby-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
|
||||
|
||||
Gatsby unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. Gatsby verfügt über ein [Community Plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript/), das sämtliches JavaScript von einer Seite entfernt, doch dies führt auch dazu, dass viele Websites nicht mehr wie beabsichtigt funktionieren. In Bezug auf Interaktivität auf einzelnen Seiten ist entprechend nur eine Entscheidung zwischen ganz oder gar nicht möglich.
|
||||
|
||||
|
|
@ -100,7 +100,7 @@ Hugo verwendet eine eigene [Templating Language](https://gohugo.io/templates/int
|
|||
|
||||
Konzeptuell ist Hugo auf Augenhöhe mit Astros "minimalistischem Einsatz von Client-seitigem JavaScript" bei der Web-Entwicklung. Hugo und Astro bieten somit eine ähnliche Leistungsgrundlage durch ihre jeweilige Null-JavaScript-Strategie.
|
||||
|
||||
Sowohl Hugo als auch Astro bieten von vornherein Unterstützung beim Kompilieren, Packen und Minifizieren von JavaScript. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Hugo von Hand einzurichten, steht es dir in Astro ebenfalls bereits von vornherein zur Verfügung.
|
||||
Sowohl Hugo als auch Astro bieten von vornherein Unterstützung beim Kompilieren, Packen und Minifizieren von JavaScript. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Hugo von Hand einzurichten, steht es dir in Astro ebenfalls bereits von vornherein zur Verfügung.
|
||||
|
||||
## Jekyll vs. Astro
|
||||
|
||||
|
|
@ -114,7 +114,7 @@ Konzeptuell ist Jekyll auf Augenhöhe mit Astros "minimalistischem Einsatz von C
|
|||
|
||||
Jekyll erreicht dies, indem es dich dazu anhält JavaScript gänzlich zu vermeiden. Jekyll-Sites werden oft mit sehr wenig bis hin zu gar keinem JavaScript geschrieben. Dies wird allerdings dann zum Thema, wenn du tatsächlich Client-seitig JavaScript einsetzen musst. Es bleibt dann dir überlassen eine entsprechende Build-Pipeline für deine Skripte und weitere Elemente aufzubauen. Dies kann sich sehr zeitaufwendig gestalten, und es zwingt dich das Packen der Anwendung, sowie Minifizierung und weitere komplizierte Optimierungen von Hand aufzusetzen.
|
||||
|
||||
Im Gegensatz dazu kompiliert Astro automatisch dein Client-seitiges JavaScript für dich. Astro sendet nur die minimal notwendige Menge an JavaScript an den Browser, minifiziert, gepackt und optimiert für die Veröffentlichung. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Jekyll von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
|
||||
Im Gegensatz dazu kompiliert Astro automatisch dein Client-seitiges JavaScript für dich. Astro sendet nur die minimal notwendige Menge an JavaScript an den Browser, minifiziert, gepackt und optimiert für die Veröffentlichung. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Jekyll von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
|
||||
|
||||
## SvelteKit vs. Astro
|
||||
|
||||
|
|
@ -128,7 +128,7 @@ SvelteKit unterstützt sowohl statische Site-Generierung (Static Site Generation
|
|||
|
||||
### Leistungsvergleich SvelteKit vs. Astro
|
||||
|
||||
In den meisten Fällen werden Astro-Websites schneller laden als SvelteKit-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt.
|
||||
In den meisten Fällen werden Astro-Websites schneller laden als SvelteKit-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
|
||||
|
||||
SvelteKit unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. SvelteKit unterstützt mit [Page-Level Static und Zero-JavaScript Pages](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate) das Entfernen von JavaScript per Seite oder für die gesamte Anwendung. Wie auch immer, eine Unterstützung für die Anreicherung individueller Komponenten einer Seite ist nicht geplant. In Bezug auf Interaktivität auf einzelnen Seiten ist entprechend nur eine Entscheidung zwischen ganz oder gar nicht möglich.
|
||||
|
||||
|
|
@ -155,7 +155,7 @@ Next.js unterstützt sowohl statische Site-Generierung (Static Site Generation,
|
|||
|
||||
### Leistungsvergleich Next.js vs. Astro
|
||||
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als Next.js-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt.
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als Next.js-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
|
||||
|
||||
Next.js unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. Next.js verfügt über [Experimental Support](https://piccalil.li/blog/new-year-new-website/#heading-no-client-side-react-code) für vollständig statische, Null-JavaScript-Seiten. Wie auch immer, eine Unterstützung für die Anreicherung individueller Komponenten einer Seite ist nicht geplant. In Bezug auf Interaktivität auf einzelnen Seiten ist entprechend nur eine Entscheidung zwischen ganz oder gar nicht möglich.
|
||||
|
||||
|
|
@ -182,7 +182,7 @@ Nuxt unterstützt sowohl statische Site-Generierung (Static Site Generation, SSG
|
|||
|
||||
### Leistungsvergleich Nuxt vs. Astro
|
||||
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als Nuxt-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt.
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als Nuxt-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
|
||||
|
||||
Nuxt unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. Es besteht keine Möglichkeit dieses Verhalten abzuschalten.
|
||||
|
||||
|
|
@ -201,13 +201,13 @@ Ein wesentlicher Grund für diesen Leistungsunterschied liegt in Astros geringer
|
|||
|
||||
[VuePress](https://vuepress.vuejs.org/guide/) ist ein populärer Dokumentationssite-Renderer auf der Grundlage von Vue. VuePress verwendet Vue, um deine Website-UI zu generieren, während Astro in diesem Bereich React, Preact, Vue, Svelte, Solid und andere unterstützt - sowie auch eine an HTML angelehnte Komponenten-Syntax, die sich ähnlich verhält wie HTML + JSX.
|
||||
|
||||
VuePress wurde entwickelt, um Dokumentationswebsites zu erzeugen und bietet einige dokumentationsspezifische Features, über die Astro nicht verfügt. Stattdessen verfügst du in Astro über dokumentationsspezifische Features mittels einer offiziellen [`docs`](https://github.com/snowpackjs/astro/tree/main/examples/docs)-Vorlage, die du für deine Site verwenden kannst. Diese Website wurde unter Verwendung dieser Vorlage erstellt!
|
||||
VuePress wurde entwickelt, um Dokumentationswebsites zu erzeugen und bietet einige dokumentationsspezifische Features, über die Astro nicht verfügt. Stattdessen verfügst du in Astro über dokumentationsspezifische Features mittels einer offiziellen [`docs`](https://github.com/withastro/astro/tree/main/examples/docs)-Vorlage, die du für deine Site verwenden kannst. Diese Website wurde unter Verwendung dieser Vorlage erstellt!
|
||||
|
||||
Evan You (Erfinder von Vue) arbeitet zur Zeit an einer neuen Version von VuePress, genannt [VitePress](https://vitepress.vuejs.org/). Wenn du eine moderne Alternative zu VuePress suchst, [lies Evans Post](https://github.com/snowpackjs/astro/issues/1159#issue-974035962) darüber, warum VitePress hierfür eine bessere Option darstellen kann.
|
||||
Evan You (Erfinder von Vue) arbeitet zur Zeit an einer neuen Version von VuePress, genannt [VitePress](https://vitepress.vuejs.org/). Wenn du eine moderne Alternative zu VuePress suchst, [lies Evans Post](https://github.com/withastro/astro/issues/1159#issue-974035962) darüber, warum VitePress hierfür eine bessere Option darstellen kann.
|
||||
|
||||
### Leistungsvergleich VuePress vs. Astro
|
||||
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als VuePress-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt.
|
||||
In den meisten Fällen werden Astro-Websites deutlich schneller laden als VuePress-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
|
||||
|
||||
VuePress unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. Es besteht keine Möglichkeit dieses Verhalten abzuschalten.
|
||||
|
||||
|
|
@ -230,4 +230,4 @@ Zola verwendet [Tera](https://tera.netlify.app/), um deine Website zu rendern. A
|
|||
|
||||
Konzeptuell ist Zola auf Augenhöhe mit Astros "minimalistischem Einsatz von Client-seitigem JavaScript" bei der Web-Entwicklung. Zola und Astro bieten somit eine ähnliche Leistungsgrundlage durch ihre jeweilige Null-JavaScript-Strategie.
|
||||
|
||||
Sowohl Zola als auch Astro bieten Unterstützung beim Kompilieren, Packen und Minifizieren von JavaScript. Zola benötigt hierfür ein zusätzliches Werkzeug wie Webpack, um JavaScript zu packen und zu verarbeiten. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Zola von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
|
||||
Sowohl Zola als auch Astro bieten Unterstützung beim Kompilieren, Packen und Minifizieren von JavaScript. Zola benötigt hierfür ein zusätzliches Werkzeug wie Webpack, um JavaScript zu packen und zu verarbeiten. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Zola von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: Astro-Komponenten
|
||||
description: Eine Einführung in die .astro-Komponenten-Syntax.
|
||||
description: Einführung in die .astro-Komponenten-Syntax.
|
||||
---
|
||||
|
||||
**Astro-Komponenten** (Dateien mit der Endung `.astro`) sind die Grundlage des Server-seitigen Templating in Astro. Du kannst dir die Astro-Komponenten-Syntax als HTML - erweitert um JavaScript - vorstellen.
|
||||
|
|
@ -27,7 +27,7 @@ Zum Beispiel ist diese dreizeilige Datei eine gültige Astro-Komponente:
|
|||
</div>
|
||||
```
|
||||
|
||||
Eine Astro-Komponente repräsentiert einen Schnipsel HTML in deinem Projekt. Dies kann eine mehrfach verwendbare Komponente sein, oder eine vollständige Seite HTML einschließlich `<html>`-, `<head>`- und `<body>`-Elementen. Lies auch unsere Anleitung zu [Astro-Seiten](/core-concepts/astro-pages), um zu lernen wie du deine erste vollständige HTML-Seite mit Astro erzeugen kannst.
|
||||
Eine Astro-Komponente repräsentiert einen Schnipsel HTML in deinem Projekt. Dies kann eine mehrfach verwendbare Komponente sein, oder eine vollständige Seite HTML einschließlich `<html>`-, `<head>`- und `<body>`-Elementen. Lies auch unsere Anleitung zu [Astro-Seiten](/de/core-concepts/astro-pages), um zu lernen wie du deine erste vollständige HTML-Seite mit Astro erzeugen kannst.
|
||||
|
||||
**Jede Astro-Komponente muss ein HTML-Template beinhalten.** Auch wenn du deine Komponente auf vielfältige Weise erweitern kannst (siehe unten), bestimmt am Ende des Tages doch das HTML-Template, wie deine gerenderte Komponente aussehen wird.
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ Sass (eine Alternative zu CSS) ist ebenfalls verfügbar via `<style lang="scss">
|
|||
|
||||
Um dynamische Komponenten zu erzeugen, bringen wir die Idee eines Frontmatter-Komponenten-Skripts ein. [Frontmatter](https://jekyllrb.com/docs/front-matter/) ist ein in Markdown übliches Muster, bei dem Konfigurations- und Metadaten innerhalb einer Code-Begrenzung (`---`) am Anfang der Datei stehen. Astro bietet etwas Vergleichbares, jedoch mit vollständiger Unterstützung für JavaScript & TypeScript innerhalb deiner Komponenten.
|
||||
|
||||
Bedenke dass Astro eine Server-seitige Template-Sprache ist, also wird dein Komponenten-Skript während des Build ausgeführt, aber für den Browser wird nur das HTML gerendert. Um auch JavaScript an den Browser zu senden, kannst du ein `<script>`-Tag in deinem HTML-Template verwenden - oder du [konvertierst deine Komponente für die Verwendung einer bestimmten Frontend-Bibliothek](/core-concepts/component-hydration) wie React, Svelte, Vue etc.
|
||||
Bedenke dass Astro eine Server-seitige Template-Sprache ist, also wird dein Komponenten-Skript während des Build ausgeführt, aber für den Browser wird nur das HTML gerendert. Um auch JavaScript an den Browser zu senden, kannst du ein `<script>`-Tag in deinem HTML-Template verwenden - oder du [konvertierst deine Komponente für die Verwendung einer bestimmten Frontend-Bibliothek](/de/core-concepts/component-hydration) wie React, Svelte, Vue etc.
|
||||
|
||||
```astro
|
||||
---
|
||||
|
|
@ -115,7 +115,7 @@ import EineKomponente from './EineKomponente.astro';
|
|||
</div>
|
||||
```
|
||||
|
||||
📚 Du kannst auch Komponenten aus anderen Frontend-Bibliotheken wie React, Svelte, Vue und anderen importieren und verwenden. Lies unsere Anleitung zu [Partial Hydration](/core-concepts/component-hydration), um mehr zu erfahren.
|
||||
📚 Du kannst auch Komponenten aus anderen Frontend-Bibliotheken wie React, Svelte, Vue und anderen importieren und verwenden. Lies unsere Anleitung zu [Partial Hydration](/de/core-concepts/component-hydration), um mehr zu erfahren.
|
||||
|
||||
### Dynamische JSX-Ausdrücke
|
||||
|
||||
|
|
@ -252,7 +252,7 @@ Slots werden sogar noch mächtiger, wenn **benannte Slots** verwendet werden. An
|
|||
</MeineKomponente>
|
||||
```
|
||||
|
||||
Slots können auch **Rückfall-Platzhalter** rendern. Wenn keine passenden untergeordneten Elemente an einen `<slot>` weitergereicht werden, wird dieses `<slot>`-Element seine eigenen untergeordneten Platzhalter-Elemente rendern.
|
||||
Slots können auch **Fallback-Platzhalter** rendern. Wenn keine passenden untergeordneten Elemente an einen `<slot>` weitergereicht werden, wird dieses `<slot>`-Element seine eigenen untergeordneten Platzhalter-Elemente rendern.
|
||||
|
||||
```astro
|
||||
<!-- MeineKomponente.astro -->
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: Seiten
|
||||
description: Eine Einführung in Astro-Seiten, Komponenten die wie komplette Seiten funktionieren.
|
||||
title: Astro-Seiten
|
||||
description: Eine Einführung in Astro-Seiten - Komponenten die wie vollständige Seiten funktionieren.
|
||||
---
|
||||
|
||||
**Seiten** sind eine spezielle Art der [Astro-Komponente](/core-concepts/astro-components), die das Routing, das Laden von Daten und das Templating für eine Seite deiner Website erledigt. Du kannst sie dir wie eine einfache Astro-Komponente vorstellen - jedoch mit erweiterter Zuständigkeit.
|
||||
**Seiten** sind eine spezielle Art der [Astro-Komponente](/de/core-concepts/astro-components), die das Routing, das Laden von Daten und das Templating für eine Seite deiner Website erledigt. Du kannst sie dir wie eine einfache Astro-Komponente vorstellen - jedoch mit erweiterter Zuständigkeit.
|
||||
|
||||
Astro unterstützt Markdown für Content-lastige Seiten, wie Blog-Posts und Dokumentationen. Lies [Markdown-Inhalte](/guides/markdown-content), um mehr über das Schreiben von Seiten mit Markdown zu erfahren.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: Partial Hydration in Astro
|
||||
description: Lerne wie Partial Hydration unter Verwendung der "Insel-Architektur" in Astro funktioniert.
|
||||
description: Lerne wie Partial Hydration unter Verwendung der "Islands-Architecture" in Astro funktioniert.
|
||||
---
|
||||
|
||||
**Astro generiert jede Website standardmäßig mit Null Client-seitigem JavaScript.** Verwende irgendeine Frontend-UI-Bibliothek, die dir gefällt (React, Svelte, Vue etc.), und Astro wird deine Arbeit im Build-Prozess automatisch als HTML rendern und sämtliches JavaScript entfernen. Dies führt dazu, dass jede Seite standardmäßig schnell lädt.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: Layouts
|
||||
description: Eine Einführung in Layouts - eine Art Astro-Komponente, die für gemeinsame Layouts auf verschiedenen Seiten verwendet wird.
|
||||
description: Einführung in Layouts, eine Art der Astro-Komponente, die für gemeinsame Layouts auf verschiedenen Seiten verwendet wird.
|
||||
---
|
||||
|
||||
**Layouts** sind eine besondere Art der [Komponente](/core-concepts/astro-components) - sie können dir helfen gemeinsame Seiten-Layouts über dein Projekt verteilt zu nutzen.
|
||||
**Layouts** sind eine besondere Art [Komponente](/de/core-concepts/astro-components) - sie können dir helfen gemeinsame Seiten-Layouts über dein Projekt verteilt zu nutzen.
|
||||
|
||||
Layouts verhalten sich so, wie andere mehrfach verwendbare Astro-Komponenten auch. Es gibt keine neue Syntax oder API zu erlernen. Allerdings sind mehrfach verwendbare Layouts ein so weit verbreitetes Modell im Bereich der Web-Entwicklung, dass wir diese Anleitung verfasst haben, um dich bei der Verwendung zu unterstützen.
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ const {title} = Astro.props;
|
|||
</html>
|
||||
```
|
||||
|
||||
📚 Über das `<slot />`-Element lässt sich in Astro definieren, wo untergeordnete Elemente (die an das Layout übergeben werden) erscheinen sollen. Erfahre mehr darüber wie `<slot />` funktioniert in unserer [Anleitung zu Astro-Komponenten](/core-concepts/astro-components).
|
||||
📚 Über das `<slot />`-Element lässt sich in Astro definieren, wo untergeordnete Elemente (die an das Layout übergeben werden) erscheinen sollen. Erfahre mehr darüber wie `<slot />` funktioniert in unserer [Anleitung zu Astro-Komponenten](/de/core-concepts/astro-components).
|
||||
|
||||
Sobald du dein erstes Layout erstellt hast, kannst du es so verwenden, wie du jede andere Komponente in einer Seite verwenden würdest. Denke daran, dass dein Layout den gesamten Seitenaufbau enthält: `<html>`, `<head>`, und `<body>`. Du musst nur den Seiteninhalt hinzufügen.
|
||||
|
||||
|
|
@ -122,11 +122,11 @@ Für Markdown-Dateien ist ein Layout unerlässlich. Markdown-Dateien können ein
|
|||
|
||||
```markdown
|
||||
---
|
||||
title: Blog-Post
|
||||
title: Blogpost
|
||||
layout: ../layouts/PostLayout.astro
|
||||
---
|
||||
|
||||
Dieser Blog-Post wird innerhalb des `<PostLayout />`-Layout **gerendert**.
|
||||
Dieser Blogpost wird innerhalb des `<PostLayout />`-Layout **gerendert**.
|
||||
```
|
||||
|
||||
Markdown-Seiten übergeben immer eine oder mehrere `content`-Eigenschaften an ihr Layout. Dies ist sehr hilfreich, um Informationen über die Seite, einen Titel, Metadaten, eine Index-Tabelle, Kopfzeilen und anderes für die Seite zur Verfügung zu haben.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: Projektstruktur
|
||||
description: Lerne mit Astro ein Projekt zu strukturieren.
|
||||
description: Lerne wie die Projektstruktur in Astro aufgebaut ist.
|
||||
---
|
||||
|
||||
Astro verwendet eine dogmatische Verzeichnisstruktur für dein Projekt. Jedes Astro-Projekt muss die folgenden Verzeichnisse und Dateien enthalten:
|
||||
|
|
@ -10,7 +10,7 @@ Astro verwendet eine dogmatische Verzeichnisstruktur für dein Projekt. Jedes As
|
|||
- `public/*` - Deine Nicht-Code-Assets (Schriften, Icons etc.)
|
||||
- `package.json` - Ein Projekt-Manifest
|
||||
|
||||
Der einfachste Weg dein neues Projekt aufzusetzen, ist mittels `npm init astro`. Lies unsere [Installationsanleitung](/quick-start), um einen vollständigen Überblick darüber zu erhalten, wie ein Projekt automatisch (mit `npm init astro`) oder manuell aufgesetzt werden kann.
|
||||
Der einfachste Weg dein neues Projekt aufzusetzen, ist mittels `npm init astro`. Lies unsere [Installationsanleitung](/de/quick-start), um einen vollständigen Überblick darüber zu erhalten, wie ein Projekt automatisch (mit `npm init astro`) oder manuell aufgesetzt werden kann.
|
||||
|
||||
## Projektstruktur
|
||||
|
||||
|
|
@ -29,9 +29,9 @@ Der einfachste Weg dein neues Projekt aufzusetzen, ist mittels `npm init astro`.
|
|||
Das `src`-Verzeichnis beinhaltet den Großteil des Source-Code zu deinem Projekt. Dazu zählen:
|
||||
|
||||
- [Astro-Komponenten](/core-concepts/astro-components)
|
||||
- [Seiten](/core-concepts/astro-pages)
|
||||
- [Layoute](/core-concepts/layouts)
|
||||
- [Frontend-JS-Komponenten](/core-concepts/component-hydration)
|
||||
- [Astro-Seiten](/de/core-concepts/astro-pages)
|
||||
- [Layouts](/de/core-concepts/layouts)
|
||||
- [JavaScript-Komponenten](/de/core-concepts/component-hydration)
|
||||
- [Styling (CSS, Sass)](/guides/styling)
|
||||
- [Markdown](/guides/markdown-content)
|
||||
|
||||
|
|
@ -39,17 +39,17 @@ Astro hat vollständige Kontrolle darüber, wie diese Dateien verarbeitet, optim
|
|||
|
||||
### `src/components`
|
||||
|
||||
[Komponenten](/core-concepts/astro-components) sind mehrfach verwendbare Einheiten der UI deiner Seiten. Es wird empfohlen (aber dies ist nicht zwingend notwendig), Komponenten in diesem Verzeichnis anzulegen. Wie diese darin strukturiert sind, kannst du frei entscheiden.
|
||||
[Komponenten](/de/core-concepts/astro-components) sind mehrfach verwendbare Einheiten der UI deiner Seiten. Es wird empfohlen (aber dies ist nicht zwingend notwendig), Komponenten in diesem Verzeichnis anzulegen. Wie diese darin strukturiert sind, kannst du frei entscheiden.
|
||||
|
||||
Deine Nicht-Astro-Komponenten (React, Preact, Svelte, Vue etc.) können ebenfalls im `src/components`-Verzeichnis abgelegt werden. Astro wird automatisch alle Komponeneten als HTML rendern, solange du nicht mittels [partieller Anreicherung](/core-concepts/component-hydration) eine bestimmte Frontend-Komponente aktiviert hast.
|
||||
Deine Nicht-Astro-Komponenten (React, Preact, Svelte, Vue etc.) können ebenfalls im `src/components`-Verzeichnis abgelegt werden. Astro wird automatisch alle Komponeneten als HTML rendern, solange du nicht mittels [Partial Hydration](/de/core-concepts/component-hydration) eine bestimmte Frontend-Komponente aktiviert hast.
|
||||
|
||||
### `src/layouts`
|
||||
|
||||
[Layouts](/core-concepts/layouts) sind mehrfach verwendbare Komponenten für die Gestaltung einzelner Seiten. Es wird empfohlen (aber dies ist nicht zwingend notwendig) Layout-Komponenten in diesem Verzeichnis anzulegen. Wie diese darin strukturiert sind, kannst du frei entscheiden.
|
||||
[Layouts](/de/core-concepts/layouts) sind mehrfach verwendbare Komponenten für die Gestaltung einzelner Seiten. Es wird empfohlen (aber dies ist nicht zwingend notwendig) Layout-Komponenten in diesem Verzeichnis anzulegen. Wie diese darin strukturiert sind, kannst du frei entscheiden.
|
||||
|
||||
### `src/pages`
|
||||
|
||||
[`src/pages`](/core-concepts/astro-pages) enthält alle Seiten (`.astro` und `.md` werden unterstützt) für deine Website. Es ist **zwingend** notwendig, dass du deine Seiten in diesem Verzeichnis anlegst.
|
||||
[`src/pages`](/de/core-concepts/astro-pages) enthält alle Seiten (`.astro` und `.md` werden unterstützt) für deine Website. Es ist **zwingend** notwendig, dass du deine Seiten in diesem Verzeichnis anlegst.
|
||||
|
||||
### `public/`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: Routing
|
||||
description: Eine Einführung in das Routing mit Astro.
|
||||
description: Einführung in das Routing in Astro.
|
||||
---
|
||||
|
||||
Astro verwendet **Datei-basiertes Routing**, um während des Build-Prozesses - entsprechend der Datei-Struktur im `src/pages`-Verzeichnis deines Projekts - die gültigen Routen und URL festzulegen. Wenn eine Datei zum `src/pages`-Verzeichnis deines Projekts hinzugefügt wird, ist sie basierend auf ihrem Dateinmanen automatisch über die entsprechende Route mit der entsprechenden URL erreichbar.
|
||||
|
|
@ -83,11 +83,11 @@ Für ein `real-world`-Beispiel würdest du den `Github File Viewer` folgenderma
|
|||
/[org]/[repo]/tree/[branch]/[...file]
|
||||
```
|
||||
|
||||
In diesem Beispiel würde eine Abfrage von `/snowpackjs/astro/tree/main/docs/public/favicon.svg` folgende Parameter für die Seite verfügbar machen:
|
||||
In diesem Beispiel würde eine Abfrage von `/withastro/astro/tree/main/docs/public/favicon.svg` folgende Parameter für die Seite verfügbar machen:
|
||||
|
||||
```js
|
||||
{
|
||||
org: 'snowpackjs',
|
||||
org: 'withastro',
|
||||
repo: 'astro',
|
||||
branch: 'main',
|
||||
file: 'docs/public/favicon.svg'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: Einführung
|
||||
title: Erste Schritte
|
||||
description: Eine einfache Einführung in Astro
|
||||
lang: de
|
||||
---
|
||||
|
|
@ -17,9 +17,9 @@ Um in fünf einfachen Schritten mit Astro loszulegen, lies [unsere Schnellstart-
|
|||
|
||||
Alternativ kannst du unsere [Installationsanleitung](/de/installation) lesen, um eine ausführlichere Schritt-für-Schritt-Anleitung zu erhalten.
|
||||
|
||||
### Beispiel-Projekte
|
||||
### Beispielprojekte
|
||||
|
||||
Falls du Astro lieber anhand von Beispielen kennenlernen möchtest, sieh dir unsere [vollständige Beispiel-Bibliothek](https://github.com/snowpackjs/astro/tree/main/examples) auf GitHub an.
|
||||
Falls du Astro lieber anhand von Beispielen kennenlernen möchtest, sieh dir unsere [vollständige Beispiel-Bibliothek](https://github.com/withastro/astro/tree/main/examples) auf GitHub an.
|
||||
|
||||
Du kanst jedes dieser Beispiele lokal auf deinem Rechner ausprobieren, indem du `npm init astro` mit der CLI-Kennzeichnung `--template` im Terminal aufrufst. Die Kennzeichnung `--template` unterstützt auch externe Vorlagen und Vorlagen der Community.
|
||||
|
||||
|
|
@ -33,14 +33,14 @@ npm init astro -- --template [GITHUB_NAME]/[REPO_NAME]/pfad/zur/vorlage
|
|||
|
||||
### Online-Playgrounds
|
||||
|
||||
Falls du Astro gerne in deinem Browser ausprobieren willst, kannst du einen Online-Code-Editor wie z. B. Stackblitz, CodeSandbox, Gitpod oder GitHub Codespaces verwenden. Nutze den "Open in Stackblitz"-Link zu einem beliebigen Besipiel aus unserer [Beispiel-Bibliothek](https://github.com/snowpackjs/astro/tree/main/examples), oder [klicke hier](https://stackblitz.com/fork/astro), um ein neues Projekt in [Stackblitz](https://stackblitz.com/fork/astro) aufzusetzen.
|
||||
Falls du Astro gerne in deinem Browser ausprobieren willst, kannst du einen Online-Code-Editor wie z. B. Stackblitz, CodeSandbox, Gitpod oder GitHub Codespaces verwenden. Nutze den "Open in Stackblitz"-Link zu einem beliebigen Besipiel aus unserer [Beispiel-Bibliothek](https://github.com/withastro/astro/tree/main/examples), oder [klicke hier](https://stackblitz.com/fork/astro), um ein neues Projekt in [Stackblitz](https://stackblitz.com/fork/astro) aufzusetzen.
|
||||
|
||||
## Astro lernen
|
||||
|
||||
Verschiedene Menschen mit unterschiedlichen Hintergründen und unterschiedlichen Lernansätzen kommen zu Astro. Gleichgültig ob du einen theoretischen oder einen praktischen Ansatz bevorzugst, wir hoffen, dass dieser Abschnitt hilfreich für dich ist.
|
||||
|
||||
- Falls du **praktisches Lernen** bevorzugst, starte direkt mit ein Beispiel aus unserer [Beispiel-Liste](https://github.com/snowpackjs/astro/tree/main/examples).
|
||||
- Falls du bevorzugst **Schritt für Schritt zu lernen**, starte mit unseren [grundlegenden Konzepten und Anleitungen](/core-concepts/project-structure).
|
||||
- Falls du **praktisches Lernen** bevorzugst, starte direkt mit ein Beispiel aus unserer [Beispiel-Liste](https://github.com/withastro/astro/tree/main/examples).
|
||||
- Falls du bevorzugst **Schritt für Schritt zu lernen**, starte mit unseren [grundlegenden Konzepten und Anleitungen](/de/core-concepts/project-structure).
|
||||
|
||||
Wie jede unbekannte Technik, bringt Astro eine gewisse Lernkurve mit sich. Wir sind jedoch sicher, dass du mit ein bisschen Übung und Geduld schnell lernen _wirst_, wie Astro funktioniert.
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ Wie jede unbekannte Technik, bringt Astro eine gewisse Lernkurve mit sich. Wir s
|
|||
|
||||
Wenn du anfängst mit Astro zu arbeiten, wirst du viele Dateien mit der Dateiendung `.astro` sehen. Das ist **Astros Komponenten-Syntax**: ein spezielles, HTML-ähnliches Dateiformat, welches Astro für Vorlagen benutzt. Es wurde in Anlehnung an HTML und JSX entworfen und sollte allen, die mit diesen Formaten Erfahrung haben, bekannt vorkommen.
|
||||
|
||||
Unsere unterstützende Anleitung zu [Astro-Komponenten](/core-concepts/astro-components) ist eine gute Einführung in die Astro-Syntax - und der beste Weg sie zu lernen.
|
||||
Unsere unterstützende Anleitung zu [Astro-Komponenten](/de/core-concepts/astro-components) ist eine gute Einführung in die Astro-Syntax - und der beste Weg sie zu lernen.
|
||||
|
||||
### API-Referenz
|
||||
|
||||
|
|
@ -64,11 +64,11 @@ Der [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter-Account ist die
|
|||
|
||||
Zusätzlich veröffentlichen wir alle Ankündigungen in unserer [Discord-Community](https://astro.build/chat) im `#announcements`-Channel.
|
||||
|
||||
Nicht jedes Astro-Release verdient einen eigenen Blogpost, aber du kannst ein detailliertes Log aller Änderungen für jedes Release im [`CHANGELOG.md` des Astro Repository](https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md) nachlesen.
|
||||
Nicht jedes Astro-Release verdient einen eigenen Blogpost, aber du kannst ein detailliertes Log aller Änderungen für jedes Release im [`CHANGELOG.md` des Astro Repository](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) nachlesen.
|
||||
|
||||
## Fehlt etwas?
|
||||
|
||||
Falls etwas in der Dokumentation fehlt, oder falls du einen bestimmten Teil verwirrend findest, [erstelle bitte ein Issue](https://github.com/snowpackjs/astro/issues/new/choose) mit deinen Verbesserungsvorschlägen oder tweete an den [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter-Account. Wir freuen uns, von dir zu hören!
|
||||
Falls etwas in der Dokumentation fehlt, oder falls du einen bestimmten Teil verwirrend findest, [erstelle bitte ein Issue](https://github.com/withastro/astro/issues/new/choose) mit deinen Verbesserungsvorschlägen oder tweete an den [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter-Account. Wir freuen uns, von dir zu hören!
|
||||
|
||||
## Credit
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Installation
|
|||
description: So installierst du Astro mit NPM, PNPM oder Yarn.
|
||||
---
|
||||
|
||||
Es gibt verschiedene Möglichkeiten Astro in einem neuen Projekt zu installieren.
|
||||
Es gibt verschiedene Möglichkeiten Astro mit einem neuen Projekt zu installieren.
|
||||
|
||||
## Vorbereitungen
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ yarn create astro
|
|||
pnpm create astro
|
||||
```
|
||||
|
||||
Der [`create-astro`](https://github.com/snowpackjs/astro/tree/main/packages/create-astro)-Assistent lässt dich aus einer Reihe von [Start-Vorlagen](https://github.com/snowpackjs/astro/tree/main/examples) auswählen. Alternativ könntest du auch dein eigenes Astro-Projekt direkt aus GitHub heraus importieren.
|
||||
Der [`create-astro`](https://github.com/withastro/astro/tree/main/packages/create-astro)-Assistent lässt dich aus einer Reihe von [Start-Vorlagen](https://github.com/withastro/astro/tree/main/examples) auswählen. Alternativ könntest du auch dein eigenes Astro-Projekt direkt aus GitHub heraus importieren.
|
||||
|
||||
```bash
|
||||
# Hinweis: Ersetze "mein-astro-projekt" durch den Namen deines Projekts.
|
||||
|
|
@ -171,8 +171,8 @@ Geschafft! Du kannst jetzt mit dem Entwickeln beginnen!
|
|||
|
||||
Wir möchten dich ermutigen, dir etwas Zeit zu nehmen, um mit der Art und Weise vertraut zu werden, wie Astro funktioniert. Am besten befasst du dich weitergehend mit der Dokumentation. Hier ein paar Empfehlungen:
|
||||
|
||||
📚 Lerne mehr über Astros Projektstruktur in unserer [Anleitung zur Projektstruktur](/core-concepts/project-structure)
|
||||
📚 Lerne mehr über die Projektstruktur in Astro in unserem [Artikel zur Projektstruktur](/de/core-concepts/project-structure)
|
||||
|
||||
📚 Lerne mehr über Astros Komponenten-Syntax in unserer [Astro-Komponenten-Anleitung](/core-concepts/astro-components)
|
||||
📚 Lerne mehr über die Komponenten-Syntax in Astro in unserem [Artikel zu Astro-Komponenten](/de/core-concepts/astro-components)
|
||||
|
||||
📚 Lerne mehr über Astros dateibasiertes Routing in unserer [Routing-Anleitung](core-concepts/astro-pages)
|
||||
📚 Lerne mehr über das dateibasierte Routing in Astro in unserem [Artikel zu Astro-Seiten](/de/core-concepts/astro-pages) und unserem [Artikel über Routing](/de/core-concepts/routing).
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ In diesem Beispiel ist `PUBLIC_IRGENDWER` verfügbar als ìmport.meta.env.PUBLIC
|
|||
|
||||
## Dateiendungen
|
||||
|
||||
In Astro v21.0 muss auf Dateien mit Nennung ihrer tatsächlichen Erweiterung verwiesen werden, exakt so wie sie gespeichert sind.
|
||||
In Astro v21.0 muss auf Dateien unter Nennung ihrer tatsächlichen Erweiterung verwiesen werden - exakt so wie sie gespeichert sind.
|
||||
|
||||
```tsx
|
||||
// Div.tsx
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ Export - fertig zum Veröffentlichen:
|
|||
npm run build
|
||||
```
|
||||
|
||||
Um mehr über den Installationsprozess und den ersten Einsatz von Astro zu lernen [lies unsere Installationsanleitung](de/installation).
|
||||
Um mehr über den Installationsprozess und den ersten Einsatz von Astro zu lernen [lies unsere Installationsanleitung](/de/installation).
|
||||
|
||||
Wenn du es bevorzugst anhand eines Beispiels zu lernen, werfe einen Blick auf die [komplette Liste der Beispiele](https://github.com/snowpackjs/astro/tree/main/examples) auf GitHub.
|
||||
Wenn du es bevorzugst anhand eines Beispiels zu lernen, werfe einen Blick auf die [komplette Liste der Beispiele](https://github.com/withastro/astro/tree/main/examples) auf GitHub.
|
||||
Du kannst jedes dieser Beispiele ausprobieren, indem du `npm init astro -- --template "BEISPIEL_NAME"` ausführst.
|
||||
|
||||
## Starte dein Projekt
|
||||
|
|
@ -71,8 +71,8 @@ Geschafft! Du kannst jetzt mit dem Entwickeln beginnen!
|
|||
|
||||
Wir möchten dich ermutigen, dir etwas Zeit zu nehmen, um mit der Art und Weise vertraut zu werden, wie Astro funktioniert. Am besten befasst du dich weitergehend mit der Dokumentation. Hier ein paar Empfehlungen:
|
||||
|
||||
📚 Lerne mehr über Astros Projektstruktur in unserer [Anleitung zur Projektstruktur](/core-concepts/project-structure)
|
||||
📚 Lerne mehr über die Projektstruktur in Astro in unserem [Artikel zur Projektstruktur](/de/core-concepts/project-structure)
|
||||
|
||||
📚 Lerne mehr über Astros Komponenten-Syntax in unserer [Astro-Komponenten-Anleitung](/core-concepts/astro-components)
|
||||
📚 Lerne mehr über die Komponenten-Syntax in Astro in unserem [Artikel zu Astro-Komponenten](/de/core-concepts/astro-components)
|
||||
|
||||
📚 Lerne mehr über Astros dateibasiertes Routing in unserer [Routing-Anleitung](core-concepts/astro-pages)
|
||||
📚 Lerne mehr über das dateibasierte Routing in Astro in unserem [Artikel zu Astro-Seiten](/de/core-concepts/astro-pages) und unserem [Artikel über Routing](/de/core-concepts/routing).
|
||||
|
|
|
|||
Loading…
Reference in a new issue