Inhalte erstellen
Wir erstellen gemeinsam eine neue Seite, binden sie in die Navigation ein, schreiben Inhalte und verwenden Komponenten wie Alerts und Cards.
Was wir erreichen werden
Am Ende dieses Tutorials hast du eine neue Seite mit formatiertem Text, einem eingebetteten Bild und interaktiven Komponenten.
Voraussetzungen
- Du hast ein easyWebsite-Projekt (siehe Erste Webseite erstellen)
- Du kannst Dateien im Projekt bearbeiten (Web-IDE oder lokal)
Bitte beachte, dass wenn du deine Seite im Developer Mode erstellt hast, einige Erläuterungen hier nicht zutreffen (z.B. _meta.yamlvs. _meta.ts), da die Struktur und Arbeitsweise im Developer Mode anders ist. In diesem Tutorial konzentrieren wir uns auf die Erstellung von Inhalten in einem regulären easyWebsite-Projekt.
1. Neue Seite anlegen
Erstelle im dokument-Ordner eine neue Datei meine-seite.mdx:
Dateien mit der Endung .md enthalten reines Markdown. Dateien mit .mdx erlauben zusätzlich die Verwendung von React-Komponenten.
2. Seite in die Navigation einfügen
Öffne oder erstelle die _meta.yaml-Datei im selben Ordner und füge einen Eintrag hinzu:
Der Schlüssel (meine-seite) muss dem Dateinamen ohne Endung entsprechen. Die Reihenfolge der Einträge bestimmt die Reihenfolge im Menü.
3. Text mit Markdown formatieren
Nutze die übliche Markdown-Syntax:
4. Bilder einbetten
Lege dein Bild im Ordner assets ab und referenziere es:
Verwende aussagekräftige Beschreibungen für Bilder — das ist wichtig für Barrierefreiheit und wird von Screenreadern vorgelesen.
5. Komponenten verwenden
In .mdx-Dateien kannst du React-Komponenten direkt nutzen. Importiere sie am Anfang der Datei:
Du siehst jetzt einen blauen Hinweiskasten auf deiner Seite.
Cards verwenden
6. Abkürzungen und Glossar-Begriffe nutzen
Begriffe, die in der abbreviations.yaml definiert sind, werden automatisch in deinem Text erkannt. Sie werden als <abbr>-HTML-Elemente gerendert — das liefert beim Hovern einen Tooltip mit der Definition und ist gleichzeitig für Screenreader zugänglich.
Erstelle oder ergänze die abbreviations.yaml im dokument-Ordner:
Wenn du nun „HTML" oder „API" in deinem Text verwendest, werden diese Begriffe automatisch hervorgehoben und mit der Definition verknüpft. Varianten (z. B. Pluralformen) werden ebenfalls erkannt.
Das ältere Format mit glossar.yaml und abkuerzungen.yaml wird weiterhin unterstützt. Für neue Projekte empfehlen wir abbreviations.yaml.
7. Änderungen veröffentlichen
Speichere deine Änderungen und erstelle einen Commit. Die CI/CD-Pipeline baut automatisch die aktualisierte Webseite.
Du hast jetzt eine neue Seite mit Markdown-Inhalten, Bildern und Komponenten erstellt.
Nächste Schritte
- Menüstruktur anpassen — Erweiterte Navigation konfigurieren
- Projektstruktur — Alle Dateien und Ordner im Überblick