Nav Button Highlighter Komponente – jetzt funktionsfähig

Drew-ART · 18. November 2025 um 13:14

Ich musste es als reine CSS-Komponente neu erstellen, da ich Probleme hatte, den Admin-Bereich der JavaScript-Version stabil zu bekommen. Das bedeutet, dass Sie die CSS-Selektoren direkt bearbeiten müssen, damit es auf Ihrer Website funktioniert.

Ziel der Komponente ist es, Ihnen dabei zu helfen, einen Pfad hervorzuheben, den Benutzer gezielt einschlagen sollen.

Link: https://github.com/focallocal/nav-buttons-highlighter

Hier ist es installiert und hebt das Kanban-Board-Plugin hervor, dessen Speicherort die meisten Benutzer meiner Plattform auch nach monatelanger Mitgliedschaft nicht kennen, insbesondere diejenigen, die hauptsächlich mobil surfen.

Desktop:

Mobil:

Nav Buttons Highlighter

Eine Discourse-Themenkomponente, die Navigationsschaltflächen hervorhebt, um Benutzer zu bestimmten Pfaden oder Funktionen zu führen, die sie befolgen sollen, und das mobile Dropdown-Menü klarer und sichtbarer macht.

Zweck

Diese Komponente hilft Ihnen dabei:

Benutzer zu leiten, indem wichtige Navigationslinks hervorgehoben werden (z. B. Ihr Aufgaben-Board, Dokumentation oder wichtige Kategorien)
Die mobile Benutzererfahrung (UX) zu verbessern, indem die Schaltfläche für die Dropdown-Navigation hervorgehoben wird
Visuelle Hierarchie in Ihrer Navigationsleiste zu schaffen

Funktionen

Sauberes Schaltflächen-Styling mit Vollfarben und Hover-Effekten
Admin-konfigurierbar – keine CSS-Bearbeitung erforderlich
Unterstützung für bis zu 3 benutzerdefinierte Navigationsschaltflächen
Mobil-responsiv – beinhaltet die Hervorhebung der mobilen Dropdown-Schaltfläche
Standardmäßig für das Discourse Kanban-Plugin vorkonfiguriert
Unterstützung für einen Farbwähler zur einfachen Anpassung

Standardkonfiguration

