Skip to content

Commit 01c192f

Browse files
randomguy-2650yanthomasdevtrueberrylesslouisescher
authored
i18n(de): Complete section 4 of the tutorial (#12544)
Co-authored-by: Yan <[email protected]> Co-authored-by: Felix Schneider <[email protected]> Co-authored-by: Louis Escher <[email protected]>
1 parent fb42152 commit 01c192f

File tree

4 files changed

+606
-0
lines changed

4 files changed

+606
-0
lines changed

‎src/content/docs/de/tutorial/4-layouts/1.mdx‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
---
2+
type: tutorial
3+
title: Erstelle dein erstes Layout
4+
description: |-
5+
Tutorial: Erstelle deinen ersten Astro-Blog —
6+
Refaktoriere gemeinsame Elemente in ein wiederverwendbares Seiten-Layout
7+
i18nReady: true
8+
---
9+
10+
import Box from '~/components/tutorial/Box.astro';
11+
import Checklist from '~/components/Checklist.astro';
12+
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
13+
import Option from '~/components/tutorial/Option.astro';
14+
import PreCheck from '~/components/tutorial/PreCheck.astro';
15+
import { Steps } from '@astrojs/starlight/components';
16+
17+
<PreCheck>
18+
- Refaktoriere (Refactor) gemeinsame Elemente in ein Seiten-Layout
19+
- Verwende ein Astro-`<slot />`-Element, um Seiteninhalte innerhalb eines Layouts zu platzieren
20+
- Übergib seiten-spezifische Werte als Props an dein Layout
21+
</PreCheck>
22+
23+
Du hast noch einige Astro-Komponenten, die auf jeder Seite wiederholt gerendert werden. Es ist Zeit für eine weitere Refaktorierung (Refactoring), um ein gemeinsames Seiten-Layout zu erstellen!
24+
25+
## Erstelle deine erste Layout-Komponente
26+
27+
<Steps>
28+
1. Erstelle eine neue Datei unter `src/layouts/BaseLayout.astro`. (Du musst vorher einen neuen Ordner `layouts` anlegen.)
29+
30+
2. Kopiere den **gesamten Inhalt** von `index.astro` in deine neue Datei `BaseLayout.astro`.
31+
32+
```astro title="src/layouts/BaseLayout.astro"
33+
---
34+
import Header from '../components/Header.astro';
35+
import Footer from '../components/Footer.astro';
36+
import '../styles/global.css';
37+
const pageTitle = "Startseite";
38+
---
39+
<html lang="en">
40+
<head>
41+
<meta charset="utf-8" />
42+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
43+
<meta name="viewport" content="width=device-width" />
44+
<meta name="generator" content={Astro.generator} />
45+
<title>{pageTitle}</title>
46+
</head>
47+
<body>
48+
<Header />
49+
<h1>{pageTitle}</h1>
50+
<Footer />
51+
<script>
52+
import "../scripts/menu.js";
53+
</script>
54+
</body>
55+
</html>
56+
```
57+
</Steps>
58+
59+
## Verwende dein Layout auf einer Seite
60+
61+
<Steps>
62+
3. Ersetze den Code in `src/pages/index.astro` durch Folgendes:
63+
64+
```astro title="src/pages/index.astro"
65+
---
66+
import BaseLayout from '../layouts/BaseLayout.astro';
67+
const pageTitle = "Startseite";
68+
---
69+
<BaseLayout>
70+
<h2>Mein großartiger Blog-Untertitel</h2>
71+
</BaseLayout>
72+
```
73+
74+
4. Prüfe die Vorschau im Browser erneut, um zu sehen, was sich geändert hat (Spoiler: vielleicht *nicht* viel).
75+
76+
5. Füge ein `<slot />`-Element in `src/layouts/BaseLayout.astro` direkt oberhalb des Footer-Elements hinzu, und prüfe dann die Vorschau deiner Startseite, um zu sehen, was sich diesmal tatsächlich geändert hat!
77+
78+
```astro title="src/layouts/BaseLayout.astro" ins={18}
79+
---
80+
import Header from '../components/Header.astro';
81+
import Footer from '../components/Footer.astro';
82+
import '../styles/global.css';
83+
const pageTitle = "Startseite";
84+
---
85+
<html lang="en">
86+
<head>
87+
<meta charset="utf-8" />
88+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
89+
<meta name="viewport" content="width=device-width" />
90+
<meta name="generator" content={Astro.generator} />
91+
<title>{pageTitle}</title>
92+
</head>
93+
<body>
94+
<Header />
95+
<h1>{pageTitle}</h1>
96+
<slot />
97+
<Footer />
98+
<script>
99+
import "../scripts/menu.js";
100+
</script>
101+
</body>
102+
</html>
103+
```
104+
</Steps>
105+
106+
Das `<slot />`-Element ermöglicht es, **Kind-Inhalte** einzufügen (oder „einzuschieben“), die zwischen den öffnenden und schließenden `<Component></Component>`-Tags in jede `Component.astro`-Datei geschrieben werden.
107+
108+
## Übergib seiten-spezifische Werte als Props
109+
110+
<Steps>
111+
6. Übergib den Seitentitel von `index.astro` an dein Layout über ein Komponenten-Attribut:
112+
113+
```astro title="src/pages/index.astro" 'pageTitle={pageTitle}'
114+
---
115+
import BaseLayout from '../layouts/BaseLayout.astro';
116+
const pageTitle = "Startseite";
117+
---
118+
<BaseLayout pageTitle={pageTitle}>
119+
<h2>Mein großartiger Blog-Untertitel</h2>
120+
</BaseLayout>
121+
```
122+
123+
7. Passe das Skript deiner `BaseLayout.astro`-Komponente an, sodass es den Seitentitel über `Astro.props` erhält, anstatt ihn als Konstante zu definieren.
124+
125+
```astro title="src/layouts/BaseLayout.astro" del={5} ins={6}
126+
---
127+
import Header from '../components/Header.astro';
128+
import Footer from '../components/Footer.astro';
129+
import '../styles/global.css';
130+
const pageTitle = "Startseite";
131+
const { pageTitle } = Astro.props;
132+
---
133+
```
134+
135+
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.
136+
</Steps>
137+
138+
<Box icon="puzzle-piece">
139+
140+
## Probiere es selbst – Verwende dein Layout überall
141+
142+
**Refaktoriere** deine anderen Seiten (`blog.astro` und `about.astro`), sodass sie dein neues `<BaseLayout>`-Element verwenden, um die gemeinsamen Seitenelemente zu rendern.
143+
144+
Denk daran:
145+
146+
- Übergib einen Seitentitel als Prop über ein Komponenten-Attribut.
147+
148+
- Lass das Layout für das HTML-Rendering aller gemeinsamen Elemente verantwortlich sein.
149+
150+
- Verschiebe vorhandene `<style>`-Tags aus dem `<head>` der Seite in die Seiten-HTML-Vorlage, wenn du diese Styles behalten möchtest.
151+
152+
- Lösche alles von jeder einzelnen Seite, was nun vom Layout übernommen wird, einschließlich:
153+
154+
- HTML-Elemente
155+
- Komponenten und deren Imports
156+
- CSS-Regeln in einem `<style>`-Tag (z. B. `<h1>` auf der Über mich-Seite)
157+
- `<script>`-Tags
158+
159+
:::note[Behalte deine „Über mich“-Seite-Styles]
160+
Wenn du `<BaseLayout>` für deine `about.astro`-Seite verwendest, verlierst du das `<style>`-Tag, das zuvor im `<head>` dieser Seite war. Um weiterhin nur auf Seitenebene mit Astro-Scoped-Styles zu stylen, verschiebe das `<style>`-Tag in den Body der Seiten-Komponente. So kannst du **Elemente, die in dieser Seiten-Komponente erstellt wurden**, weiter stylen (z. B. deine Liste von Skills).
161+
162+
Da dein `<h1>` jetzt vom Layout erstellt wird, kannst du das Attribut `is:global` zu deinem Style-Tag hinzufügen, um jedes Element auf dieser Seite zu beeinflussen, einschließlich derjenigen, die von anderen Komponenten erstellte werden: `<style is:global define:vars={{ skillColor, fontWeight, textCase }}>`
163+
:::
164+
</Box>
165+
166+
<Box icon="question-mark">
167+
168+
### Teste dein Wissen
169+
170+
1. Eine Astro-Komponente (`.astro`-Datei) kann fungieren als:
171+
172+
<MultipleChoice>
173+
<Option>Seite</Option>
174+
<Option>UI-Komponente</Option>
175+
<Option>Layout</Option>
176+
<Option isCorrect>alle oben genannten, weil Astro-Komponenten so vielseitig sind! 🏗️</Option>
177+
</MultipleChoice>
178+
179+
2. Um einen Seitentitel auf der Seite anzuzeigen, kannst du:
180+
181+
<MultipleChoice>
182+
<Option>
183+
ein Standard-HTML-Element auf der Seite mit statischem Text verwenden (z. B. `<h1>Startseite</h1>`)
184+
</Option>
185+
<Option>
186+
ein Standard-HTML-Element auf der Seite verwenden, das auf eine im Frontmatter-Skript definierte Variable verweist (z. B. `<h1>{pageTitle}</h1>`)
187+
</Option>
188+
<Option>
189+
eine Layout-Komponente auf der Seite verwenden und den Titel als Komponenten-Attribut übergeben (z. B. `<BaseLayout title="Startseite" />` oder `<BaseLayout title={pageTitle} />`)
190+
</Option>
191+
<Option isCorrect>
192+
alle oben genannten, weil Astro es dir erlaubt, normales HTML zu verwenden oder es mit einem Skript und Komponenten aufzuwerten! 💪
193+
</Option>
194+
</MultipleChoice>
195+
196+
3. Informationen können von einer Komponente zur anderen übergeben werden durch:
197+
198+
<MultipleChoice>
199+
<Option>
200+
das Importieren einer UI-Komponente und das Rendern in der Vorlage einer anderen Komponente
201+
</Option>
202+
<Option>
203+
Props an eine Komponente übergeben, wo sie über ein Komponenten-Attribut gerendert wird
204+
</Option>
205+
<Option>
206+
HTML-Inhalte senden, die innerhalb einer anderen Komponente über einen `<slot />`-Platzhalter gerendert werden
207+
</Option>
208+
<Option isCorrect>
209+
alle oben genannten, weil Astro auf komponentenbasiertes Design ausgelegt ist! 🧩
210+
</Option>
211+
</MultipleChoice>
212+
213+
</Box>
214+
215+
<Box icon="check-list">
216+
217+
## Checkliste
218+
219+
<Checklist>
220+
- [ ] Ich kann eine Astro-Layout-Komponente mit einem `<slot />` erstellen.
221+
- [ ] Ich kann seiten-spezifische Eigenschaften an ein Layout übergeben.
222+
</Checklist>
223+
</Box>
224+
225+
### Ressourcen
226+
227+
- [Astro-Layout-Komponenten](/de/basics/layouts/)
228+
229+
- [Astro `<slot />`](/de/basics/astro-components/#slots)

0 commit comments

Comments
 (0)