Sections

Sections sind wiederverwendbare Inhaltsblöcke, die Redakteure über Slash-Befehle in beliebige Inhalte einfügen können. Verwenden Sie sie für gängige Muster wie CTAs, Testimonials, Feature-Raster oder beliebige Inhalte, die auf mehreren Seiten erscheinen.

Sections abfragen

getSection

Das folgende Beispiel ruft eine einzelne Section anhand ihres Slugs ab:

import { getSection } from "emdash";

const cta = await getSection("newsletter-cta");

if (cta) {
  console.log(cta.title);    // "Newsletter CTA"
  console.log(cta.content);  // PortableTextBlock[]
}

getSections

Das folgende Beispiel ruft mehrere Sections mit optionalen Filtern ab:

import { getSections } from "emdash";

// Get all sections
const { items: all } = await getSections();

// Filter by source
const { items: themeSections } = await getSections({ source: "theme" });

// Search by title/keywords
const { items: results } = await getSections({ search: "newsletter" });

getSections gibt { items: Section[], nextCursor?: string } gemäß dem Standard-Paginierungsmuster zurück.

Section-Struktur

Eine Section hat die folgende Form:

interface Section {
  id: string;
  slug: string;
  title: string;
  description?: string;
  keywords: string[];
  content: PortableTextBlock[];
  previewUrl?: string;
  source: "theme" | "user" | "import";
  themeId?: string;
  createdAt: string;
  updatedAt: string;
}

Quellentypen

Sections in Inhalten verwenden

Redakteure fügen Sections über den /section Slash-Befehl im Rich-Text-Editor ein.

Der Portable Text-Inhalt der Section wird in das Dokument kopiert. Der eingefügte Inhalt ist eigenständig: Redakteure können ihn anpassen, und spätere Änderungen an der Section wirken sich nicht auf bereits platzierte Kopien im Inhalt aus.

Sections erstellen

In der Admin-Oberfläche

1. Navigieren Sie zu Sections in der Admin-Seitenleiste

2. Klicken Sie auf New Section

3. Füllen Sie aus:

   • Title - Anzeigename für die Section
   • Slug - URL-Identifikator (automatisch aus dem Titel generiert)
   • Description - Hilfetext für Redakteure

4. Fügen Sie Inhalte mit dem Rich-Text-Editor hinzu

5. Setzen Sie optional Schlüsselwörter für eine einfachere Auffindbarkeit

Über Seed-Dateien

Die folgende Seed-Datei definiert zwei Sections für ein Theme:

{
  "sections": [
    {
      "slug": "hero-centered",
      "title": "Centered Hero",
      "description": "Full-width hero with centered heading and CTA",
      "keywords": ["hero", "banner", "header"],
      "content": [
        {
          "_type": "block",
          "style": "h1",
          "children": [{ "_type": "span", "text": "Welcome to Our Site" }]
        },
        {
          "_type": "block",
          "children": [{ "_type": "span", "text": "Your tagline goes here." }]
        }
      ]
    },
    {
      "slug": "newsletter-cta",
      "title": "Newsletter CTA",
      "keywords": ["newsletter", "subscribe", "email"],
      "content": [
        {
          "_type": "block",
          "style": "h3",
          "children": [{ "_type": "span", "text": "Subscribe to our newsletter" }]
        }
      ]
    }
  ]
}

Über WordPress-Import

WordPress-wiederverwendbare Blöcke (wp_block Post-Typ) werden automatisch als Sections importiert:

• Source wird auf "import" gesetzt
• Gutenberg-Inhalt wird in Portable Text konvertiert

Sections programmgesteuert rendern

Das folgende Beispiel rendert den Inhalt einer Section serverseitig, außerhalb des Editors:

---
import { getSection } from "emdash";
import { PortableText } from "emdash/ui";

const newsletter = await getSection("newsletter-cta");
---

{newsletter && (
  <aside class="cta-box">
    <PortableText value={newsletter.content} />
  </aside>
)}

Admin-UI-Funktionen

Die Sections-Bibliothek (/_emdash/admin/sections) bietet:

• Rasteransicht mit Section-Vorschauen
• Suche nach Titel und Schlüsselwörtern
• Filter nach Quelle
• Schnellkopie Slug in Zwischenablage
• Bearbeiten von Section-Inhalt und Metadaten
• Löschen mit Bestätigung (warnt bei Theme-Sections)

API-Referenz

getSection(slug)

Rufen Sie eine Section anhand ihres Slugs ab.

Parameter:

• slug — Der eindeutige Identifikator der Section (string)

Rückgabe: Promise<Section | null>

getSections(options?)

Listen Sie Sections mit optionalen Filtern auf.

Parameter:

• options.source — Nach Quelle filtern: "theme", "user" oder "import"
• options.search — Suche nach Titel, Beschreibung und Schlüsselwörtern
• options.limit — Seitengröße (Standard 50, maximal 100)
• options.cursor — Paginierungs-Cursor von einem vorherigen nextCursor

Rückgabe: Promise<{ items: Section[]; nextCursor?: string }>

REST API

Sections auflisten

Listen Sie Sections auf, optional gefiltert nach Quelle oder Suchbegriff:

GET /_emdash/api/sections
GET /_emdash/api/sections?source=theme
GET /_emdash/api/sections?search=newsletter

Section abrufen

Rufen Sie eine einzelne Section anhand ihres Slugs ab:

GET /_emdash/api/sections/newsletter-cta

Section erstellen

Erstellen Sie eine Section mit einer POST-Anfrage:

POST /_emdash/api/sections
Content-Type: application/json

{
  "slug": "my-section",
  "title": "My Section",
  "description": "Optional description",
  "keywords": ["keyword1", "keyword2"],
  "content": [...]
}

Section aktualisieren

Aktualisieren Sie eine Section mit einer PUT-Anfrage:

PUT /_emdash/api/sections/my-section
Content-Type: application/json

{
  "title": "Updated Title",
  "content": [...]
}

Section löschen

Löschen Sie eine Section anhand ihres Slugs:

DELETE /_emdash/api/sections/my-section

Nächste Schritte

• Mit Inhalten arbeiten - Erfahren Sie mehr über den Rich-Text-Editor
• Widget Areas - Für synchronisierte dynamische Inhalte
• Inhaltsimport - WordPress-wiederverwendbare Blöcke importieren