From f3480efaae4a1ff6c4d785cb390764f0da1eaa6d Mon Sep 17 00:00:00 2001
From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com>
Date: Sun, 12 Oct 2025 11:37:36 +0200
Subject: [PATCH 01/20] Create index page: section 4 of 6
---
.../docs/de/tutorial/4-layouts/index.mdx | 37 +++++++++++++++++++
1 file changed, 37 insertions(+)
create mode 100644 src/content/docs/de/tutorial/4-layouts/index.mdx
diff --git a/src/content/docs/de/tutorial/4-layouts/index.mdx b/src/content/docs/de/tutorial/4-layouts/index.mdx
new file mode 100644
index 0000000000000..8c102acc5b27e
--- /dev/null
+++ b/src/content/docs/de/tutorial/4-layouts/index.mdx
@@ -0,0 +1,37 @@
+---
+type: tutorial
+unitTitle: Zeit und Energie sparen mit wiederverwendbaren Seiten-Layouts
+title: 'Check-in: Einheit 4 – Layouts'
+description: >-
+ Tutorial: Erstelle deinen ersten Astro-Blog —
+ Verwende Astro-Layouts, um gemeinsame Elemente und Styles über deine Seiten und Blog-Beiträge hinweg zu teilen
+i18nReady: true
+head:
+ - tag: title
+ content: 'Blog-Tutorial erstellen: Einheit 4 – Layouts | Doku'
+---
+
+import Box from '~/components/tutorial/Box.astro';
+import Checklist from '~/components/Checklist.astro';
+
+Jetzt, da du mit Komponenten bauen kannst, ist es Zeit, eigene Layouts zu erstellen!
+
+## Ein Blick nach vorne
+
+In dieser Einheit erstellst du Layouts, um gemeinsame Elemente und Styles über deine Seiten und Blog-Beiträge hinweg zu teilen.
+
+Dazu wirst du:
+
+- Wiederverwendbare Layout-Komponenten erstellen
+- Inhalte mit `` an deine Layouts übergeben
+- Daten aus Markdown-Frontmatter an deine Layouts übergeben
+- Mehrere Layouts verschachteln
+
+
+
+## Checkliste
+
+
+- [ ] Ich bin bereit, mein Seiten-Design mit Layouts auf die nächste Stufe zu bringen!
+
+
From b241adea446f7036d67b27d98bc2a206ec89cccd Mon Sep 17 00:00:00 2001
From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com>
Date: Sun, 12 Oct 2025 11:44:54 +0200
Subject: [PATCH 02/20] Create page 1: section 4 of 6
---
src/content/docs/de/tutorial/4-layouts/1.mdx | 229 +++++++++++++++++++
1 file changed, 229 insertions(+)
create mode 100644 src/content/docs/de/tutorial/4-layouts/1.mdx
diff --git a/src/content/docs/de/tutorial/4-layouts/1.mdx b/src/content/docs/de/tutorial/4-layouts/1.mdx
new file mode 100644
index 0000000000000..86c5e77ac150f
--- /dev/null
+++ b/src/content/docs/de/tutorial/4-layouts/1.mdx
@@ -0,0 +1,229 @@
+---
+type: tutorial
+title: Erstelle dein erstes Layout
+description: |-
+ Tutorial: Erstelle deinen ersten Astro-Blog —
+ Refaktoriere gemeinsame Elemente in ein wiederverwendbares Seiten-Layout
+i18nReady: true
+---
+
+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';
+
+
+ - Refaktoriere gemeinsame Elemente in ein Seiten-Layout
+ - Verwende ein Astro-``-Element, um Seiteninhalte innerhalb eines Layouts zu platzieren
+ - Übergib seiten-spezifische Werte als Props an dein Layout
+
+
+Du hast noch einige Astro-Komponenten, die auf jeder Seite wiederholt gerendert werden. Es ist Zeit für eine weitere Refaktorierung, um ein gemeinsames Seiten-Layout zu erstellen!
+
+## Erstelle deine erste Layout-Komponente
+
+
+1. Erstelle eine neue Datei unter `src/layouts/BaseLayout.astro`. (Du musst vorher einen neuen Ordner `layouts` anlegen.)
+
+2. Kopiere den **gesamten Inhalt** von `index.astro` in deine neue Datei `BaseLayout.astro`.
+
+ ```astro title="src/layouts/BaseLayout.astro"
+ ---
+ import Header from '../components/Header.astro';
+ import Footer from '../components/Footer.astro';
+ import '../styles/global.css';
+ const pageTitle = "Startseite";
+ ---
+
+
+
+
+
+
+ {pageTitle}
+
+
+
+
{pageTitle}
+
+
+
+
+ ```
+
+
+## Verwende dein Layout auf einer Seite
+
+
+3. Ersetze den Code in `src/pages/index.astro` durch Folgendes:
+
+ ```astro title="src/pages/index.astro"
+ ---
+ import BaseLayout from '../layouts/BaseLayout.astro';
+ const pageTitle = "Startseite";
+ ---
+
+
Mein großartiger Blog-Untertitel
+
+ ```
+
+4. Prüfe die Vorschau im Browser erneut, um zu sehen, was sich geändert hat (Spoiler: vielleicht *nicht* viel).
+
+5. Füge ein ``-Element in `src/layouts/BaseLayout.astro` direkt oberhalb des Footer-Elements hinzu, und prüfe dann die Vorschau deiner Home-Seite, um zu sehen, was sich diesmal tatsächlich geändert hat!
+
+ ```astro title="src/layouts/BaseLayout.astro" ins={18}
+ ---
+ import Header from '../components/Header.astro';
+ import Footer from '../components/Footer.astro';
+ import '../styles/global.css';
+ const pageTitle = "Startseite";
+ ---
+
+
+
+
+
+
+ {pageTitle}
+
+
+
+
{pageTitle}
+
+
+
+
+
+ ```
+
+
+Das ``-Element ermöglicht es, **Kind-Inhalte** einzufügen (oder „einzuschieben“), die zwischen den öffnenden und schließenden ``-Tags in jede `Component.astro`-Datei geschrieben werden.
+
+## Übergib seiten-spezifische Werte als Props
+
+
+6. Übergib den Seitentitel von `index.astro` an dein Layout über ein Komponenten-Attribut:
+
+ ```astro title="src/pages/index.astro" 'pageTitle={pageTitle}'
+ ---
+ import BaseLayout from '../layouts/BaseLayout.astro';
+ const pageTitle = "Startseite";
+ ---
+
+
Mein großartiger Blog-Untertitel
+
+ ```
+
+7. Passe das Skript deiner `BaseLayout.astro`-Komponente an, sodass es den Seitentitel über `Astro.props` erhält, anstatt ihn als Konstante zu definieren.
+
+ ```astro title="src/layouts/BaseLayout.astro" del={5} ins={6}
+ ---
+ import Header from '../components/Header.astro';
+ import Footer from '../components/Footer.astro';
+ import '../styles/global.css';
+ const pageTitle = "Startseite";
+ const { pageTitle } = Astro.props;
+ ---
+ ```
+
+8. Prüfe die Browser-Vorschau, um sicherzustellen, dass sich der Seitentitel nicht verändert hat. Er wird nun dynamisch gerendert, und jede einzelne Seite kann jetzt ihren eigenen Titel an das Layout übergeben.
+
+
+
+
+## Probiere es selbst – Verwende dein Layout überall
+
+**Refaktoriere** deine anderen Seiten (`blog.astro` und `about.astro`), sodass sie dein neues ``-Element verwenden, um die gemeinsamen Seitenelemente zu rendern.
+
+Denk daran:
+
+- Übergib einen Seitentitel als Prop über ein Komponenten-Attribut.
+
+- Lass das Layout für das HTML-Rendering aller gemeinsamen Elemente verantwortlich sein.
+
+- Verschiebe vorhandene `