Skip to content

i18n(de): update section 3 blog tutorial #12515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 8, 2025
Merged

i18n(de): update section 3 blog tutorial #12515

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
935338c
i18n(de): update section 3 blog tutorial
trueberryless Oct 7, 2025
4f98a8b
Update src/content/docs/de/tutorial/3-components/4.mdx
trueberryless Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 81 additions & 79 deletions src/content/docs/de/tutorial/3-components/4.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,131 +15,127 @@ import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Fügen wir ein Hamburger-Menü hinzu, um deine Links auf mobilen Bildschirmgrößen zu öffnen und zu schließen, was etwas clientseitige Interaktivität erfordert!
Fügen wir ein Button hinzu, um dein Navigationsmenü auf mobilen Bildschirmgrößen zu öffnen und zu schließen, was etwas clientseitige Interaktivität erfordert!

<PreCheck>
- Erstelle eine Hamburger-Menü-Komponente
- Erstelle eine Menü-Komponente
- Schreibe ein `<script>`, das es deinen Seitenbesuchern erlaubt, das Navigationsmenü zu öffnen und zu schließen
- Verschiebe dein JavaScript in eine `.js`-Datei
</PreCheck>

## Baue eine Hamburger-Komponente
## Baue eine Menü-Komponente

Erstelle eine `<Hamburger />`-Komponente, um dein mobiles Menü zu öffnen und zu schließen.
Erstelle eine `<Menu />`-Komponente, um dein mobiles Menü zu öffnen und zu schließen.

<Steps>
1. Erstelle eine Datei namens `Hamburger.astro` in `src/components/`
1. Erstelle eine Datei namens `Menu.astro` in `src/components/`

2. Kopiere den folgenden Code in deine Komponente. Dies wird dein „Hamburger“-Menü mit 3 Linien darstellen, um deine Navigationslinks auf mobilen Geräten anzuzeigen und zu verstecken. (Die neuen CSS-Styles fügst du später in `global.css` hinzu.)
2. Kopiere den folgenden Code in deine Komponente. Es erstellt eine Schaltfläche, die dazu dient, die Sichtbarkeit der Navigationslinks auf mobilen Geräten ein- und auszublenden. (Die neuen CSS-Styles fügst du später in `global.css` hinzu.)

```astro title="src/components/Hamburger.astro"
```astro title="src/components/Menu.astro"
---
---
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<button aria-expanded="false" aria-controls="main-menu" class="menu">
Menü
</button>
```

3. Platziere diese neue `<Hamburger />`-Komponente direkt vor deiner `<Navigation />`-Komponente in `Header.astro`.
3. Platziere diese neue `<Menu />`-Komponente direkt vor deiner `<Navigation />`-Komponente in `Header.astro`.

<details>
<summary>Zeige mir den Code!</summary>

```astro title="src/components/Header.astro" ins={2,7}
---
import Hamburger from './Hamburger.astro';
import Menu from './Menu.astro';
import Navigation from './Navigation.astro';
---
<header>
<nav>
<Hamburger />
<Menu />
<Navigation />
</nav>
</header>
```
</details>

4. Füge die folgenden Styles für deine Hamburger-Komponente hinzu:
4. Füge die folgenden Styles für deine Menü-Komponente hinzu, einschließlich einiger responsiver Styles:

```css title="src/styles/global.css" ins={2-13, 56-58}
```css title="src/styles/global.css" ins={2-9, 33-35, 51-53}
/* Navigation-Styles */
.hamburger {
padding-right: 20px;
cursor: pointer;
}

.hamburger .line {
display: block;
width: 40px;
height: 5px;
margin-bottom: 10px;
background-color: #ff9776;
}

.menu {
background-color: #0d0950;
border: none;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
padding: 5px 10px;
}

.nav-links {
width: 100%;
display: none;
margin: 0;
}

.nav-links a {
display: block;
text-align: center;
padding: 10px 0;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
color: #0d0950;
}

.nav-links a:hover,
.nav-links a:focus {
background-color: #ff9776;
}

:has(.menu[aria-expanded="true"]) .nav-links {
display: unset;
}

@media screen and (min-width: 636px) {
.nav-links {
width: 100%;
top: 5rem;
left: 48px;
background-color: #ff9776;
display: none;
margin: 0;
}

.nav-links a {
margin-left: 5em;
display: block;
text-align: center;
padding: 10px 0;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
}

.nav-links a:hover, a:focus {
background-color: #ff9776;
position: static;
width: auto;
background: none;
}

.expanded {
display: unset;
.nav-links a {
display: inline-block;
padding: 15px 20px;
}

@media screen and (min-width: 636px) {
.nav-links {
margin-left: 5em;
display: block;
position: static;
width: auto;
background: none;
}

.nav-links a {
display: inline-block;
padding: 15px 20px;
}

.hamburger {
display: none;
}
.menu {
display: none;
}
}
```
</Steps>

