Zum Hauptinhalt springen

Dieses Handbuch pflegen

Das Handbuch ist mit Docusaurus gebaut und liegt als eigenes, unabhängiges Projekt unter Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026\Handbuch. Es wird getrennt von der Anwendung selbst veröffentlicht — der App-eigene deploy.ps1 fasst netlify-site\handbuch\ nie an.

Projektaufbau​

Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026\Handbuch\
├── docs/                    Inhalt — eine .md-Datei je Seite
│   ├── index.md             Startseite
│   ├── benutzer/            Benutzerhandbuch
│   └── admin/               Administration (diese Seite)
├── src/css/custom.css       Corporate-Design-Theme (Deep Space Blue)
├── static/
│   ├── img/screens/         Screenshots
│   └── fonts/                Hausschrift „The Group"
├── docusaurus.config.js     Grundeinstellungen, Navigation
├── sidebars.js               Reihenfolge der Kapitel in der Seitenleiste
└── package.json

Text ändern​

Jede Seite ist eine gewöhnliche Markdown-Datei unter docs/. Einfach mit einem Texteditor öffnen, ändern, speichern — kein technisches Wissen notwendig außer den üblichen Markdown-Grundlagen (Überschriften mit #, Listen mit -, Links mit [Text](/pfad/)).

Neue Seite hinzufügen​

  1. Neue .md-Datei unter docs/benutzer/ oder docs/admin/ anlegen, mit einem kurzen Titel im Frontmatter (---\ntitle: ...\n---).
  2. Die Datei (ohne .md) in sidebars.js an der gewünschten Stelle in die passende Liste (benutzer oder admin) eintragen.
  3. Bauen und veröffentlichen (siehe unten).

Screenshot ergänzen​

  1. Bild unter static/img/screens/ ablegen (sprechender Dateiname, kleingeschrieben, Bindestriche statt Leerzeichen).
  2. In der Markdown-Seite einbinden (siehe Beispiel unten).
![Alt-Text](/img/screens/dateiname.png)
<span class="bildunterschrift">Kurze Bildunterschrift.</span>

Fenster lassen sich am einfachsten mit der Windows-eigenen Ausschnitt-&-Skizze-Funktion (Win+Umschalt+S, Option „Fenster ausschneiden") in guter Qualität festhalten.

Lokal ansehen (Vorschau)​

cd Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026\Handbuch
npm install    # nur beim ersten Mal, oder nach Änderungen an package.json
npm run start

Öffnet eine lokale Vorschau unter http://localhost:3000/handbuch/ mit automatischem Neuladen bei jeder Änderung.

Bauen und veröffentlichen​

cd Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026\Handbuch
npm run build

Erzeugt den statischen Seiteninhalt in build\. Dieser Ordner wird anschließend eins zu eins nach Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026\netlify-site\handbuch\ kopiert und zusammen mit der übrigen Installationsseite hochgeladen:

# Inhalt von build\ nach netlify-site\handbuch\ kopieren (vorhandenen Inhalt ersetzen)
Remove-Item "Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026\netlify-site\handbuch\*" -Recurse -Force
Copy-Item "Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026\Handbuch\build\*" "Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026\netlify-site\handbuch\" -Recurse

cd Z:\VWBS\VWGCBS_Dokumentengesamtliste_2026
npx netlify-cli deploy --prod --dir="netlify-site"

Diese beiden Schritte lassen sich bei Bedarf zu einem eigenen kleinen veroeffentlichen.ps1-Skript im Handbuch-Ordner zusammenfassen — bislang sind es bewusst getrennte Befehle, damit sich das Ergebnis vor dem Upload noch lokal unter netlify-site\handbuch\index.html im Browser prüfen lässt.

Kein Einfluss auf die App-Veröffentlichung

Diese Schritte betreffen ausschließlich den Handbuch-Ordner. Ein normaler .\deploy.ps1-Lauf im App-Projekt lässt netlify-site\handbuch\ unangetastet (siehe Installation verteilen).

Design ändern​

Farben, Schriftarten und Layout stehen zentral in src/css/custom.css als CSS-Variablen — abgeleitet aus CorporateDesign.cs der Anwendung. Wird das Corporate Design der Anwendung geändert, sollten dieselben Hex-Werte hier nachgezogen werden, damit App und Handbuch optisch zusammenpassen.

Suche​

Die Volltextsuche (oben rechts) wird beim Bauen automatisch aus allen Markdown-Seiten neu erzeugt (@easyops-cn/docusaurus-search-local) — es ist keine gesonderte Pflege nötig.