dorfteich/docs/de/tutorial/19-standard-bausteine.md
Claude Fable 5 93cbe6499d
All checks were successful
CD / Build and push images (push) Successful in 1m10s
CD / Deploy to Test (push) Successful in 10s
CD / Smoke tests against Test (push) Successful in 1m14s
CD / Promote to Int (push) Successful in 11s
CI / Lint, typecheck, test (push) Successful in 4m29s
CI / Build container images (push) Has been skipped
CI / Auth e2e pack (push) Successful in 6m34s
CI / Import/export fidelity gate (push) Successful in 53s
docs(tutorial): add 20 screenshots (taken as Nadia on prod), wire them into the chapters
Before/after pair for chapter 4 via temporary version rollback; the two
remaining placeholders (notification inbox, live cursors) need a second
account and are deferred.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC
2026-07-18 14:56:52 +02:00

75 lines
3.2 KiB
Markdown

# Die Standard-Bausteine im Schaufenster
Dorfteich bringt fünf Plugins mit. Dieses Kapitel ist ein
Schaufensterbummel: je ein Blick, wofür jeder Baustein gut ist — ohne
Bedienungsanleitung. (Die beiden Diagramm-Bausteine haben eigene kleine
Welten; hier geht es nur darum, dass du weißt, was es gibt.)
## Mermaid-Diagramm — Diagramme aus Text
Ein **Block** für die Seitenmitte: Du beschreibst in Textform, was
zusammenhängt („A führt zu B, B führt zu C") — der Baustein zeichnet
daraus ein sauberes Diagramm: Ablaufpläne, Zeitleisten, Organigramme.
Ideal, wenn das Diagramm mit dem Inhalt mitwachsen soll: Text ändern,
Zeichnung folgt.
In Nadias Teich zeichnet ein Mermaid-Block den Wochenplan auf ihrer
Seite
[Marathon-Training](https://dorfteich.online/public/nadia-morgenstern/marathon-training).
![Der Mermaid-Trainingsplan auf Nadias Marathon-Seite](img/19-mermaid-marathon.png)
## draw.io-Diagramm — frei zeichnen
Das Gegenstück für alle, die lieber **zeichnen statt beschreiben**: Ein
vollwertiges Zeichenprogramm öffnet sich im Vollbild — Kästen, Pfeile,
Formen, alles frei platzierbar. Gut für Skizzen, Lagepläne,
Schaubilder. Beim Schließen landet die Zeichnung als Bild in der Seite;
zum Weiterzeichnen öffnest du sie einfach wieder.
Nadia hat damit die Route ihrer liebsten Schotterrunde auf der Seite
[Gravel](https://dorfteich.online/public/nadia-morgenstern/gravel)
skizziert.
![Nadias Routen-Skizze aus dem draw.io-Baustein](img/19-drawio-gravel.png)
## Inhaltsverzeichnis — lange Seiten gliedern
Ein **Seiten-Werkzeug**: Es sitzt hinter dem Werkzeug-Symbol in der
Kopfleiste, liest die Überschriften der geöffneten Seite und zeigt ein
klickbares Inhaltsverzeichnis — ohne dass du irgendetwas in den Text
einbauen musst. Schreibst du einen neuen Abschnitt, ist er beim
nächsten Öffnen einfach da. Probier es auf Nadias Seite
[Konzert-Notizen](https://dorfteich.online/public/nadia-morgenstern/konzert-notizen),
die mit ihren Zwischenüberschriften genau dafür gebaut ist.
![Das Inhaltsverzeichnis als Seiten-Werkzeug auf den Konzert-Notizen](img/19-inhaltsverzeichnis.png)
## Seitenindex — den Teich auflisten
Das zweite **Seiten-Werkzeug**: eine automatisch aktuelle Liste der
Seiten des Teichs, nach Wunsch nach Label gefiltert. Praktisch, wenn
die Sammlung groß wird und du eine lebende Übersicht willst, die
niemand von Hand pflegen muss.
## Abschnitts-Stile — Kästen mit Charakter
Eine kleine Familie von Gestaltungen für die Werkzeugleiste:
**Info-Kasten**, **Warnung**, **Hervorhebung**, **Farbige Box**. Damit
hebst du im Bearbeitungsmodus ganze Absätze vom Beiläufigen ab — der
Hinweis, der nicht überlesen werden soll, bekommt einen farbigen
Rahmen.
## Probier es aus
Such dir **einen** Baustein aus diesem Schaufenster aus — für den
Anfang empfehlen sich das **Inhaltsverzeichnis** (öffne es über das
Werkzeug-Symbol auf deiner längsten Seite) oder ein **Info-Kasten** aus
den Abschnitts-Stilen. Mehr als einen brauchst du heute nicht; die
anderen laufen dir wieder über den Weg, wenn du sie brauchst.
---
Weiter: [Kapitel 20 — Dein Profil und deine Einstellungen](20-profil-einstellungen.md)
· [Zum Überblick](README.md)