Etappe 1 – Grundlagen · Lektion 9 von 11 · Lernziel: Mehrere Seiten verlinken und dateibasiertes Routing anwenden.
Voraussetzung: Grundlagen aus Lektion 8; arbeite im selben Projekt modellbau-webseite.
Ziel: Aus einer Startseite wird eine Website
Wir ergänzen Projekte und Kontakt. Astro macht daraus automatisch eigene Adressen. Du brauchst keinen zusätzlichen Router zu konfigurieren.
Datei src/pages/projekte.astro anlegen
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Projekte | Modellbau-Werkstatt</title>
</head>
<body>
<nav><a href="/">Startseite</a> · <a href="/projekte">Projekte</a> · <a href="/kontakt">Kontakt</a></nav>
<main>
<h1>Meine Projekte</h1>
<h2>Modellflug</h2>
<p>Hier dokumentiere ich meine Flugmodelle.</p>
<h2>3D-Druck</h2>
<p>Hier stelle ich selbst konstruierte Bauteile vor.</p>
</main>
</body>
</html>Datei src/pages/kontakt.astro anlegen
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Kontakt | Modellbau-Werkstatt</title>
</head>
<body>
<nav><a href="/">Startseite</a> · <a href="/projekte">Projekte</a> · <a href="/kontakt">Kontakt</a></nav>
<main>
<h1>Kontakt</h1>
<p>Schreibe mir eine E-Mail: <a href="mailto:kontakt@example.com">kontakt@example.com</a>.</p>
</main>
</body>
</html>Die Adresse kontakt@example.com ist ein Platzhalter. Verwende bei einer echten Veröffentlichung deine eigene Kontaktadresse und prüfe die für dich geltenden Impressums- und Datenschutzpflichten.
Menü zur Startseite hinzufügen
Ergänze in der vorhandenen Startseite innerhalb von <header>, direkt nach dem vorhandenen div, folgendes Menü:
<nav aria-label="Hauptnavigation">
<a href="/">Startseite</a>
<a href="/projekte">Projekte</a>
<a href="/kontakt">Kontakt</a>
</nav>Ergänze dort außerdem diesen CSS-Code im bestehenden <style>-Block:
nav { display: flex; flex-wrap: wrap; gap: 18px; padding: 0 20px 16px; }
nav a { color: white; }Die Unterseiten enthalten momentan ein einfaches ungestyltes Menü. Dass wir Markup doppelt pflegen müssen, ist ein bewusstes Zwischenstadium: Ab Modul 3 lösen wir das mit Layouts.
Test
Rufe /, /projekte und /kontakt auf. Prüfe, ob alle Menülinks funktionieren und ob der Browser beim Klick die Adresse ändert.
Übung
Erstelle eine vierte Datei src/pages/ueber-mich.astro mit vollständigem HTML-Gerüst und verlinke sie im Startseitenmenü.
Lösungshinweis: Der Link lautet href="/ueber-mich". Die Dateiendung .astro steht nicht in der öffentlichen URL.
Weitere Informationen: Offizielle Astro-Dokumentation.