Seiten
Jede Datei in src/pages wird automatisch eine Route.
Sehr simples Lernprojekt
Astro in 10 Minuten fühlen
Hier siehst du eine kleine Seite, die dir die Grundidee von Astro sichtbar macht.
1. Daten aus einem Array
Diese Karten kommen aus einer Liste oben im Frontmatter
Komponenten
Kleine Bausteine kannst du wiederverwenden und mit Props steuern.
Daten im Frontmatter
Oben definierst du Variablen, Arrays und einfache Logik.
2. Sichtbare Logik
Eine Astro Datei mischt einfache Logik und Markup
Alles zwischen den drei Strichen oben ist dein Frontmatter. Dort entstehen Variablen, Arrays und Imports. Unten nutzt du diese Werte direkt im Markup.
Mini Beispiel
---
const name = "Tobias";
---
<h1>Hallo {name}</h1>3. Bedingte Ausgabe mit &&
Dieser Kasten erscheint nur, weil zeigeExtraHinweis auf
true steht. Setze den Wert oben auf false
und lade die Seite neu.
4. Slot verstehen
Die Komponente HinweisBox.astro kennt nur ihren Rahmen.
Den Inhalt gibst du zwischen dem öffnenden und schließenden Tag hinein.
Genau dafür ist <slot /> da. So kannst du allgemeine
Bausteine bauen, die trotzdem flexibel bleiben.
5. Formular mit Backend Flow
Melde dich für ein Astro Event an
Dieses Beispiel postet an eine Cloudflare Function. Dort prüfst du Turnstile, Honeypot, Rate Limit und Feldwerte, bevor gespeichert und später Mail versendet wird.
Live Session
Astro Basics am Mittwoch
Wir schauen gemeinsam auf Seiten, Komponenten, Props und ein kleines Formular. Genau richtig für einen ersten Einstieg.
- Datum: 23. April
- Zeit: 18:30 Uhr
- Ort: Online via Video Call
Der echte Server Teil liegt in
functions/api/event-anmeldung.ts.