Skip to content
Merged
Changes from all commits
Commits
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
156 changes: 156 additions & 0 deletions src/content/docs/de/tutorial/3-components/1.mdx
Original file line number Diff line number Diff line change
@@ -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!

<PreCheck>
- 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
</PreCheck>

## 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

<Steps>
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" "---"
---
---
<a href="/">Home</a>
<a href="/about/">Über mich</a>
<a href="/blog/">Blog</a>
```
:::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.
:::
</Steps>

### Importieren und Verwenden von Navigation.astro

<Steps>
1. Gehe zurück zu `index.astro` und importiere deine neue Komponente innerhalb der Code-Abgrenzung:

```astro title="src/pages/index.astro"
---
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}
<a href="/">Home</a>
<a href="/about/">Über mich</a>
<a href="/blog/">Blog</a>
<Navigation />
```

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!
</Steps>

Deine Website enthält nun denselben HTML-Code wie zuvor. Aber jetzt werden diese drei Zeilen Code durch deine `<Navigation />`-Komponente bereitgestellt.

<Box icon="puzzle-piece">

## Probiere es selbst aus - Füge Navigation zum Rest deiner Website hinzu

Importiere die `<Navigation />`-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.

</Box>

:::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.
:::



<Box icon="question-mark">

### Test your knowledge



1. Das kannst du tun, wenn Elemente auf mehreren Seiten wiederholt werden:
<MultipleChoice>
<Option>
den Entwicklungs-Server neu starten
</Option>
<Option isCorrect>
Refaktorisierung, um eine wiederverwendbare Komponente zu nutzen
</Option>
<Option>
eine neue Seite erstellen
</Option>
</MultipleChoice>

2. Astro-Komponenten sind:
<MultipleChoice>
<Option>
wiederverwendbar
</Option>
<Option>
Fragmente von HTML
</Option>
<Option isCorrect>
beides!
</Option>
</MultipleChoice>

3. Astro-Komponenten erstellen automatisch eine neue Seite auf deiner Website, wenn du...
<MultipleChoice>
<Option>
`<html></html>` einfügst
</Option>
<Option>
refaktorisierst
</Option>
<Option isCorrect>
die `.astro`-Datei innerhalb von `src/pages/` ablegst
</Option>
</MultipleChoice>
</Box>

<Box icon="check-list">

## Checkliste

<Checklist>
- [ ] Ich kann Inhalte in wiederverwendbare Komponenten umwandeln.
- [ ] Ich kann eine neue Komponente zu einer `.astro`-Seite hinzufügen.
</Checklist>

</Box>

### Ressourcen

- [Mehr über Astro-Komponenten](/de/basics/astro-components/)

- [Refactoring](https://refactoring.com/) <Badge>extern</Badge>