Ich musste es als reine CSS-Komponente neu erstellen, da ich die JavaScript-Version nicht stabil bekam. Ziel ist es, Ihnen zu helfen, einen Pfad hervorzuheben, den Sie speziell von Benutzern nehmen lassen möchten.
Link: https://github.com/focallocal/nav-buttons-highlighter
Hier ist es installiert und hebt das Kanban-Board-Plugin hervor, das die meisten Benutzer auf meiner Plattform auch nach monatelanger Mitgliedschaft nicht finden würden, insbesondere diejenigen, die hauptsächlich mobil nutzen.
Desktop:
Mobil:
Nav Buttons Highlighter
Eine Discourse-Theme-Komponente, die Navigationsschaltflächen hervorhebt, um Benutzer zu bestimmten Pfaden oder Funktionen zu führen, denen sie folgen sollen, und das mobile Dropdown-Menü klarer und sichtbarer macht.
Zweck
Diese Komponente hilft Ihnen:
- Benutzer zu leiten, indem wichtige Navigationslinks hervorgehoben werden (z. B. Ihr Aufgabenbrett, Dokumentation oder wichtige Kategorien)
- Mobile UX zu verbessern, indem der Dropdown-Navigationsschalter hervorgehoben wird
- Visuelle Hierarchie in Ihrer Navigationsleiste zu erstellen
Funktionen
- 3D-Schaltflächen-Styling mit Farbverläufen, Schatten und Hover-Effekten
- Mobilfreundlich – hebt den Umschalter für das Dropdown-Menü „Neueste“ auf Mobilgeräten hervor, damit Benutzer klarer erkennen, dass sie darauf klicken können/sollten
- Standardmäßig vorkonfiguriert für das Discourse Kanban-Plugin
- Nur CSS-Implementierung – zuverlässig und leichtgewichtig
- Einfach anzupassen
Standardkonfiguration
Standardmäßig ist diese Komponente so eingerichtet, dass das Discourse Kanban-Plugin Link in BLAU hervorgehoben wird. Es kann jedoch einfach geändert werden, um jeden Navigationslink Ihrer Wahl in jeder beliebigen Farbe hervorzuheben.
Installation
-
Gehen Sie in der Discourse-Admin-Konsole zu Anpassen > Themes > Komponenten und klicken Sie auf Installieren.
-
Aus Repository-Link kopieren und einfügen:
https://github.com/focallocal/nav-buttons-highlighter -
Nach der Installation fügen Sie die Komponente Ihrem aktiven Theme hinzu.
Anpassung
CSS-Datei finden
Es gibt KEIN Admin-Einstellungsfeld für diese Komponente – alle Anpassungen werden durch direktes Bearbeiten der CSS-Datei in Ihrem Repository vorgenommen.
Die CSS-Datei befindet sich unter:
common/common.scss
Bearbeitung:
Option 1: In GitHub bearbeiten (am einfachsten)
- Forken Sie eine Version dieses Repositorys und installieren Sie sie.
- Navigieren Sie zu
common/common.scss. - Klicken Sie auf das Bleistiftsymbol, um zu bearbeiten.
- Nehmen Sie Ihre Änderungen vor und committen Sie sie.
- Gehen Sie in Discourse Admin > Anpassen > Komponenten und klicken Sie auf „Nach Updates suchen“ für die Komponente Nav Buttons Highlighter.
Option 2: Lokal bearbeiten
- Klonen Sie das Repository auf Ihren Computer.
- Bearbeiten Sie
common/common.scssin einem beliebigen Texteditor. - Committen und pushen Sie Ihre Änderungen.
- Gehen Sie in Discourse Admin > Anpassen > Komponenten und klicken Sie auf „Nach Updates suchen“.
Hinweise:
- Diese Komponente funktioniert mit ALLEN Themes, in denen sie aktiviert ist (nicht an ein bestimmtes Theme gebunden).
- Die CSS-Datei enthält detaillierte Inline-Kommentare, die genau erklären, was zu ändern ist.
- Änderungen erfordern nach der Bearbeitung ein Update der Komponente im Discourse-Admin.
Die Kommentare in der CSS-Datei erklären:
- Welchen Selektor Sie ändern müssen (z. B.
a.kanban-nav), um verschiedene Links hervorzuheben. - Welche Farbwerte für verschiedene Farben aktualisiert werden müssen.
- Wie die Hervorhebung des mobilen Dropdown-Menüs hinzugefügt/entfernt wird.
Beispiele
Farbe von Blau auf Grün ändern
Der Button verwendet drei Blautöne, um einen Farbverlaufeffekt zu erzeugen:
- Hellblau:
#5ca3ff(Oberseite des Verlaufs) - Mittelblau:
#4285F4(Mitte des Verlaufs) - Dunkelblau:
#3a75e4(Unterseite/Schatten)
Um auf Grün zu ändern, suchen und ersetzen Sie diese Werte in common/common.scss:
| Aktuelles Blau | Ersetzen mit Grün |
|---|---|
#5ca3ff |
#5cb860 |
#4285F4 |
#4CAF50 |
#3a75e4 |
#45a049 |
rgba(66, 133, 244 |
rgba(76, 175, 80 |
Einen anderen Navigationslink hervorheben
Ersetzen Sie den Selektor a.kanban-nav durch Ihren Ziel-Link:
Beispiele:
a[href=“/c/category-name”]- Hebt eine bestimmte Kategorie hervora[href=“/tags/tag-name”]- Hebt ein bestimmtes Tag hervora[href=“/my-custom-page”]- Hebt jeden benutzerdefinierten Link hervor#navigation-bar > li:nth-child(2) > a- Hebt den 2. Navigationsbutton hervor
So finden Sie den 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 Klassennamen (z. B.
class=“kanban-nav”) oder href-Werten im HTML.
Mobile Dropdown-Hervorhebung deaktivieren
Suchen Sie den Abschnitt mit der Bezeichnung /* Latest dropdown button on mobile */ und entweder:
- Löschen Sie den gesamten Abschnitt, ODER
- Kommentieren Sie ihn aus, indem Sie ihn in
/* … */einschließen.
Links im mobilen Dropdown hervorheben
Fügen Sie diesen CSS-Block nach den vorhandenen Stilen hinzu:
.fk-d-menu-modal a.kanban-nav {
background: linear-gradient(135deg, #5ca3ff 0%, #4285F4 50%, #3a75e4 100%) !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 8px !important;
}
Ersetzen Sie a.kanban-nav durch Ihren gewünschten Selektor.
Entwicklung
Dieses Repository enthält:
common/common.scssAlle Button-Stile und detaillierte Anpassungsanleitungassets/javascripts/discourse/api-initializers/nav-buttons-highlighter.jsMinimale Initialisierung (erforderlich für Discourse)about.jsonKomponentenmetadaten
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+Shift+R).
F: Ich möchte mehrere Buttons hervorheben
A: Kopieren Sie den gesamten Button-CSS-Block 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