Sections sind wiederverwendbare Gruppen von Portable-Text-Blöcken. Redakteure können sie in jedes Portable-Text-Feld einfügen und die eingefügten Blöcke anschließend ändern, ohne die Quell-Section zu verändern.
Verwenden Sie Sections für wiederkehrende Ausgangspunkte wie einen Call-to-Action, eine Autorenbiografie oder einen Standardhinweis. Verwenden Sie einen Widget-Bereich, wenn ein zentral verwalteter Wert überall aktualisiert werden soll, wo er erscheint.
Eine Section erstellen
Erstellen und verwalten Sie Sections unter Sections im EmDash-Admin.
-
Klicken Sie auf New section und geben Sie einen Titel, einen Slug und optional eine Beschreibung ein.
-
Fügen Sie den Inhalt hinzu, den Redakteure erhalten sollen, wenn sie die Section einfügen.
-
Fügen Sie Suchbegriffe für Begriffe hinzu, die Redakteure verwenden könnten, wenn sie nach der Section suchen.
-
Speichern Sie die Section.
Section-Slugs bestehen aus Kleinbuchstaben, Ziffern und Bindestrichen. Der Slug identifiziert die Section in Templates und in der API; er ist keine öffentliche Seiten-URL.
Eine Section in Inhalte einfügen
-
Setzen Sie den Cursor in ein Portable-Text-Feld und geben Sie
/sectionein. -
Suchen Sie die Section nach Titel, Beschreibung oder Schlüsselwort.
-
Wählen Sie die Section aus, um ihre Blöcke an der Cursorposition einzufügen.
-
Bearbeiten Sie den eingefügten Inhalt nach Bedarf und speichern Sie dann den Eintrag.
Der Editor kopiert den Portable Text der Section in den Eintrag. Spätere Änderungen an der Section in der Bibliothek ändern bereits eingefügte Kopien nicht.
Sections in einer Seed-Datei bereitstellen
Ein Theme oder Starter kann Sections in seiner Seed-Datei bereitstellen. Geben Sie jedem Portable-Text-Block und jedem Span einen stabilen _key, wie bei anderen Seed-Inhalten.
Die folgende Seed-Datei fügt eine Newsletter-Section hinzu:
{
"version": "1",
"sections": [
{
"slug": "newsletter-signup",
"title": "Newsletter signup",
"description": "A short newsletter call to action",
"keywords": ["newsletter", "subscribe", "email"],
"source": "theme",
"content": [
{
"_type": "block",
"_key": "newsletter-heading",
"style": "h3",
"children": [
{
"_type": "span",
"_key": "newsletter-heading-text",
"text": "Receive new articles by email"
}
]
},
{
"_type": "block",
"_key": "newsletter-body",
"style": "normal",
"children": [
{
"_type": "span",
"_key": "newsletter-body-text",
"text": "Subscribe for occasional updates."
}
]
}
]
}
]
}
Führen Sie emdash seed --validate aus, bevor Sie eine von Hand geschriebene Seed-Datei anwenden. Optionen zum Anwenden und zur Konfliktbehandlung finden Sie unter Seed-Dateien.
Von Themes bereitgestellte Sections verwenden die Quelle theme. Im Admin erstellte Sections verwenden user, und von EmDash importierte wiederverwendbare WordPress-Blöcke verwenden import. Den Import-Workflow finden Sie unter Inhaltsimport.
Eine Section in einem Template rendern
Die meisten Sites rendern den Inhalt einer Section als Teil des Eintrags, in den er kopiert wurde. Um den aktuellen Wert aus der Bibliothek direkt zu rendern, rufen Sie die Section über ihren Slug ab und übergeben Sie deren Inhalt an PortableText.
Die folgende Komponente rendert eine zentral abgefragte Newsletter-Section:
---
import { getSection } from "emdash";
import { PortableText } from "emdash/ui";
const section = await getSection("newsletter-signup");
---
{section && (
<aside aria-label={section.title}>
<PortableText value={section.content} />
</aside>
)}
Dieser direkte Rendering-Pfad liest den Wert aus der Bibliothek bei jedem Rendern. Eine spätere Änderung an der Section wirkt sich daher auf jede Stelle aus, an der diese Komponente verwendet wird.
Die Laufzeit-API-Referenz dokumentiert Section-Abfragen und Paginierung. Für programmgesteuerte Änderungen authentifizieren Sie sich mit einem Bearer-Token und fügen jeder zustandsändernden Anfrage X-EmDash-Request: 1 hinzu. Anfragekörper und Antworten finden Sie unter den Section-Endpunkten.