Etappe 2 – Lektion 13 von 22 · Modellbau-Werkstatt
Voraussetzungen: Etappe 1 (Teile 1–11); ab Teil 13 auch die jeweils vorherige Lektion.
Lernziel: Du zerlegst eine Webseite in wiederverwendbare Bausteine.
1. Warum Komponenten?
Die Projektkarten der Modellbau-Werkstatt sollen immer ähnlich aussehen. Statt denselben HTML-Code mehrfach zu schreiben, erstellen wir eine Komponente.
Lege den Ordner src/components/ an und darin Hinweis.astro:
---
const nachricht = 'Neues aus der Werkstatt';
---
<aside class="hinweis">
<strong>{nachricht}</strong>
<p>Hier erscheinen regelmäßig neue Projekte.</p>
</aside>
<style>
.hinweis { padding: 1rem; border-left: 4px solid #176b98; background: #eaf5fb; border-radius: .25rem; }
</style>Erstelle src/pages/neuigkeiten.astro:
---
import Hinweis from '../components/Hinweis.astro';
---
<html lang="de">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Neuigkeiten</title></head>
<body>
<h1>Neuigkeiten</h1>
<Hinweis />
<Hinweis />
</body>
</html>Die Großschreibung von Hinweis ist wichtig: Sie unterscheidet eine Astro-Komponente von normalen HTML-Tags.
2. Die Datei importieren
Mit import Hinweis from '../components/Hinweis.astro' teilst du Astro mit, welche Datei verwendet wird. Der relative Pfad beginnt bei der importierenden Datei.
3. Wiederverwendung
Wenn du den Text oder das Design in Hinweis.astro änderst, sind beide Vorkommen aktualisiert. Im nächsten Kapitel machen wir den Text je nach Verwendung unterschiedlich.
Übung
Erstelle eine zweite Komponente Trennlinie.astro, die <hr /> mit einem passenden CSS-Stil ausgibt. Binde sie zwischen den beiden Hinweisen ein.
Lösungshinweis
src/components/Trennlinie.astro enthält <hr /> und <style>hr { border: 0; border-top: 2px solid #ccc; margin: 2rem 0; }</style>. Importiere sie wie Hinweis und schreibe <Trennlinie /> zwischen die Hinweise.
Kontrolle: Beide Komponenten sind auf /neuigkeiten sichtbar.
Alle Beispiele beziehen sich auf ein eigenes Astro-Übungsprojekt. Die Dateipfade sind relativ zum Projekt-Hauptordner angegeben. Die Kursdateien selbst gehören in das Content-Verzeichnis der Know-How-Schmiede, nicht in das Übungsprojekt.