Astro-Kurs 16: Listen und Bedingungen

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

Lernziel: Du erzeugst wiederholte HTML-Elemente aus Daten und blendest Inhalte bedingt ein.

1. Projekte als Daten speichern

Bisher haben wir Projektkarten einzeln geschrieben. Bei zehn Projekten ist das mühsam. Ein Array speichert mehrere Datensätze:

Lege src/pages/projektliste.astro an:

---
import BasisLayout from '../layouts/BasisLayout.astro';
import ProjektKarte from '../components/ProjektKarte.astro';

const projekte = [
  { titel: '3D-Druck', beschreibung: 'Funktionale Teile drucken.', fertig: true },
  { titel: 'Modellflug', beschreibung: 'Ein neues Flugzeug bauen.', fertig: false },
  { titel: 'Elektronik', beschreibung: 'Sensoren testen.', fertig: true },
];
const nurFertige = false;
const sichtbareProjekte = nurFertige ? projekte.filter(p => p.fertig) : projekte;
---
<BasisLayout title="Projektliste">
  <h1>Projekte</h1>
  <p>Es gibt {sichtbareProjekte.length} sichtbare Projekte.</p>
  <div class="raster">
    {sichtbareProjekte.map(projekt => (
      <ProjektKarte titel={projekt.titel} beschreibung={projekt.beschreibung} />
    ))}
  </div>
  {sichtbareProjekte.length === 0 && <p>Keine Projekte gefunden.</p>}
</BasisLayout>
<style>
  .raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
</style>

map() erzeugt für jeden Eintrag eine Karte. filter() wählt Einträge aus. ? : ist eine kurze Wenn-Dann-Sonst-Bedingung. Das sind JavaScript-Ausdrücke und kein spezieller Astro-Befehl.

2. Build-Zeit und Interaktivität

nurFertige ist hier eine feste Variable, die beim Seitenaufbau ausgewertet wird. Eine Schaltfläche im Browser, die Projekte live filtert, benötigt JavaScript im Browser; das kommt später im Kurs.

Übung

Setze nurFertige auf true. Ergänze ein viertes unfertiges Projekt. Wie viele Karten erscheinen?

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.