Das ist im Allgemeinen richtig, CSS ist keine sichere Methode, um etwas zu verbergen, da ein versierter Benutzer aus irgendeinem Grund den Seitenquelltext durchsuchen könnte… aber wir stellen Crawlern eine No-JS-Ansicht zur Verfügung, sodass in diesem Fall Inhalte, die von Themes hinzugefügt werden, sowieso normalerweise nicht indiziert werden.
Ich habe den Vorschau-Link aktualisiert, er sollte jetzt funktionieren!
Ist es möglich, diese Komponente zu verwenden, um ein Javascript mit
javascript:script('function');
anstelle einer tatsächlichen URL aufzurufen?
(Es scheint fast zu funktionieren, aber ich stoße auf CSP-Verletzungen.)
Bearbeitet zugefügt:
Ich habe es zum Laufen gebracht. Falls sich jemand anderes jemals fragen sollte, habe ich in der Benutzeroberfläche der Komponente # anstelle einer URL verwendet und dann einen Event-Listener verwendet, um die Javascript-Funktion aufzurufen.
Andere kennen wahrscheinlich einen besseren Weg, und ich hoffe, sie werden dieses Wissen teilen, wenn sie es tun!
Hallo, ich möchte die Schriftart und -größe der Header-Links anpassen. Könnte mir bitte jemand auf die richtige CSS-Datei zeigen, die mir das ermöglicht? Danke!
Hallo @brentoshiro, die Eigenschaften variieren je nachdem, was Sie gestalten müssen, aber so würden Sie die Links auswählen:
Alle Header-Links gestalten:
.custom-header-links .headerLink a {
font-size: 1rem; // Ersetzen Sie dies durch Ihre bevorzugte Schriftgröße
color: #96b67b; // Sie können auch Variablen wie var(--tertiary) verwenden.
font-style: italic; // Optionen: normal, italic, oblique
}
Einen bestimmten Link gestalten
Sie können auf den Link entweder über den Linktitel (getrennt durch Bindestriche und in Kleinbuchstaben) wie hier für „Privacy“ zugreifen:
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: red;
}
oder über das Titelattribut und die Eingabe des Linktitels:
.custom-header-links .headerLink a[title='Our Privacy Policy'] {
color: purple;
}
Um Stile beim Überfahren mit der Maus hinzuzufügen, fügen Sie einfach :hover nach dem a-Tag hinzu:
.custom-header-links .headerLink a:hover {
color: var(--primary-low);
}
Hallo, wäre es möglich, die Links zentriert statt nur links/rechts auszurichten?
Das ist wirklich cool. Ich frage mich, wie viel zusätzliche Arbeit es wäre, unterschiedliche Listen von Header-Links pro Gruppe zu ermöglichen? Wir haben Mitarbeiter und Studenten auf unserer Website und würden gerne in der Lage sein, unterschiedliche primäre Links im Header für jede Gruppe bereitzustellen.
Sie könnten das erreichen, indem Sie jede Gruppe einem anderen Theme zuweisen, wobei jedes Theme seine eigene Kopie dieser Theme-Komponente verwendet.
Dies würde gut funktionieren, wenn eine Ihrer beiden Gruppen ziemlich statisch (oder zumindest kleiner) wäre – Ihre Mitarbeitergruppe scheint dafür ideal zu sein. Oder zumindest, wenn Sie nur eine dynamische Gruppe hätten.
Sie können dann die Studentenlinks zum Standard-Theme der Website machen und Ihre Mitarbeiter manuell mit den Mitarbeiterlinks ausstatten (entweder über die Benutzeroberfläche oder über die Rails-Konsole).
Ich wollte das gerade auch fragen, da mir endlich aufgefallen ist, dass sie auf dem Anmeldebildschirm erscheinen.
In meinem Fall ändert sich einer der Links jeden Monat (während der Header-Name gleich bleibt). Ist es möglich, den Header mit einem Code auszublenden, ohne den Link ausblenden zu müssen? Zum Beispiel würde ich bei Ihrem Beispiel haben:
Kundensupport
2022-customer-support/26903 ist mein Link, dann customer-support-july usw.
Wie Sie sehen können, würde das Ausblenden von customer-support-june gut funktionieren, aber es muss monatlich aktualisiert werden, anstatt wenn ich nur “FAQ” ausblenden würde (und ich kann auch nicht die /26903 aus dem Thema zum CSS-Code hinzufügen, also kann ich diesen spezifischen Link nicht ausblenden, obwohl ich dies möglicherweise umgehen kann, indem ich die Seite veröffentliche?). Wenn es keine andere Möglichkeit gibt, ist das überhaupt kein großes Problem, es ist keine Anstrengung, es ist eher, dass ich garantiert vergessen werde.
Hallo, ich wollte mich erkundigen, ob es möglich ist, mögliche Übersetzungen für den Text zu erhalten? Vielleicht durch die Einbeziehung von Übersetzungsschlüsseln, wenn die Komponente diese enthält ![]()
****Gibt es einen Grund, warum es standardmäßig für nicht angemeldete Benutzer nicht angezeigt wird?
Ignorieren Sie es, aus irgendeinem Grund wird die Komponente, wenn ich sie auf das Thema anwende, nicht angezeigt. Ich muss die Komponente stattdessen zum Thema hinzufügen.
UTF-8-Symbole verwenden
Beachten Sie, dass Sie UTF-8-Symbole als Linkanker verwenden können.
In diesem Fall möchten Sie vielleicht dieses CSS ausprobieren, um andere Dropdown-Symbole für Header abzugleichen:
.custom-header-links .headerLink {
margin-top: -1px;
}
.custom-header-links .headerLink a {
padding: 3px 10px;
color: var(--primary-low-mid);
font-size: var(--font-up-5);
font-weight: bold;
}
.custom-header-links .headerLink:hover {
background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
color: var(--primary-medium);
}
Es bewirkt etwas wie das hier:


