E EmDash CMS Everything Guides, use cases, plugins, templates
Deutsch

Themes – Überblick

Auf dieser Seite

Ein EmDash-Theme ist eine vollständige Astro-Site – Seiten, Layouts, Komponenten, Styles – verteilt über create-astro. Es enthält außerdem eine Seed-Datei, die die Datenbank beim ersten Start mit Collections, Feldern, Menüs, Redirects und Beispielinhalten befüllt.

Was ein Theme liefert

Ein Theme ist ein lauffähiges Astro-Projekt mit:

  • Pages — Astro-Routen zum Rendern von Inhalten (Startseite, Blogposts, Archive usw.)
  • Layouts — Gemeinsame HTML-Struktur
  • Components — Wiederverwendbare UI-Elemente (Navigation, Cards, Footer)
  • Styles — CSS oder Tailwind-Konfiguration
  • Eine Seed-Datei — JSON, das dem CMS sagt, welche Content-Typen und Felder angelegt werden

Theme-Struktur

my-theme/
├── package.json           # Theme-Metadaten + EmDash-Config
├── astro.config.mjs       # Astro-Integration
├── 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 Sites bootstrappen

Wenn du eine Site aus einem Theme erstellst, passiert Folgendes:

  1. create-astro erzeugt das Projekt aus der Vorlage
  2. Du führst npm install und npm run dev aus
  3. Beim ersten Admin-Besuch läuft automatisch der Setup-Assistent
  4. Der Assistent wendet die Seed-Datei an und legt Collections, Menüs, Redirects und Inhalte an
  5. Die Site ist einsatzbereit

Für Nutzerinnen und Nutzer

Theme wählen, Assistent ausführen, loslegen. Keine Datenbankkenntnisse nötig.

Für Entwicklerinnen und Entwickler

Themes sind normale Astro-Projekte. Nach dem Scaffolding frei anpassbar.

Theme installieren

Nutze create-astro mit einer Vorlage:

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

Community-Themes funktionieren über GitHub:

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

Nach der Installation:

cd my-site
npm install
npm run dev

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

Der Setup-Assistent

Der Setup-Assistent startet automatisch beim ersten Admin-Besuch. Er:

  1. Fragt nach Site-Titel, Tagline und Admin-Zugangsdaten
  2. Bietet optional Beispielinhalte an
  3. Wendet die Seed-Datei auf die Datenbank an
  4. Leitet zum Admin-Dashboard weiter
┌────────────────────────────────────────────────────────┐
│                                                        │
│                    ◆ EmDash                          │
│                                                        │
│              Willkommen auf deiner neuen Site          │
│                                                        │
│  Site-Titel:     [Mein großartiger Blog              ] │
│  Tagline:        [Gedanken und Ideen                 ] │
│                                                        │
│  Admin-E-Mail:   [[email protected]                  ] │
│  Admin-Passwort: [••••••••••••                       ] │
│                                                        │
│  ☑ Beispielinhalte einbinden                          │
│                                                        │
│                   [Site erstellen →]                   │
│                                                        │
│  Vorlage: Blog-Starter                                 │
│  Erstellt: 2 Collections, 3 Seiten, 1 Post            │
└────────────────────────────────────────────────────────┘

Offizielle Themes

EmDash liefert offizielle Starter-Themes, jeweils in Varianten für lokal (SQLite + Dateisystem) und Cloudflare (D1 + R2):

ThemeBeschreibungEinsatz
@emdash-cms/template-blogSchlichter Blog mit Posts, Seiten, Kategorien und Dark ModePersönliche Blogs, einfache Sites
@emdash-cms/template-portfolioEditorial-Portfolio mit Projekten, Serif-Schrift (Playfair Display), bildstarken LayoutsFreelancer, Agenturen, Kreative
@emdash-cms/template-marketingMarkenstarke Site mit Portable-Text-Blöcken (Hero, Features, Testimonials, Pricing, FAQ)Landingpages, SaaS, Produktmarketing

Cloudflare-Varianten

Für Cloudflare Pages mit D1 und R2 hänge -cloudflare an den Template-Namen:

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 Deploy-Konfiguration.

Anpassen nach der Installation

Nach dem Setup-Assistenten ist deine Site ein normales Astro-Projekt. Passe sie wie jede Astro-Site an:

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

Die Seed-Datei wird nur bei der Ersteinrichtung genutzt. Danach liegt dein Schema in der Datenbank.

Nächste Schritte