Standardmäßig ist diese Komponente so eingerichtet, dass das Discourse Kanban-Plugin (Link) in BLAU (#4285F4) hervorgehoben wird.

Installation

Gehen Sie in der Discourse-Admin-Konsole zu Anpassen → Themen → Komponenten und klicken Sie auf Installieren
Kopieren Sie den Link zum Git-Repository und fügen Sie ihn ein:
```
https://github.com/focallocal/nav-buttons-highlighter
```
Fügen Sie die Komponente nach der Installation Ihrem aktiven Thema hinzu.

Anpassung

Admin-Einstellungsfenster

Die gesamte Konfiguration erfolgt über einfache Admin-Einstellungen – keine CSS-Bearbeitung erforderlich!

Zur Konfiguration:

Gehen Sie zu Admin → Anpassen → Themen
Klicken Sie auf Ihr aktives Thema
Suchen Sie im Abschnitt „Enthaltene Komponenten“ nach Nav Buttons Highlighter
Klicken Sie auf Einstellungen

Verfügbare Einstellungen:

Schaltfläche 1 - Kanban (Standard):

Kanban hervorheben: Umschalten (Standard: ein)
Kanban-Farbe: Farbwähler (Standard: blau #4285F4)
Kanban-Selektor: CSS-Selektor (Standard: a.kanban-nav)

Schaltfläche 2 - Benutzerdefiniert:

Schaltfläche 2 hervorheben: Zweite Schaltfläche aktivieren (Standard: aus)
Farbe Schaltfläche 2: Farbwähler (Standard: grün #4CAF50)
Selektor Schaltfläche 2: Geben Sie Ihren CSS-Selektor ein (z. B. a[href='/page'])

Schaltfläche 3 - Benutzerdefiniert:

Schaltfläche 3 hervorheben: Dritte Schaltfläche aktivieren (Standard: aus)
Farbe Schaltfläche 3: Farbwähler (Standard: orange #FF5722)
Selektor Schaltfläche 3: Geben Sie Ihren CSS-Selektor ein

Mobil:

Mobilen Dropdown hervorheben: Mobiles „Neueste“-Dropdown umschalten (Standard: ein)
Farbe Mobiles Dropdown: Farbwähler (Standard: blau #4285F4)

CSS-Selektoren finden:

Um verschiedene Navigationslinks hervorzuheben, benötigen Sie deren CSS-Selektor:

Öffnen Sie Ihr Forum in einem Browser
Klicken Sie mit der rechten Maustaste auf den Link, den Sie hervorheben möchten
Wählen Sie „Element untersuchen“
Suchen Sie nach dem <a>-Tag und notieren Sie:
- Klassennamen: class="kanban-nav" → verwenden Sie: a.kanban-nav
- Href-Wert: href="/c/support" → verwenden Sie: a[href="/c/support"]

Häufige Beispiele:

Kanban-Plugin: a.kanban-nav
Support-Kategorie: a[href="/c/support"]
Dokumentations-Tag: a[href="/tags/documentation"]
Benutzerdefinierte Seite: a[href="/my-page"]
Zweite Navigationsschaltfläche: #navigation-bar > li:nth-child(2) > a

Farbauswahl:

Verwenden Sie Hex-Farbcodes (z. B. #4285F4 für Blau). Die Komponente generiert automatisch:

Hellere Schattierung für den oberen Teil des Farbverlaufs
Dunklere Schattierung für den unteren Teil/Schatten
Hover- und aktive Zustandsfarben

Beliebte Farben:

Blau: #4285F4 (Standard)
Grün: #4CAF50
Rot: #F44336
Orange: #FF9800
Lila: #9C27B0

Stabile reine CSS-Version

Wenn Sie die direkte CSS-Bearbeitung bevorzugen, ist die vorherige Version (2.0.1) verfügbar:

Installieren Sie die reine CSS-Version:

https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1

Lesen Sie die README dieser Branch für Anweisungen zur CSS-Bearbeitung.

Entwicklung

Dieses Repository enthält:

common/common.scss — Das gesamte Schaltflächen-Styling und eine detaillierte Anpassungsanleitung
assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js — Minimaler Initialisierer (erforderlich für Discourse)
about.json — Komponenten-Metadaten

Fehlerbehebung

F: Änderungen werden nicht angezeigt
A: Klicken Sie nach der Bearbeitung auf „Speichern“ und führen Sie einen Hard-Refresh Ihrer Forum-Seite durch (Strg+F5 oder Cmd+Umschalt+R).

F: Ich möchte mehrere Schaltflächen hervorheben
A: Kopieren Sie den gesamten CSS-Block der Schaltfläche und fügen Sie ihn unter der vorhandenen CSS-Regel ein. Ändern Sie dann den Selektor und optional die Farben.

Lizenz

MIT — Public Happiness Movement

merefield · 18. November 2025 um 13:25

Was soll das mit dem seltsamen Markdown?

Soll es ins Theme component verschoben werden?

Drew-ART · 18. November 2025 um 13:33

Danke. Ich habe es direkt aus der Github-Readme kopiert und eingefügt. Ich habe sie seit dem Posten aktualisiert.

Haben Sie es markiert, um es in die Theme-Komponente zu verschieben?

Nein, ich wollte zuerst Feedback einholen und prüfen, ob alles in Ordnung ist.

Drew-ART · 18. November 2025 um 13:47

Ich hatte ein bizarres Problem, bei dem Discourse eine Datei zwischengespeichert hat, ich glaube, es war die about.json-Datei, und jede Änderung, die ich daran vorgenommen habe, schlug fehl, sie zu aktualisieren oder neu zu installieren. Es dauerte ewig, bis ich herausfand, warum ich keine einzige Änderung erstellen konnte.

Gibt es eine bessere Möglichkeit, eine Komponente zu testen, als auf einer Live-Site?

NateDhaliwal · 19. November 2025 um 02:44

@Drew-ART Haben Sie sich Objects type for theme setting angesehen? Vielleicht kann es dann verwendet werden, um viele CSS-Regeln hinzuzufügen, möglicherweise durch Verschachtelung, um jeder Regel Dinge wie Hintergrundfarbe und Polsterung hinzuzufügen. SCSS verfügt über eine each-Schleife, die Sie möglicherweise verwenden können.

Vielleicht hilft Ihnen das?

github.com/Arkshine/discourse-banner-featured-links

scss/functions.scss

ce190f66a


      
            @return $result;
          }
          
          /**
           * Parses a string of ruby-like key-value pairs into a map.
           * Format: [{"key1"=>"value1", "key2"=>"value2"}, {"key1"=>"value1","key2"=>"value2"}]
           *
           * @param {String} $string - The string of key-value pairs.
           * @return {Map} - The map of key-value pairs.
           */
          @function parseObjectSettings($string) {
            $string: str-slice($string, 2, -2);
            $items: str-split($string, "}, {");
          
            $parsedItems: ();
          
            @each $item in $items {
              $item: str-replace($item, "{", "");
              $item: str-replace($item, "}", "");
              $item: str-trim($item);

Drew-ART · 19. November 2025 um 12:47

Danke an @NateDhaliwal. Das war mein ursprünglicher Ansatz, aber ich bin auf den oben genannten 500er-Fehler gestoßen und kam tagelang nicht darüber hinweg, also bin ich zu einem reinen CSS-Ansatz zurückgekehrt.

Ich könnte zu diesem verworfenen Versuch zurückkehren und sehen, ob er jetzt lädt, da ich den 500er-Fehler glaube ich im Griff habe. Ich werde es versuchen.

Drew-ART · 19. November 2025 um 13:28

Nein, das bekomme ich überhaupt nicht zum Laufen.

Ich habe es mit den Admin-Einstellungen festgelegt und falle auf CSS zurück, falls sie nicht korrekt geladen werden, aber irgendetwas, das ich nicht erfassen kann, verhindert, dass es überhaupt funktioniert.

Drew-ART · 20. November 2025 um 00:36

Ok, ich habe den Admin-Bereich mit einfachen Text-/Booleschen Einstellungen zum Laufen gebracht.

Ich fand es schwierig, den Objekttyp mit SCSS-Parsing zum Laufen zu bringen, und jeder, der erklären kann, warum der obige Branch nicht funktioniert hat, kann jetzt seine Einstellungen im Komponenten-Admin-Bereich anpassen.

Drew-ART · 20. November 2025 um 20:54

Ok, ich glaube, ich habe das SCSS-Problem gefunden.

Ich habe dies in der Karussellkomponente von @NateDhaliwal gefunden:
SCSS (common.scss):

@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

Einstellungen (settings.yml):


pagination_button_color:
  type: string
  default: ""

Für alle anderen, die kämpfen:

Injizieren Sie in CSS-Custom-Properties mit der Syntax #{$var}
Verwenden Sie diese CSS-Variablen dann an anderer Stelle, damit die Swiper-Bibliothek sie lesen kann

Das funktioniert, weil:

Einstellungs-Variablen können mit #{} interpoliert werden
CSS-Custom-Properties akzeptieren Zeichenfolgewerte
Das eigentliche Styling verwendet die CSS-Variablen, nicht SCSS-Funktionen

Ich werde dieses Plugin bald auf die modernere Version aktualisieren.

Thema		Antworten	Aufrufe
First component attempt. I've had a go at creating a Nav Button Highlighter. Not working as yet Dev	1	45	11. November 2025
Highlighter Composer Button Theme component	22	1301	5. September 2023
Fast Highlight Dev	49	2304	30. September 2023
MD Composer extras Theme component	70	8697	8. Juli 2025
Discourse Button Styles Theme component	40	10498	18. September 2025