Content Widgets

Artikel-Widgets als Inhaltsblöcke: Hinweise, Akkordeons, Tabs, Schritte, Produktboxen, Einbettungen, Code, Karten, Zitate, Inhaltsverzeichnis und neueste Beiträge.

Erweiterung

Content Widgets

Artikel-Widgets als Inhaltsblöcke: Hinweise, Akkordeons, Tabs, Schritte, Produktboxen, Einbettungen, Code, Karten, Zitate, Inhaltsverzeichnis und neueste Beiträge.

Kategorie: widgets
Status: Verfügbar
Version: 1.0.4
Preis: Unbekannt
Quelle: Offizielles Plugin-Register
Installation: Sandbox-Plugin aus dem Register
Geprüft: 2026-10-21

In Claude öffnen In ChatGPT öffnen

Auf X teilen Auf LinkedIn teilen Auf Reddit teilen

Beschreibung

Content Widgets

Live-Demo: emdashhq.com/blog/widget-gallery — alle neunzehn Widgets in einem Artikel dargestellt.

Eine Sammlung von Artikel-Widgets für EmDash-Websites: Hinweisboxen, Akkordeons, Tabs, Checklisten, Schaltflächen, YouTube- und iframe-Einbettungen, Produkt-/Bewertungsboxen, Zitate zum Hervorheben, Faktentabellen, ein automatisches Inhaltsverzeichnis, Serien-Navigation und eine Live-Liste der „neuesten Beiträge“.

Jedes Widget ist ein Blocktyp eines blocks-Feldes, sodass Redakteure sie in jedes blockbasierte Feld ziehen können — Seiteninhalt, Blogbeitragstexte, Landingpages — überall dort, wo Ihr Schema sie zulässt.

Was enthalten ist

Neunzehn Blocktypen, alle mit dem Präfix widget_: Prose, Notice, Accordion, Tabs, Checklist, Steps, Button, YouTube, Embed, Image, Code, Product box, Link cards, Pull quote, Facts table, Table of contents, Series nav, Latest posts und Divider.

So funktioniert es

Sandbox-Plugins können keine Astro-Render-Komponenten mitliefern, daher werden die Widgets als Blocktyp-JSON + fertige Astro-Komponenten im Verzeichnis site/ des Pakets verteilt. Sie kopieren sie einmal in Ihre Website; das Plugin liefert das gemeinsame Laufzeitverhalten (Datenschutzmodus für YouTube, die Affiliate-Hinweiszeile, die Beitragsabfrage) über zwei öffentliche Routen, die die Komponenten im selben Prozess aufrufen — ohne HTTP-Roundtrip.

Das Plugin fügt außerdem eine Admin-Seite Widget catalog hinzu, die die Felder jedes Blocks dokumentiert, sowie eine Seite Setup guide mit den genauen Installationsschritten und dem Einstellungsstatus.

Installation

1. Das Plugin installieren

Installieren Sie @bitdoze.com/emdashhq-widgets aus der EmDash-Plugin-Registry oder verknüpfen Sie es als Datei-Abhängigkeit und registrieren Sie es unter sandboxed: in astro.config.mjs:

import widgetsPlugin from "emdashhq-widgets";

emdash();

Das Plugin fordert content:read und schema:read an — genehmigen Sie sie, damit das Widget Latest posts und die Route posts funktionieren. Statische Widgets werden auch ohne sie dargestellt.

2. Die Blocktypen zu Ihrem Schema hinzufügen

