Astro-Kurs 15: Layouts und Slots

Etappe 2 – Lektion 15 von 22 · Modellbau-Werkstatt
Voraussetzungen: Etappe 1 (Teile 1–11); ab Teil 13 auch die jeweils vorherige Lektion.

Lernziel: Du verwendest Kopfbereich, Navigation und Fußzeile auf allen Seiten gemeinsam.

1. Was ist ein Layout?

Ein Layout ist eine wiederverwendbare Seitenhülle. Der Inhalt der einzelnen Seite wird über <slot /> an die passende Stelle gesetzt.

Lege src/layouts/BasisLayout.astro an:

---
interface Props { title: string; }
const { title } = Astro.props;
---
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title} | Modellbau-Werkstatt</title>
  </head>
  <body>
    <header class="rahmen">
      <strong>Meine Modellbau-Werkstatt</strong>
      <nav aria-label="Hauptnavigation">
        <a href="/">Start</a>
        <a href="/projekte">Projekte</a>
        <a href="/blog">Blog</a>
      </nav>
    </header>
    <main class="rahmen"><slot /></main>
    <footer class="rahmen">© Modellbau-Werkstatt</footer>
  </body>
</html>
<style is:global>
  body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; color: #223; }
  .rahmen { max-width: 960px; padding: 1rem; margin: auto; }
  header { background: #eaf5fb; }
  nav { display: flex; gap: 1rem; flex-wrap: wrap; }
  main { min-height: 60vh; }
  footer { border-top: 1px solid #ddd; }
</style>

style is:global wirkt auf die ganze Seite. Für ein größeres Projekt sind getrennte globale CSS-Dateien oft übersichtlicher.

Erstelle src/pages/layout-test.astro:

---
import BasisLayout from '../layouts/BasisLayout.astro';
---
<BasisLayout title="Layout-Test">
  <h1>Meine Seite verwendet ein Layout</h1>
  <p>Dieser Text landet im Slot zwischen Navigation und Fußzeile.</p>
</BasisLayout>

2. Was wird wiederverwendet?

Änderst du den Navigationsbereich im Layout, ist die Änderung auf allen Seiten sichtbar, die dieses Layout verwenden.

Übung

Stelle src/pages/projekte.astro auf BasisLayout um. Entferne dabei den alten vollständigen HTML-Rahmen aus der Unterseite, damit kein verschachteltes <html> entsteht.

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.