Benutzerdefinierte Kopfzeilen-Links

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.

3 „Gefällt mir“

Die Vorschau funktioniert nicht

3 „Gefällt mir“

Ich habe den Vorschau-Link aktualisiert, er sollte jetzt funktionieren!

3 „Gefällt mir“

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!

2 „Gefällt mir“

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!

2 „Gefällt mir“

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);
}
2 „Gefällt mir“

Hallo, wäre es möglich, die Links zentriert statt nur links/rechts auszurichten?

1 „Gefällt mir“

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.

3 „Gefällt mir“

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).

6 „Gefällt mir“

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.

2 „Gefällt mir“

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 :slight_smile:

2 „Gefällt mir“

****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.

1 „Gefällt mir“

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:

image

image

1 „Gefällt mir“

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.

2 „Gefällt mir“

Ich bin da selbst neulich auch reingefallen:

Ich werde sehen, ob wir vielleicht die Standardbeispiele ändern können, um sie intuitiver zu gestalten.

2 „Gefällt mir“

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!

2 „Gefällt mir“

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.

1 „Gefällt mir“

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.

1 „Gefällt mir“