Header-Optionen
Der Header ist die obere Navigationsleiste Ihrer Docsbook-Dokumentationswebsite. Er enthält den Namen und das Logo Ihres Projekts, Ihre eigenen Links, soziale Symbole sowie die Steuerelemente für Suche, KI fragen, Design und Sprache. Jede Einstellung auf dieser Seite ist eine Anzeigeoption — Änderungen am Header werden nicht von Ihrem Projektguthaben abgezogen.
Header-Einstellungen#
| Einstellung | Was sie bewirkt |
|---|---|
| Voreinstellung für das Header-Layout | Ordnet Header-Blöcke (Theme, Suche, „Ask AI“, Navigationslinks) in einem von 5 voreingestellten Layouts an |
| Header anzeigen | Die gesamte obere Navigationsleiste ein- oder ausblenden |
| Header-Links | Benutzerdefinierte Textlinks in der Header-Navigation |
| Social-Links | Icon-Links für GitHub, Twitter und Discord |
| Theme-Umschalter im Header | Den Hell-/Dunkel-Umschalter im Header anzeigen |
| Sprachauswahl im Header | Den Sprachumschalter im Header anzeigen |
| Suchschaltfläche im Header | Ein Suchsymbol bzw. eine Suchschaltfläche im Header anzeigen |
| Hintergrundfarbe der Suchschaltfläche | Benutzerdefinierte Hintergrundfarbe für die Suchschaltfläche im Header — siehe unten |
| Hintergrundfarbe der „Ask AI“-Schaltfläche | Benutzerdefinierte Hintergrundfarbe für die „Ask AI“-Schaltfläche im Header — siehe unten |
So konfigurieren Sie den Header#
- Öffnen Sie Ihre Dokumentationswebsite.
- Float Widget → Design → Registerkarte Header.
- Füllen Sie die Felder aus und aktivieren oder deaktivieren Sie die Optionen.
- Speichern.
Header auf der Seite bearbeiten#
Sie können den Header auch dort ändern, wo Sie ihn sehen. Drücken Sie auf Ihrer Dokumentationsseite in der Symbolleiste auf Editor und klicken Sie dann auf den Teil, den Sie ändern möchten:
| Klicken Sie auf | Sie können |
|---|---|
| Den Projektnamen oder das Logo | Den Namen, das Logo oder das Symbol ändern |
| Einen Header-Link | Den Text oder die URL ändern oder ihn in eine ausgefüllte Schaltfläche umwandeln |
| Suche / KI fragen / Sprache / Design | Ausblenden |
| Ein Social-Media-Symbol | Auf eine andere Stelle verweisen oder es entfernen |
| Leeren Bereich in der Leiste | Die Layout-Voreinstellung wechseln |
Jede Aktion wird als Anfrage an den KI-Chat gesendet, der sie anschließend anwendet – so sehen Sie, was angefragt und was geändert wurde, und können die Aktion in derselben Unterhaltung rückgängig machen.
Voreinstellungen für das Header-Layout#
Die Karte Header-Layout ist die erste Karte im Header-Tab. Sie legt eine voreingestellte Anordnung der Blöcke in Ihrer oberen Navigation fest – Theme-Umschalter, Suche, „Ask AI“ und Navigationslinks –, ohne zu ändern, welche Blöcke angezeigt werden.
| Voreinstellung | Anordnung | Am besten geeignet für |
|---|---|---|
| Klassisch (Standard) | Theme, „Ask AI“ und Suche rechts gruppiert | Universeller Standard – funktioniert für die meisten Dokumentationsseiten |
| Suchzentriert | Breite Suchleiste mittig im Header, „Ask AI“ rechts | Inhaltsreiche Dokumentationen, bei denen die Suche im Vordergrund steht |
| Suche + Ask AI | Breite, mittig angeordnete Suche mit der direkt daneben platzierten „Ask AI“-Schaltfläche | Dokumentationen, bei denen Fragen an die KI ebenso wichtig sind wie die Suche |
| Zentriert | Logo links, Navigationslinks mittig, Dienstprogramme rechts | Landingpage-Stil mit 3–5 Links |
| Minimal | „Ask AI“ und Suche als reine Symbole angezeigt | Maximaler Platz für Navigationslinks und Social-Media-Symbole |
Klicken Sie auf eine Voreinstellung, um sie anzuwenden – mit einem Klick werden alle sechs zugrunde liegenden Platzierungsfelder gleichzeitig festgelegt (Theme-Seite, Suchbreite, Platzierung von „Ask AI“, „Ask AI“ nur als Symbol, Suche nur als Symbol, Position der Navigationslinks).
„Ask AI“ neben der Suche wird nur wirksam, wenn die Suchleiste breit ist. Bei einer kompakten Suche gibt es keine mittige Gruppe, der sich die Schaltfläche anschließen könnte, daher bleibt sie in der rechten Gruppe.
Layout ≠ Sichtbarkeit. Eine Voreinstellung steuert nur, wo sich ein Block befindet, niemals, ob er angezeigt wird. Wenn Sie einen Block über seinen eigenen Umschalter deaktivieren (z. B. Theme-Umschalter im Header), wird dieser Block ausgeblendet, und der restliche Header folgt weiterhin derselben Voreinstellung – die verbleibenden Blöcke rücken nicht an seine Stelle und ändern ihre Anordnung nicht.
Hintergrundfarbe der Header-Schaltfläche#
Die Karten Suche im Header und KI im Header fragen verfügen jeweils über ein eigenes Feld Hintergrundfarbe, das als Hex-Code festgelegt wird (z. B. #5B47E0). Eine hier festgelegte Farbe überschreibt den standardmäßigen gedämpften Hintergrund der Schaltfläche; der Text wechselt automatisch zu Schwarz oder Weiß, damit er darauf gut lesbar bleibt.
Lassen Sie das Feld leer, um den Standardhintergrund beizubehalten – dies erfordert nicht, dass die Akzentfarbe der Website festgelegt ist, und das Festlegen einer Akzentfarbe ändert den Hintergrund nicht.
Header-Links#
Header-Links sind die benutzerdefinierten Textlinks in der oberen Leiste deiner Docsbook-Website. Füge sie hinzu, damit sie in der oberen Leiste erscheinen – nützlich für Verknüpfungen zu deinem Produkt, Blog, Changelog oder Support.
Format: Jeder Link hat ein Label und eine URL.
Beispiel:
| Label | URL |
|---|---|
| Produkt | https://yourapp.com |
| Changelog | https://yourapp.com/changelog |
| Support | https://yourapp.com/support |
Soziale Links#
Soziale Links sind Symbol-Links in der Kopfzeile von Docsbook, die auf Ihre Community verweisen — GitHub, Twitter / X und Discord. Fügen Sie pro Plattform einen Link hinzu.
Unterstützte Plattformen:
- GitHub — verlinkt auf Ihr Repository oder Ihre Organisation
- Twitter / X — verlinkt auf Ihr Twitter-Profil
- Discord — verlinkt auf Ihren Community-Server
Soziale Links werden als kleine Symbole in der Kopfzeile angezeigt. Sie helfen Leserinnen und Lesern, Ihre Community zu finden, ohne die Navigation mit Text-Links zu überladen.
Theme- und Sprachsteuerungen im Header#
Sie können den Theme-Umschalter und die Sprachauswahl im Header statt (oder zusätzlich) in der Seitenleiste platzieren.
Für eine genauere Kontrolle darüber, wo im Header der Theme-Umschalter und die Suche im Verhältnis zu den Navigationslinks platziert werden, siehe oben Header-Layout-Voreinstellungen.
Empfehlung: Wählen Sie für jede Steuerung einen Standort, um Duplikate zu vermeiden.
-
Platzierung im Header: sichtbarer, weniger Klicktiefe für neue Besucher.
-
Platzierung in der Seitenleiste: spart Platz im Header, besser für dichte Header.
Header ausblenden#
Wenn Sie Header anzeigen deaktivieren, wird die gesamte obere Navigationsleiste entfernt.
Verwenden Sie dies nur für Einbettungs- oder Kiosk-Szenarien, in denen Ihre Dokumentation in ein anderes Produkt eingebettet ist. Bei eigenständigen Dokumentationsseiten sollte der Header immer sichtbar bleiben.
Verwandte Themen#
- Sidebar-Layout und -Konfiguration — die andere Hälfte deiner Navigation
- Theming — hell, dunkel, System — was die Theme-Umschaltung im Header wechselt
- Branding — Name, Logo, Farben, Schriftarten — der Name und das Logo, die der Header anzeigt
- Übersetzungseinstellungen — was die Sprachauswahl im Header anbietet