Ich habe diese Komponente gerade installiert und einige Links hinzugefügt, aber sie wurden nicht angezeigt.
Ich habe festgestellt, dass die Eingabe einer Sprache dazu führt, dass die Links auf meiner Website nicht angezeigt werden. Ursprünglich hatte ich ‘blank’ zur Vollständigkeit hinzugefügt, obwohl es nicht benötigt wurde. Sie wurden immer noch nicht angezeigt, als ich ‘blank’ in ‘en’ geändert habe. Das vollständige Entfernen des Wertes hat das Problem in meinem Fall behoben. Ich habe keine Ahnung warum, aber ich dachte, ich erwähne dies für den Fall, dass jemand ein ähnliches Problem hat.
Ich bin da selbst neulich auch reingefallen:
Ich werde sehen, ob wir vielleicht die Standardbeispiele ändern können, um sie intuitiver zu gestalten.
Ich habe das Gebietsschema aus den Standardeinstellungen entfernt: UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub
Die Standardeinstellungen sollten nun unabhängig davon angezeigt werden, auf welches Gebietsschema die Website eingestellt ist. Danke @packman und @JammyDodger!
Meine Links sind nach dem letzten Upgrade verschwunden (PC, Ubuntu, Brave)
Könnten Sie das bitte überprüfen?
@cmdntd – siehe das Spinoff-Thema. Wahrscheinlich steht unter Admin | Upgrade ein Discourse-Upgrade zur Verfügung, das dieses Problem beheben wird.
Kürzlich wurden meine benutzerdefinierten Links durch die drei Standardlinks ersetzt. In der Vorschau funktioniert es.
Dies ist eine gehostete Website. Mir ist gerade aufgefallen, dass sich möglicherweise etwas im Theme geändert hat, sodass es von benutzerdefinierten Header-Links nicht mehr erkannt wird. Ich werde das überprüfen und mich wieder melden.
Quack! Ich habe das Plugin in verschiedenen Themes in der Vorschau angezeigt und alle funktionierten. Ich habe mich abgemeldet und es funktionierte. Ich habe den Browser gewechselt und es funktionierte. Hier riecht es stark nach Schrödingers Katze.
