Docsbook
Übersicht

Inhalts-Widgets

Ein Docsbook-Inhalts-Widget stellt einen Teil deiner Seite als umfangreichen UI-Block dar – ein Raster aus Karten, eine einklappbare FAQ oder nummerierte Schritte – ohne Markdown zu hinterlassen.

Du kennzeichnest den Bereich mit zwei HTML-Kommentaren. Sie sind in jedem Markdown-Reader unsichtbar, sodass dieselbe Datei weiterhin auf GitHub, in deinem Editor und in jedem anderen Tool korrekt lesbar bleibt. Nur Docsbook strukturiert sie neu.

<!-- widget:cards -->
 
- [Search](/docsbook-io/docs/content/features/search) — Let readers find a page by keyword {search}
- [Page feedback](/docsbook-io/docs/content/features/feedback) — Ask whether the page helped {thumbs-up}
 
<!-- /widget -->

Widgets werden auf dem Server gerendert, sodass die Ausgabe aus einfachem HTML besteht: von Suchmaschinen indexierbar, für KI-Crawler lesbar und auch bei deaktiviertem JavaScript funktionsfähig.

Die Regeln#

  • Jeder Marker steht in einer eigenen Zeile, mit einer Leerzeile zwischen ihm und dem Inhalt.
  • Widgets werden nicht verschachtelt. Ein innerer Marker lässt den äußeren Bereich als gewöhnliches Markdown erscheinen.
  • Es wird niemals etwas ausgeblendet. Ein unbekannter Widget-Name oder ein fehlender schließender Marker wird zu gewöhnlichem Markdown — Ihr Inhalt bleibt sichtbar.
  • Ein Widget, das Sie in den Projekteinstellungen deaktiviert haben, verhält sich genauso: Die Marker bleiben in Ihrer Datei, und der Bereich wird als gewöhnliches Markdown veröffentlicht. Siehe Ein Widget deaktivieren.
  • Schreiben Sie den Bereich zunächst so, dass er als gewöhnliches Markdown korrekt gelesen werden kann. Das Widget ist eine Präsentationserweiterung, kein Datenformat.
  • Einige Widgets akzeptieren Layoutschalter im öffnenden Marker: <!-- widget:cards cols=2 horizontal -->. Schalter stehen am Marker, niemals innerhalb des Bereichs — der Marker ist bereits unsichtbar, sodass Ihr Inhalt gewöhnliches Markdown bleibt. Ein Schalter, den ein Widget nicht erkennt, wird ignoriert; der Block wird trotzdem dargestellt.

Verfügbare Widgets#

Karten — ein Raster verknüpfter Karten

