diff --git a/src/content/docs/de/tutorial/0-introduction/1.mdx b/src/content/docs/de/tutorial/0-introduction/1.mdx deleted file mode 100644 index 42d9798ef63ad..0000000000000 --- a/src/content/docs/de/tutorial/0-introduction/1.mdx +++ /dev/null @@ -1,59 +0,0 @@ ---- -type: tutorial -title: Über dieses Tutorial -description: Wie du mit dem Tutorial "Baue deinen ersten Astro-Blog" anfangen kannst. -i18nReady: true ---- -import Checklist from '~/components/Checklist.astro'; -import Box from '~/components/tutorial/Box.astro'; - - -## Was muss ich wissen, um loszulegen? - -Wenn du ein paar Grundkenntnisse in **HTML**, **Markdown**, **CSS** und ein wenig **JavaScript** hast, dann kannst du direkt loslegen. -Du kannst das gesamte Tutorial abschließen, indem du den Anweisungen folgst. Astro ist für alle da! 🧑‍🚀 👩‍🚀 👨‍🚀 - -Außerdem brauchst du einen [GitHub](https://github.com)-Account (oder etwas Vergleichbares), um dein Projekt im Internet zu veröffentlichen. - -
-Wie kann ich die Checklisten am Ende jedes Kapitels nutzen? - -Du hakst sie einfach ab! - -Am Ende jeder Seite befinden sich anklickbare Checklisten mit den Aufgaben, die du nun lösen können solltest. Hake diese Punkte ab, um deine Fortschritte im Tutorial-Tracker verfolgen zu können. -Der Tracker ist optional, kann dir aber dabei helfen, den Einstieg an der richtigen Stelle wieder zu finden, wenn du das Tutorial in mehreren Sitzungen abschließt. -Du kannst auch einige Punkte der Checkliste erst mal nicht abhaken, als Erinnerung, falls du später zurückkehren möchtest. -(Diese Daten werden nur im lokalen Speicher deines Browsers gespeichert und nirgendwo sonst. Es werden keine Daten von Astro gesammelt.) - -
- -
-Einheit 1 behandelt Themen, die ich schon kenne. Kann ich sie überspringen? - -Du kannst die Lektionen von [Einheit 1](/de/tutorial/1-setup/) nutzen, um sicherzugehen, dass du die Entwicklungstools und Accounts hast, die du brauchst, um das Tutorial abzuschließen. Die Einheit begleitet dich dabei, dein erstes Astro-Projekt zu erstellen, auf GitHub zu speichern und auf Netlify zu veröffentlichen. - -Wenn du [ein neues, leeres Astro-Projekt erstellst](/de/install-and-setup/) und mit deinem Setup bereits vertraut bist, kannst du diese Einheit aber überspringen und direkt zu [Einheit 2](/de/tutorial/2-pages/) gehen, wo du neue Seiten für dein Projekt erstellst. -
- -
-Was, wenn ich Hilfe brauche oder mehr über Astro erfahren will? - -Unser [Astro-Discord-Server](https://astro.build/chat) ist der beste Ort dafür! - -In unserem Support-Kanal kannst du Fragen stellen, oder du kannst in `#general` oder `#off-topic` "Hallo" sagen und chatten. -
- -
-Wo kann ich Feedback zu diesem Tutorial geben? - -Dieses Tutorial ist ein Projekt unseres Docs-Teams. Du kannst uns auf Discord im `#docs`-Kanal finden oder direkt ein Issue im [Docs-Repository](https://github.com/withastro/docs/issues) erstellen. -
- - - -## Checkliste für die nächsten Schritte - - -- [ ] Ich bin bereit loszulegen! - - diff --git a/src/content/docs/de/tutorial/3-components/1.mdx b/src/content/docs/de/tutorial/3-components/1.mdx new file mode 100644 index 0000000000000..008d6d9e80bc1 --- /dev/null +++ b/src/content/docs/de/tutorial/3-components/1.mdx @@ -0,0 +1,156 @@ +--- +type: tutorial +title: Erstelle eine wiederverwendbare Navigationskomponente +description: |- + Tutorial: Baue deinen ersten Astro-Blog — + Ersetze Elemente, die auf mehreren Seiten wiederholt werden, durch eine wiederverwendbare Komponente +i18nReady: true +--- + +import Badge from '~/components/Badge.astro'; +import Box from '~/components/tutorial/Box.astro'; +import Checklist from '~/components/Checklist.astro'; +import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; +import Option from '~/components/tutorial/Option.astro'; +import PreCheck from '~/components/tutorial/PreCheck.astro'; +import { Steps } from '@astrojs/starlight/components'; + +Nun, da du denselben HTML-Code auf mehreren Seiten deiner Astro-Website wiederholt hast, ist es an der Zeit, diesen doppelten Inhalt durch eine wiederverwendbare Astro-Komponente zu ersetzen! + + + - Erstelle einen neuen Ordner für Komponenten + - Baue eine Astro-Komponente, um deine Navigationslinks anzuzeigen + - Ersetze den bestehenden HTML-Code durch eine neue, wiederverwendbare Navigationskomponente + + +## Erstelle einen neuen `src/components/`-Ordner + +Um `.astro`-Dateien aufzunehmen, die HTML generieren, aber keine neuen Seiten auf deiner Website werden, benötigst du einen neuen Ordner in deinem Projekt: `src/components/`. + +## Erstelle eine Navigationskomponente + + +1. Erstelle eine neue Datei: `src/components/Navigation.astro`. + +2. Kopiere deine Links für die Navigation zwischen den Seiten aus dem oberen Bereich einer beliebigen Seite und füge sie in deine neue Datei `Navigation.astro` ein: + + ```astro title="src/components/Navigation.astro" "---" + --- + --- + Home + Über mich + Blog + ``` + :::tip + Wenn im Frontmatter deiner `.astro`-Datei nichts steht, musst du auch die Code-Abgrenzung nicht schreiben. Du kannst sie jederzeit wieder hinzufügen, wenn du sie brauchst. + ::: + + +### Importieren und Verwenden von Navigation.astro + + +1. Gehe zurück zu `index.astro` und importiere deine neue Komponente innerhalb der Code-Abgrenzung: + + ```astro title="src/pages/index.astro" ins={2} + import "../styles/global.css"; + + const pageTitle = "Home Page"; + --- + import Navigation from '../components/Navigation.astro'; + --- + ``` + +2. Ersetze dann darunter die vorhandenen Navigations-HTML-Link-Elemente durch die neu importierte Navigationskomponente: + + ```astro title="src/pages/index.astro" del={1-3} ins={4} + Home + Über mich + Blog + + ``` + +3. Überprüfe die Vorschau in deinem Browser und stelle fest, dass sie genau gleich aussehen sollte … und das ist genau das, was du erreichen wolltest! + + +Deine Website enthält nun denselben HTML-Code wie zuvor. Aber jetzt werden diese drei Zeilen Code durch deine ``-Komponente bereitgestellt. + + + +## Probiere es selbst aus - Füge Navigation zum Rest deiner Website hinzu + +Importiere die ``-Komponente und verwende sie auf den anderen beiden Seiten deiner Website (`about.astro` und `blog.astro`) mit derselben Methode. + +Vergiss nicht, +- eine Import-Anweisung am Anfang des Komponenten-Skripts, innerhalb der Code-Abgrenzung, hinzuzufügen. +- den vorhandenen Code durch die Navigationskomponente zu ersetzen. + + + +:::note +Wenn du deinen Code umstrukturierst, aber das Aussehen deiner Seite im Browser nicht veränderst, **refaktorisierst** du. In dieser Einheit wirst du mehrmals **refaktorisieren**, indem du Teile deines Seiten-HTMLs durch Komponenten ersetzt. + +Das ermöglicht es dir, schnell mit beliebigem funktionierenden Code zu beginnen, der oft in deinem Projekt dupliziert wird. Dann kannst du das Design deines bestehenden Codes schrittweise verbessern, ohne das äußere Erscheinungsbild deiner Website zu verändern. +::: + + + + +### Teste dein Wissen + + +1. Das kannst du tun, wenn Elemente auf mehreren Seiten wiederholt werden: + + + + + + +2. Astro-Komponenten sind: + + + + + + +3. Astro-Komponenten erstellen automatisch eine neue Seite auf deiner Website, wenn du … + + + + + + + + + +## Checkliste + + +- [ ] Ich kann Inhalte in wiederverwendbare Komponenten umwandeln. +- [ ] Ich kann eine neue Komponente zu einer `.astro`-Seite hinzufügen. + + + + +### Ressourcen + +- [Mehr über Astro-Komponenten](/de/basics/astro-components/) + +- [Refactoring](https://refactoring.com/) diff --git a/src/content/docs/de/tutorial/3-components/2.mdx b/src/content/docs/de/tutorial/3-components/2.mdx new file mode 100644 index 0000000000000..82c7e5518fbd7 --- /dev/null +++ b/src/content/docs/de/tutorial/3-components/2.mdx @@ -0,0 +1,228 @@ +--- +type: tutorial +title: Erstelle eine Social-Media-Fußzeile +description: |- + Tutorial: Baue deinen ersten Astro-Blog — + Erstelle eine neue Komponente von Grund auf und füge sie dann zu deinen Seiten hinzu +i18nReady: true +--- + +import Checklist from '~/components/Checklist.astro'; +import Box from '~/components/tutorial/Box.astro'; +import MultipleChoice from '~/components/tutorial/MultipleChoice.astro'; +import Option from '~/components/tutorial/Option.astro'; +import PreCheck from '~/components/tutorial/PreCheck.astro'; +import { Steps } from '@astrojs/starlight/components'; + + + - Erstelle eine Fußzeilenkomponente + - Erstelle und übergebe Props an eine Social-Media-Komponente + + +Jetzt, wo du Astro-Komponenten auf einer Seite verwendet hast, ist es an der Zeit, eine Komponente innerhalb einer anderen Komponente zu verwenden! + +## Erstelle eine Fußzeilenkomponente + +1. Erstelle eine neue Datei unter `src/components/Footer.astro`. + +2. Kopiere den folgenden Code in die neue `Footer.astro`-Datei. + + ```astro title="src/components/Footer.astro" + --- + const platform = "github"; + const username = "withastro"; + --- + +
+

Erfahre mehr über meine Projekte auf {platform}!

+
+ ``` + + +### Importiere und verwende `Footer.astro` + + +1. Füge die folgende Importanweisung zum Frontmatter in jeder deiner drei Astro-Seiten (`index.astro`, `about.astro` und `blog.astro`) hinzu: + + ```js + import Footer from '../components/Footer.astro'; + ``` + +2. Füge eine neue `