 |
Zusammenfassung | Custom Header Links ermöglicht es Ihnen, auf einfache Weise benutzerdefinierte textbasierte Links in die Kopfzeile einzufügen. |
 |
Vorschau | Vorschau im Discourse Theme Creator |
 |
Repository-Link | GitHub - discourse/discourse-custom-header-links · GitHub |
 |
Neu bei Discourse Themes? | Anfängerleitfaden zur Verwendung von Discourse Themes |
Dieses Theme-Komponente installieren
Funktionen
Desktop
Mobil
(Aufgrund des sehr begrenzten Platzes wird das Hinzufügen von mehr als einem Link auf Mobilgeräten nicht empfohlen)
Einstellungen
| Einstellung | Beschreibung |
|---|---|
custom_header_links |
Die strukturierte Liste von Links, die in der Kopfzeile angezeigt werden sollen. Jeder Link wird über ein Formular mit einzelnen Feldern konfiguriert (siehe unten). |
links_position |
Steuert, ob die Links rechts (Standard) oder links neben dem Logo in der Kopfzeile erscheinen. Wenn auf left gesetzt, werden alle Links auf Themenseiten automatisch ausgeblendet, um Platz für den Themientitel zu schaffen – unabhängig von den individuellen hide_on_scroll-Einstellungen der Links. |
Links hinzufügen
Links werden über ein strukturiertes Formular in den Theme-Komponenten-Einstellungen konfiguriert. Klicken Sie auf Hinzufügen, um einen neuen Link hinzuzufügen. Jeder Link hat die folgenden Felder:
| Feld | Erforderlich | Beschreibung |
|---|---|---|
| Text |  Ja |
Die sichtbare Beschriftung für den Link. Maximal 100 Zeichen. Bestimmt auch die CSS-Klasse, die auf den Link angewendet wird (siehe CSS-Anpassung unten). |
| Titel |  Nein |
Der Tooltip-Text, der beim Überfahren des Links angezeigt wird. Maximal 1000 Zeichen. |
| URL | Ja |
Die URL, auf die der Link verweist. Kann ein relativer Pfad sein (z.B. /faq) oder eine vollständige URL. Maximal 2048 Zeichen. |
| Ansicht | Nein |
Steuert, auf welchem Gerät der Link angezeigt wird. Wenn nicht festgelegt, wird der Link auf allen Geräten angezeigt (wie bei vdm). Siehe Werte unten. |
| Ziel | Nein |
Steuert, wie der Link geöffnet wird. Wenn nicht festgelegt, wird standardmäßig in einem neuen Tab geöffnet (wie bei blank). Siehe Werte unten. |
| Beim Scrollen ausblenden | Nein |
Steuert, ob der Link ausgeblendet wird, wenn der Themientitel in der Kopfzeile auf Themenseiten sichtbar wird. Standardmäßig keep. Gilt nur, wenn links_position auf right gesetzt ist – siehe Hinweis unten. Siehe Werte unten. |
| Locale | Nein |
Wenn festgelegt, wird der Link nur angezeigt, wenn die Seitensprache der Website mit diesem Wert übereinstimmt. Leer lassen, um den Link bei allen Locales anzuzeigen. Details siehe unten. |
\u003cbr\u003e
Werte für Ansicht:
| Wert | Verhalten |
|---|---|
vdm |
Auf Desktop und Mobilgeräten sichtbar |
vdo |
Nur auf dem Desktop sichtbar |
vmo |
Nur auf Mobilgeräten sichtbar |
| (nicht festgelegt) | Wie vdm – auf allen Geräten sichtbar |
Werte für Ziel:
| Wert | Verhalten |
|---|---|
blank |
Öffnet sich in einem neuen Tab |
self |
Öffnet sich im selben Tab |
| (nicht festgelegt) | Standardmäßig Öffnen in einem neuen Tab (wie bei blank) |
Werte für Beim Scrollen ausblenden:
| Wert | Verhalten |
|---|---|
keep |
Link bleibt sichtbar, auch wenn der Themientitel in der Kopfzeile angezeigt wird (Standard) |
remove |
Link wird ausgeblendet, wenn der Themientitel auf Themenseiten sichtbar wird |
\u003e 
hide_on_scroll gilt nur, wenn links_position auf right gesetzt ist. Wenn links_position auf left gesetzt ist, werden alle Links auf Themenseiten gemeinsam ausgeblendet, unabhängig von ihrer individuellen hide_on_scroll-Einstellung.
Hier ist ein Beispiel für hide_on_scroll in Aktion (wenn links_position auf right gesetzt ist):
Most Liked und Privacy sind auf keep gesetzt, sodass sie sichtbar bleiben, wenn der Titel erweitert wird. Die anderen Links sind auf remove gesetzt, sodass sie ausgeblendet werden, wenn der Titel sichtbar wird. Dieses Verhalten betrifft nur Themenseiten.
Locale-Filterung
Das Feld Locale ermöglicht es Ihnen, einen Link nur anzuzeigen, wenn die Website auf eine bestimmte Sprache eingestellt ist. Dies ist nützlich für mehrsprachige Communities, die unterschiedliche Header-Links pro Sprache wünschen.
- Setzen Sie das Feld auf einen Locale-Code wie
en,de,fr,zh_CNusw. - Die Übereinstimmung ist nicht case-sensitiv, und sowohl
-als auch_Trennzeichen werden gleich behandelt – sodassen-US,en_USunden_usgleichermaßen übereinstimmen. - Wenn das Locale-Feld leer gelassen wird, wird der Link bei allen Locales angezeigt. Dies ist die empfohlene Einstellung für die meisten Sites mit einer einzigen Sprache.
- Dem Link-Element wird auch eine CSS-Klasse
headerLink--{locale}hinzugefügt, die für zusätzliche CSS-Selektion verwendet werden kann.
\u003e 
Häufiges Problem: Wenn Ihre Links nicht angezeigt werden, prüfen Sie, ob Sie versehentlich einen locale-Wert festgelegt haben, der nicht mit der konfigurierten Sprache Ihrer Website übereinstimmt. Das Leerlassen des Locale-Feldes ist sicher und zeigt den Link immer an.
CSS-Anpassung
Jeder Link erhält automatisch eine CSS-Klasse, die sich aus seinem Text-Wert ableitet: Leerzeichen werden durch Bindestriche ersetzt, der Text wird in Kleinbuchstaben umgewandelt und -custom-header-links wird angehängt.
Zum Beispiel:
- Ein Link mit dem Text
Privacyerhält die Klasseprivacy-custom-header-links - Ein Link mit dem Text
Visit Shoperhält die Klassevisit-shop-custom-header-links
Alle Header-Links stylen:
.custom-header-links .headerLink a {
font-size: var(--font-up-1);
color: var(--header_primary);
}
Einen bestimmten Link stylen (z.B. einen Link mit dem Text „Privacy“):
.custom-header-links .headerLink.privacy-custom-header-links a {
color: var(--tertiary);
}
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: var(--tertiary-high);
}
Link basierend auf dem Anmeldestatus anzeigen oder ausblenden:
Discourse fügt der \u003chtml\u003e-Tag eine anon-Klasse für abgemeldete Benutzer hinzu. Sie können dies verwenden, um Links bedingt anzuzeigen oder auszublenden:
/* "Dashboard" für abgemeldete Benutzer ausblenden */
html.anon .dashboard-custom-header-links {
display: none;
}
/* "Sign Up" für angemeldete Benutzer ausblenden */
html:not(.anon) .sign-up-custom-header-links {
display: none;
}
\u003e CSS display: none ist ein nur visuelles Ausblendmechanismus. Der HTML-Code des Links ist weiterhin im Seitenquelltext vorhanden. Verwenden Sie dies nicht, um sensible oder zugriffsgeschützte URLs zu schützen.
Links mit CSS neu anordnen (unter Verwendung der Flexbox order):
.custom-header-links li {
\u0026:nth-child(1) { order: 3; }
\u0026:nth-child(2) { order: 1; }
\u0026:nth-child(3) { order: 2; }
}
Verwenden Sie den Pfad /my für benutzerspezifische Links, um einen Benutzernamen hart zu kodieren:
/my/messages → der Posteingang des aktuellen Benutzers
/my/activity → die Aktivität des aktuellen Benutzers
\u003e Bei uns gehostet? Theme-Komponenten sind für unsere Pro-, Business- und Enterprise-Tarife verfügbar.
\u003e Änderungsprotokoll-Highlights:
\u003e
\u003e * Die Einstellung custom_header_links wurde von einem kommagetrennten Listenformat in eine strukturierte Formular-UI vom Typ type: objects migriert. Wenn Sie zuvor Links mit dem alten Textfeld mit Komma-Trennung konfiguriert haben, sollten Ihre Daten automatisch übernommen worden sein.