Astro-Kurs 12: Aufbau einer Astro-Datei

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

Lernziel: Du verstehst Frontmatter, Template, Ausdrücke und Styles.

1. Was steckt in einer .astro-Datei?

Eine Astro-Komponente besteht meistens aus Frontmatter (JavaScript zwischen zwei ----Zeilen), HTML-ähnlichem Template und optionalem CSS. Das Frontmatter läuft beim Erstellen der Seite auf dem Server bzw. beim Build. Es ist nicht automatisch Browser-JavaScript.

Lege src/pages/werkstatt.astro an:

---
const werkstatt = 'Meine Modellbau-Werkstatt';
const anzahl = 3;
const istOffen = true;
---
<html lang="de">
  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Werkstatt</title></head>
  <body>
    <h1>{werkstatt}</h1>
    <p>Aktuelle Projekte: {anzahl}</p>
    {istOffen && <p>Neue Projekte folgen bald.</p>}
  </body>
</html>
<style>
  body { font-family: system-ui, sans-serif; max-width: 55rem; margin: 3rem auto; padding: 1rem; }
  h1 { color: #176b98; }
</style>

Rufe /werkstatt im Browser auf. {werkstatt} setzt einen Variablenwert ein. && blendet einen Absatz nur ein, wenn die Bedingung wahr ist. Änderungen an anzahl siehst du nach dem Speichern.

2. Was ist Frontmatter?

Zwischen den Trennlinien verwendest du JavaScript, um Daten vorzubereiten, Komponenten zu importieren und Berechnungen auszuführen. Du kannst auch await verwenden. Geheimnisse wie API-Schlüssel dürfen nicht versehentlich in die HTML-Ausgabe gelangen.

3. Was macht <style>?

Astro begrenzt gewöhnliche Komponenten-Styles standardmäßig auf die Elemente der jeweiligen Komponente. Gemeinsame Styles behandeln wir in Teil 17.

Übung

Ergänze eine Variable thema = '3D-Druck' und gib sie in einem zweiten Absatz aus. Ändere istOffen auf false.

Kontrolle: npm run dev ausführen, /werkstatt aufrufen und danach npm run build testen.

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.