## Schreibe dein erstes Skript-Tag

Dein Header ist noch nicht **interaktiv**, da er nicht auf Benutzereingaben reagieren kann, wie das Klicken auf das Hamburger-Menü, um die Navigationslinks anzuzeigen oder zu verstecken.
Dein Header ist noch nicht **interaktiv**, da er nicht auf Benutzereingaben reagieren kann, wie das Klicken auf das Menü, um die Navigationslinks anzuzeigen oder zu verstecken.

Das Hinzufügen eines `<script>`-Tags ermöglicht es clientseitigem JavaScript, auf ein Benutzerereignis zu "hören" und entsprechend zu reagieren.

<Steps>
1. Füge das folgende `<script>`-Tag zu `index.astro`, kurz vor dem schließenden `</body>`-Tag hinzu.

```astro title="src/pages/index.astro" ins={2-6}
```astro title="src/pages/index.astro" ins={2-9}
<Footer />
<script>
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
const menu = document.querySelector('.menu');

menu.addEventListener('click', () => {
const isExpanded = menu.getAttribute('aria-expanded') === 'true';
menu.setAttribute('aria-expanded', !isExpanded);
});
</script>
</body>
Expand All @@ -156,26 +152,32 @@ Anstatt dein JavaScript direkt auf jeder Seite zu schreiben, kannst du den Inhal
1. Erstelle `src/scripts/menu.js` (du musst einen neuen `/scripts/`-Ordner erstellen) und verschiebe dein JavaScript dorthin.

```js title="src/scripts/menu.js"
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
const menu = document.querySelector('.menu');

menu.addEventListener('click', () => {
const isExpanded = menu.getAttribute('aria-expanded') === 'true';
menu.setAttribute('aria-expanded', !isExpanded);
});
```

2. Ersetze den Inhalt des `<script>`-Tags auf `index.astro` durch den folgenden Dateiimport:

```astro title="src/pages/index.astro" ins={7} del={3-5}
```astro title="src/pages/index.astro" ins={10} del={3-8}
<Footer />
<script>
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
const menu = document.querySelector('.menu');

menu.addEventListener('click', () => {
const isExpanded = menu.getAttribute('aria-expanded') === 'true';
menu.setAttribute('aria-expanded', !isExpanded);
});

import "../scripts/menu.js";
</script>
</body>
```

3. Überprüfe deine Browser-Vorschau erneut bei kleineren Größen und bestätige, dass das Hamburger-Menü deine Navigationslinks weiterhin öffnet und schließt.
3. Überprüfe deine Browser-Vorschau erneut bei kleineren Größen und bestätige, dass das Menü deine Navigationslinks weiterhin öffnet und schließt.

4. Füge dasselbe `<script>` mit Import auf deinen anderen zwei Seiten, `about.astro` und `blog.astro`, hinzu und überprüfe, ob du eine responsive, interaktive Kopfzeile auf jeder Seite hast.

Expand Down Expand Up @@ -258,4 +260,4 @@ Diese Befehle werden alle beim Erstellen ausgeführt, um statisches HTML für de

### Ressourcen

[Client-seitige Skripte in Astro](/de/guides/client-side-scripts/)
[Client-seitige Skripte in Astro](/de/guides/client-side-scripts/)