Verwandelt Linklisten in ein responsives Raster. Ideal für Index- und Hub-Seiten, von denen aus Leser zu anderen Inhalten weitergeleitet werden.

  • Jede Überschrift wird zu einer kleinen Beschriftung in Großbuchstaben über ihrem Raster. Überschriften sind optional.
  • - [Title](/href) — Description. ergibt eine Karte mit einem Titel und einer Beschreibung.
  • Beende ein Element mit {icon-name}, um ein Symbol hinzuzufügen, z. B. {rocket}, {book-open}. Die Namen stammen aus dem Lucide-Satz. Ein unbekannter Name wird stillschweigend entfernt — die geschweiften Klammern werden niemals auf der Seite ausgegeben.
  • Füge ein ![alt](https://raw.githubusercontent.com/docsbook-io/docs/main/content/features/url)-Bild in das Element ein, um anstelle eines Symbols ein echtes Bild zu verwenden — es füllt denselben Bereich aus, den auch das Symbol einnehmen würde. Besser als ein Symbol, wenn es bei der Karte um etwas Bestimmtes geht, von dem du ein Bild hast.
  • Ein Element ohne Link wird als nicht anklickbare Karte dargestellt.
<!-- widget:cards -->
 
## Start here
 
- [Search](/docsbook-io/docs/content/features/search) — Let readers find a page by keyword {search}
- [Page feedback](/docsbook-io/docs/content/features/feedback) — Ask whether the page helped {thumbs-up}
 
<!-- /widget -->

Gib einer Karte einen Inhalt. Lass nach dem Element eine Leerzeile und rücke darunter weiteres Markdown stärker ein — Absätze, eine kurze Liste, einen Ausschnitt. Es wird unter der Beschreibung dargestellt. Das lohnt sich, wenn die Karte etwas zu erklären hat; eine Karte, die nur ein Ziel beschriftet, wirkt als eine Zeile besser.

Gib einer Karte eine eigene Aktion. Wenn die letzte eingerückte Zeile ausschließlich Links enthält, wird sie zur Call-to-Action-Zeile der Karte. Ein Satz, der lediglich einen Link enthält, bleibt normaler Text.

Wähle das Layout. cols=1, cols=2, cols=3 oder cols=4 legt die Anzahl der Spalten fest; horizontal platziert das Symbol neben dem Text statt darüber, für eine kompakte Zeile. Beide werden im öffnenden Marker angegeben und können kombiniert werden. Ohne cols nimmt das Raster so viele Karten pro Zeile auf, wie die Seitenbreite zulässt, was normalerweise gewünscht ist. Auf schmalen Bildschirmen werden immer weniger Spalten angezeigt.

<!-- widget:cards cols=2 -->
 
- [Full-text search](/docsbook-io/docs/content/features/search) — Match a reader's keyword against your pages {search}
 
  Indexes every markdown file the site publishes and rebuilds itself when the
  repository changes. Nothing to reindex by hand.
 
  [Read the guide](/docsbook-io/docs/content/features/search)
 
- [Page feedback](/docsbook-io/docs/content/features/feedback) — Ask whether the page helped {thumbs-up}
 
  One click from the reader, no form and no email address. Results land per
  page, so you can sort by the pages rated worst.
 
  [Read the guide](/docsbook-io/docs/content/features/feedback)
 
<!-- /widget -->
Tabs — parallele Versionen hinter einem Umschalter

Wandelt Abschnitte mit Überschriften in eine Tab-Leiste mit einem sichtbaren Panel um. Verwenden Sie dies, wenn dieselbe Anleitung in mehreren parallelen Versionen existiert und der Leser genau eine davon benötigt: einen Paketmanager, ein Betriebssystem, ein Sprach-SDK, einen gehosteten oder selbst gehosteten Pfad.

  • Jede Überschrift wird zu einem Tab; alles darunter bis zur nächsten Überschrift derselben Ebene wird zum Panel dieses Tabs.
  • Der erste Tab wird geöffnet, platzieren Sie daher die Variante, die die meisten Leser benötigen, an erster Stelle.
  • Eine Überschrift kann mit {icon-name} enden, z. B. ### macOS {apple}. Geben Sie entweder jedem Tab ein Symbol oder keinem — eine Leiste, in der nur einige Tabs ein Symbol haben, wirkt fehlerhaft.
  • Innerhalb eines Panels ist jedes Markdown möglich, einschließlich Tabellen und Codeblöcken mit Syntaxhervorhebung.
  • Inhalte vor der ersten Überschrift werden oberhalb der Leiste als Einleitung dargestellt. Verwenden Sie sie für den einen Satz, der für jeden Tab gilt.
  • Beschränken Sie die Beschriftungen auf ein oder zwei Wörter. Die Leiste wird seitlich gescrollt, statt umzubrechen, sodass eine Beschriftung in Satzlänge die anderen Tabs aus dem Sichtfeld schiebt.
  • Bis zu 8 Tabs können umgeschaltet werden. Ein 9. Abschnitt und alle weiteren werden unterhalb der Leiste als gewöhnliche Überschriften dargestellt — nichts geht verloren, aber eine so lange Gruppe hätte eine Liste von Überschriften gebraucht.
  • Alle Panels befinden sich im Seitenquelltext und das Umschalten erfolgt ausschließlich per CSS. Daher bleibt jede Variante bei deaktiviertem JavaScript lesbar und für Crawler sichtbar.

Verwenden Sie dies nicht, um Inhalte zu verbergen, die der Leser vollständig benötigt. Das ist accordion in gescanntem Referenzmaterial; für eine Abfolge verwenden Sie einfache Überschriften.

Akkordeon — einklappbare Zeilen

Wandelt Abschnitte mit Überschriften in Zeilen um, die der Leser ausklappen kann. Am besten geeignet für Inhalte, die Nutzer überfliegen statt lesen: FAQs, Fehlerbehebung, Details zu einzelnen Optionen.

  • Jede Überschrift wird zu einer Zeile; alles darunter bis zur nächsten Überschrift derselben Ebene wird zum Inhalt dieser Zeile.
  • Innerhalb einer Zeile ist jedes Markdown möglich, einschließlich Codeblöcken und Tabellen.
  • Jede Zeile ist zunächst eingeklappt. Schreiben Sie daher Überschriften, die genug Informationen für eine Auswahl liefern, ohne dass der Leser sie öffnen muss.
  • Inhalte vor der ersten Überschrift werden oberhalb des Akkordeons als Einleitung dargestellt.
Schrittanzeige — nummerierte Schritte

Wandelt Abschnitte mit Überschriften in eine verbundene Sequenz von oben nach unten um. Verwenden Sie dies, wenn die Reihenfolge wichtig ist — bei der Installation, Einrichtung oder einem mehrstufigen Tutorial. Wenn die Reihenfolge keine Rolle spielt, verwenden Sie stattdessen accordion.

  • Jede Überschrift wird zu einem Schritt, nummeriert in der Reihenfolge des Dokuments.
  • Beim Hinzufügen oder Entfernen eines Schritts werden die übrigen Schritte automatisch neu nummeriert.
Preise — Pläne, zwischen denen der Leser wählen kann

Wandelt Pläne in eine Reihe vergleichbarer Karten oder eine Plantabelle in eine Vergleichsmatrix um. Verwenden Sie dies, wenn ein Leser zwischen Stufen wählen muss, statt Informationen über sie zu lesen.

Das Widget wählt seine Form anhand Ihres Inhalts: Sind Überschriften vorhanden, wird eine Karte pro Plan erstellt; besteht ein Bereich stattdessen aus einer einfachen Tabelle, wird er als Matrix neu dargestellt. Verwenden Sie die Form, die die Seite bereits hat.

Planform. Jede Überschrift ist ein Planname.

  • Der erste Absatz unter der Überschrift ist der Preis und wird groß dargestellt: **$20** / month hebt die Zahl hervor und hält die Einheit daneben. Schreiben Sie Free oder Contact sales auf dieselbe Weise, wenn keine Zahl vorhanden ist.
  • Der zweite Absatz beschreibt in einer Zeile, für wen der Plan gedacht ist. Er steht zwischen dem Preis und der Liste, also im schmalsten Bereich der Karte.
  • Eine Liste wird zu den enthaltenen Leistungen des Plans, wobei jeder Eintrag mit einem Häkchen versehen wird. Ein durchgestrichener Eintrag — ~~Priority support~~ — erhält einen Gedankenstrich und wird gedämpft dargestellt. So wird gezeigt, was ein günstigerer Plan nicht enthält, ohne eine zweite Liste zu benötigen.
  • Ein Absatz, der direkt unter der Überschrift ausschließlich aus **bold text** besteht, wird zum Badge des Plans und kennzeichnet ihn als hervorgehoben: mit einem Ring um die Karte und einer ausgefüllten Schaltfläche. Verwenden Sie dies für höchstens einen Plan.
  • Der letzte Absatz des Plans, der nur aus Links besteht, wird zu seinen Schaltflächen, genau wie in cta. Die erste Schaltfläche des hervorgehobenen Plans ist ausgefüllt, die übrigen sind dezent. So enthält der Block ein klar hervorgehobenes Element.

Matrixform. Die erste Spalte benennt das Merkmal, jede weitere Spalte ist ein Plan. Eine Zelle, deren gesamter Text yes, no, , , included oder none lautet, wird zu einem Häkchen oder einem Gedankenstrich, wobei das Wort für Screenreader im Markup erhalten bleibt. Eine Zelle mit beliebigem anderem Inhalt — 3 seats, Unlimited, eine Fußnote — bleibt exakt wie geschrieben. Eine leere Zelle bleibt leer: Schweigen bedeutet nicht „Nein“.

cols=1|2|3|4 an der öffnenden Markierung legt das Raster auf diese Anzahl von Spalten fest. Standardmäßig werden so viele Karten eingefügt, wie auf die Seite passen.

Schreiben Sie niemals einen Preis, Plannamen, ein Limit oder eine Leistungszusage in dieses Widget, die Sie nicht aus der Quelle entnommen haben. Es ist das einzige Widget, dessen Inhalt ein kommerzielles Versprechen darstellt.

API — ein interaktives Playground für Endpunkte

Wandelt Abschnitte zu REST-Endpunkten in ein Formular um, über das der Leser eine echte Anfrage mit seinem eigenen Schlüssel und seinen eigenen Parametern senden kann.

  • Eine Überschrift, die aus einer Methode und einem Pfad besteht — ## POST /api/v1/chat — wird zu einem Endpunktblock.
  • Die erste Tabelle darunter mit einer Spalte Field (oder einer Spalte Name / Parameter) wird zum Anfrageformular, mit einem Eingabefeld pro Zeile. Die Spalten Type, Required und Description werden verwendet, sofern vorhanden.
  • Vorlagen-Pfadsegmente wie /project/update/{projectId} erhalten immer ein eigenes Eingabefeld.
  • Ein Authorization-Eingabefeld wird immer hinzugefügt. Der Schlüssel des Lesers wird aus dessen eigenem Browser gesendet und erreicht Docsbook nie.
  • Es ist in Ordnung, Authorization als Zeile in der Tabelle zu dokumentieren: Diese Zeile wird vom darüberliegenden Header-Eingabefeld übernommen, sodass Ihre Beschreibung erhalten bleibt, statt ein zweites Mal als Feld dargestellt zu werden, das den Schlüssel in die URL aufnehmen würde.
  • Ein ###-Unterabschnitt mit einem Codeblock — ### Example, ### Response — wird in ein Beispiel-Panel neben dem Formular verschoben, wobei sein Titel erhalten bleibt. Jeder andere Unterabschnitt, etwa eine ### Errors-Tabelle, bleibt im Dokumentfluss darunter.
CTA — eine kompakte Handlungsaufforderung

Ein kleiner Block mit Rahmen, der eine Seite mit der einen nächsten Handlung abschließt, die der Leser ausführen soll.

  • Die erste Überschrift wird zum Titel des Blocks. Sie wird als gestaltete Zeile statt als echte Überschrift dargestellt und bleibt daher außerhalb der Gliederung Ihrer Seite.
  • Ein einleitender Absatz, der ausschließlich aus **bold text** besteht, wird zu einer kleinen Versalien-Zeile.
  • Ein Absatz, der nur Links enthält, wird zu den Schaltflächen: Die erste ist ausgefüllt, die übrigen haben einen Rahmen. Ein Satz, der lediglich einen Link enthält, bleibt Fließtext.
  • Verwenden Sie einen pro Seite und höchstens zwei Links. Ein zweiter Block konkurriert mit dem ersten, wodurch sich die Konversionsrate beider verschlechtert.
<!-- widget:cta -->
 
## Publish your docs from GitHub
 
Connect a repository and your markdown is live.
 
[Create a project](https://docsbook.io/start) · [See pricing](https://docsbook.io/pricing)
 
<!-- /widget -->
cta-form — ein Aufruf zum Handeln mit einem Eingabefeld

Dieselbe Struktur, bei der die Hauptaktion als ein Formular mit einem Feld dargestellt wird. Die Eingabe des Lesers wird in die Ziel-URL übernommen, sodass er auf der nächsten Seite nicht erneut eingeben muss, was er bereits eingegeben hat.

  • Die URL des ersten Links ist das Formularziel, und sein Linktext beschriftet die Schaltfläche.
  • Benennen Sie das Feld mit einem leeren Abfrageparameter: ?email= übermittelt die Eingabe des Lesers als email. Ohne Abfragezeichenfolge wird das Feld email genannt.
  • Ein Parameter, der bereits einen Wert hat, wird unverändert übernommen — ?email=&ref=docs behält ref=docs in der übermittelten URL bei, was für die Zuordnung nützlich ist.
  • Legen Sie den Platzhalter mit dem Markdown-Titel des Links fest: [Join](https://example.io/signup?email= "you@company.com").
  • Die Tastatur richtet sich nach dem Feldnamen: email öffnet eine E-Mail-Tastatur, url / site / domain eine URL-Tastatur.
  • Ein Ziel, das kein Formular verarbeiten kann, etwa mailto: oder ein seiteninterner Anker, wird zu einer einfachen Schaltfläche.

Verweisen Sie nur auf eine URL, die den Parameter tatsächlich ausliest. Eine Seite, die ihn ignoriert, verwirft die Eingabe des Lesers stillschweigend — das ist schlechter als eine einfache Schaltfläche.

recommendations — eine nach Priorität geordnete Liste von zu behebenden Punkten

Verwandelt eine Liste von Ergebnissen in ein Raster aus Karten, die jeweils ein Schweregrad-Badge und einen Link zum Handeln enthalten. Verwenden Sie dies für konkrete, priorisierte Ergebnisse zu Ihrer eigenen Dokumentation — Auditergebnisse, Probleme mit der Inhaltsqualität oder jede Liste nach dem Muster „Das ist zu beheben, nach Priorität geordnet“. Für eine einfache Liste von Zielseiten verwenden Sie stattdessen cards.

  • Jede Überschrift wird zu einer kleinen Gruppenbezeichnung in Großbuchstaben über ihrer Liste. Überschriften sind optional — lassen Sie sie bei einer einzelnen, nicht gruppierten Liste weg.
  • Jeder Listeneintrag wird zu einer Empfehlung. - [Title](/href) — Explanation. {severity}: Der Linktext ist die Überschrift, der Text nach dem Gedankenstrich erklärt, warum dies wichtig ist und was zu tun ist.
  • Beenden Sie jeden Eintrag mit einer Schweregradmarkierung — {urgent}, {worth-doing} oder {later}. Ein Eintrag ohne erkannte Markierung wird als {worth-doing} dargestellt, anstatt seinen Schweregrad zu verlieren.
  • Ein Eintrag ohne Link wird als nicht anklickbare Empfehlung dargestellt. Schreiben Sie einen solchen Eintrag nur, wenn es tatsächlich keine Zielseite für den Leser gibt.
  • Absätze zwischen einer Überschrift und ihrer Liste werden als gewöhnlicher Einleitungstext übernommen.
<!-- widget:recommendations -->
 
- [You are paying to keep the same page twice](/docs/quickstart) — "Quickstart" and "Getting started" are 96% the same and neither links to the other. Keep one, merge the other into it. {urgent}
- [214 people found "Webhooks" the hard way](/docs/webhooks) — No page links to it, yet it still gets visits. Add a link from "Integrations". {worth-doing}
- [Nobody reads "Migration notes"](/docs/migration-notes) — Zero visits although 2 pages link to it. Reword the link text. {later}
 
<!-- /widget -->

Widget hinzufügen, ohne Markdown zu bearbeiten#

Sie müssen die Marker nicht von Hand eingeben. Wählen Sie im Live-Editor einen Block aus und wählen Sie im Aktionsbereich in ein Widget umwandeln — das Menü listet die Widgets auf, die zu diesem Block passen, und die Marker werden für Sie in Ihre Quelle geschrieben. Siehe Auf der Seite bearbeiten.

Der Abschnitt Widgets in den Projekteinstellungen zeigt dieselbe Auswahl als Galerie an, jeweils mit einem Bild der Darstellung und einer Seite, auf der das erwartete Markdown beschrieben wird. Mit Auf eine Seite anwenden wird der Einstellungsbereich geschlossen und die Bearbeitung Ihrer Dokumentation aktiviert. Das jeweilige Widget wird dabei für den von Ihnen ausgewählten Block zuerst angeboten.

Ein Widget deaktivieren#

Jedes Widget ist für jedes Projekt aktiviert. Wenn eines nicht zu Ihrer Dokumentation passt, deaktivieren Sie es unter Einstellungen → Widgets, und Docsbook rendert es auf der gesamten Website nicht mehr.

Durch das Deaktivieren eines Widgets werden Ihre Dateien niemals bearbeitet. Die <!-- widget:… -->-Kommentare bleiben genau dort, wo ein Autor sie eingefügt hat, jedes Wort dazwischen wird weiterhin veröffentlicht, und der Bereich erscheint als gewöhnliches Markdown – genau wie bei einem falsch geschriebenen Widget-Namen. Aktivieren Sie es wieder, kehrt es auf jeder Seite, auf der es verwendet wurde, als formatierter Block zurück, ohne dass etwas neu geschrieben werden muss.

Zwei wichtige Folgen sollten Sie kennen:

  • Der Live-Editor bietet ein deaktiviertes Widget nicht mehr an, ebenso wenig der Assistent, wenn er eine Seite für Sie erstellt. Keiner von beiden kann Ihnen Marker übergeben, die nicht gerendert würden.
  • Seiten, die bereits in eine andere Sprache übersetzt wurden, behalten das Widget bis zu ihrem nächsten Übersetzungslauf. Nur das Original übernimmt die Änderung sofort.

Updated

War diese Seite hilfreich?