Themes Übersicht

Ein EmDash-Theme ist eine vollständige Astro-Website — Seiten, Layouts, Komponenten, Styles — die über create-astro verteilt wird. Es enthält auch eine Seed-Datei, die die Datenbank beim ersten Start mit Collections, Feldern, Menüs, Weiterleitungen und Beispielinhalten initialisiert.

Was ein Theme bietet

Ein Theme ist ein funktionierendes Astro-Projekt mit:

• Pages — Astro-Routen zum Rendern von Inhalten (Startseite, Blogbeiträge, Archive usw.)
• Layouts — Gemeinsame HTML-Struktur
• Components — Wiederverwendbare UI-Elemente (Navigation, Karten, Footer)
• Styles — CSS- oder Tailwind-Konfiguration
• Eine Seed-Datei — JSON, das dem CMS mitteilt, welche Inhaltstypen und Felder erstellt werden sollen

Theme-Struktur

Ein Theme hat folgendes Layout:

my-theme/
├── package.json           # Theme-Metadaten + EmDash-Konfiguration
├── astro.config.mjs       # Astro-Integration-Setup
├── src/
│   ├── live.config.ts     # Live Collections-Konfiguration
│   ├── pages/             # Astro-Routen
│   ├── layouts/           # Layout-Komponenten
│   └── components/        # UI-Komponenten
└── .emdash/
    ├── seed.json          # Schema + Beispielinhalte
    └── uploads/           # Optionale lokale Mediendateien

Wie Themes Websites initialisieren

Das Erstellen einer Website aus einem Theme erfolgt in folgenden Schritten:

1. create-astro erstellt das Projekt aus der Vorlage
2. npm install und npm run dev ausführen
3. Beim ersten Admin-Besuch wird der Setup-Assistent automatisch ausgeführt
4. Der Assistent wendet die Seed-Datei an und erstellt Collections, Menüs, Weiterleitungen und Inhalte
5. Die Website ist einsatzbereit

Theme installieren

Der folgende Befehl erstellt eine Website aus einer offiziellen Theme-Vorlage:

npm create astro@latest -- --template @emdash-cms/template-blog

Community-Themes, die auf GitHub gehostet werden, verwenden das github:-Vorlagenpräfix:

npm create astro@latest -- --template github:user/emdash-portfolio

Nach dem Scaffolding Abhängigkeiten installieren und den Dev-Server starten:

cd my-site
npm install
npm run dev

Besuchen Sie http://localhost:4321/_emdash/admin, um den Setup-Assistenten abzuschließen.

Der Setup-Assistent

Der Setup-Assistent wird beim ersten Admin-Besuch automatisch ausgeführt. Er führt folgende Schritte aus:

1. Abfrage von Website-Titel, Tagline und Admin-Anmeldedaten
2. Option zum Einbeziehen von Beispielinhalten
3. Anwendung der Seed-Datei auf die Datenbank
4. Weiterleitung zum Admin-Dashboard

Offizielle Themes

EmDash bietet offizielle Starter-Themes, die jeweils in lokalen (SQLite + Dateisystem) und Cloudflare (D1 + R2) Varianten verfügbar sind:

Cloudflare-Varianten

Für die Bereitstellung auf Cloudflare Workers mit D1 und R2 fügen Sie -cloudflare an den Vorlagennamen an, wie in den folgenden Befehlen:

npm create astro@latest -- --template @emdash-cms/template-blog-cloudflare
npm create astro@latest -- --template @emdash-cms/template-portfolio-cloudflare
npm create astro@latest -- --template @emdash-cms/template-marketing-cloudflare

Diese Varianten enthalten wrangler.jsonc für die Deployment-Konfiguration.

Anpassung nach der Installation

Nach Abschluss des Setup-Assistenten ist die Website ein Standard-Astro-Projekt. Passen Sie es wie jede Astro-Website an:

• Seiten in src/pages/ bearbeiten
• Layouts in src/layouts/ ändern
• Collections über die Admin-UI hinzufügen
• Astro-Integrationen installieren
• Überall bereitstellen, wo Astro läuft

Die Seed-Datei wird nur während der Ersteinrichtung verwendet. Danach verwalten Sie das Content-Modell im Admin-Panel oder mit der CLI.

Nächste Schritte

• Themes erstellen — Erstellen Sie Ihr eigenes EmDash-Theme
• Seed-Datei-Format — Referenz für die Seed-Datei-Struktur
• Erste Schritte — Erstellen Sie Ihre erste EmDash-Website