Kopieren Sie site/block-types/*.json in das Array blockTypes Ihrer Seed-Datei (oder senden Sie den Inhalt jeder Datei per POST an /_emdash/api/schema/block-types auf einer Live-Website) und tragen Sie die Typen dann in die allowedTypes jener blocks-Felder ein, die sie akzeptieren sollen — zum Beispiel pages.content oder posts.body.

3. Die Renderer registrieren

Kopieren Sie site/components/*.astro, site/components/config.ts, site/components/icons.ts, site/widget-components.ts und site/WidgetBlocks.astro in Ihr Projekt und rendern Sie dann entweder WidgetBlocks für ein reines Widget-Feld:

oder verteilen Sie widgetComponents in Ihre bestehende Zuordnung:

const blockComponents = defineBlockComponents();

4. Konfigurieren

Die Einstellungen finden Sie unter Plugins → Content Widgets → Settings:

Privacy-enhanced YouTube embeds — liefert Player von youtube-nocookie.com aus (standardmäßig aktiv).
Affiliate disclosure — Zeile im Kleingedruckten innerhalb der Product-box-Widgets; leer blendet sie aus.
Posts collection — Standard-Collection für das Widget Latest posts und die Route posts.

FAQ

Warum muss ich Dateien kopieren, statt dass das Plugin es tut? Sandbox-Plugins laufen in einer isolierten Laufzeit und können keine Astro-Render-Komponenten registrieren. Das Verzeichnis site/ enthält dieselben Blocktyp-JSON-Dateien und Komponenten, die der Plugin-Autor verwendet, daher ist die Installation ein einmaliges Kopieren in Ihr Repository — danach verhalten sich die Widgets wie Ihre eigenen Blocktypen.

Funktionieren die Widgets ohne installiertes Plugin? Die statischen schon — Prose, Notice, Accordion, Tabs, Checklist, Button, Embed, Quote, Facts, TOC und Series brauchen nur die Blocktypen und Komponenten. YouTube, Product box und Latest posts lesen Plugin-Einstellungen oder Routen; ohne das Plugin fallen sie auf Standardwerte zurück (No-Cookie aktiv, kein Hinweis, leere Liste).

Setzt das YouTube-Widget Cookies? Es wird kein Player geladen, bevor der Besucher auf das Vorschaubild klickt. Mit der Standard-Datenschutzeinstellung kommt der Player dann von youtube-nocookie.com, das auch dann keine Tracking-Cookies setzt.

Wie erstellt Latest posts seine Liste? Die Komponente ruft die öffentliche Route posts des Plugins im selben Prozess auf (keine HTTP-Anfrage). Die Route listet veröffentlichte Einträge der konfigurierten Collection, neueste zuerst, und löst die öffentliche URL jedes Eintrags aus dem urlPattern seiner Collection auf.

Kann ich das Aussehen der Widgets anpassen? Ja — jede Komponente verwendet wgt-*-Klassen und liest Ihre Design-Tokens (--color-brand, --color-surface, …) mit neutralen Rückfallwerten. Überschreiben Sie die Klassen oder Tokens, um sie an Ihr Theme anzupassen.

Funktionieren die Widgets auch in normalen Seiten? Ja. Fügen Sie die Typen widget_* den allowedTypes eines beliebigen blocks-Feldes hinzu — Seiten, Beiträge oder alles andere.

Änderungsprotokoll

1.0.4

Tabs ohne JavaScript: Beschriftungen fallen auf Anker innerhalb der Seite zurück, und jedes Panel bleibt sichtbar. Mit JS werden sie zu echten Tabs mit Pfeiltasten, Pos1/Ende und wanderndem Tabindex aufgewertet.
Doku: Der Link zur Galerie-Demo enthält UTM-Parameter.

1.0.3

Product box: Das Layout ohne Bild, das den Inhalt in eine schmale Spalte presste, wurde behoben; die Medienspalte wird jetzt nur noch dargestellt, wenn ein Bild gesetzt ist
Neues Styling der Product box: Hinweiszeile in Festbreitenschrift, Preis-Chip, Häkchen/Kreuz-Markierungen bei Vor- und Nachteilen, Schaltfläche im Stil der Website-Schaltflächen
Das Symbolset der Website erhielt ein x-Symbol für die Nachteil-Spalte

1.0.2

Doku: Die Beschreibung verlinkt auf den Live-Demo-Beitrag der Widget-Galerie

1.0.1

Assets für den Registry-Eintrag: Plugin-Symbol, Banner und Screenshots
Doku-Korrekturen: Liste der 19 Blöcke in Beschreibung und Änderungsprotokoll

1.0.0

Erste Version: 19 widget_*-Blocktypen (prose, notice, accordion, tabs, checklist, steps, button, YouTube, embed, image, code, product, link cards, quote, facts, table of contents, series nav, latest posts, divider)
Blocktyp-JSON und eigenständige Astro-Komponenten unter site/
Öffentliche Route config für gemeinsame Einstellungen (YouTube-Datenschutzmodus, Affiliate-Hinweis, Beitrags-Collection)
Öffentliche Route posts, die die neuesten veröffentlichten Einträge mit aufgelösten URLs auflistet
Block-Kit-Admin-Seiten: Widget-Katalog und Einrichtungsanleitung