Componente Nav Button Highlighter - ora funzionante

Drew-ART · 18 Novembre 2025, 1:14pm

Ho dovuto ricostruirlo come componente puramente CSS poiché ho riscontrato problemi nel rendere stabile la sezione di amministrazione della versione Javascript, il che significa che devi modificare direttamente i selettori CSS per farlo funzionare sul tuo sito.

L’obiettivo del componente è aiutarti a evidenziare un percorso che vuoi specificamente che gli utenti seguano.

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

Ecco come appare installato ed evidenzia il plugin della bacheca Kanban che la maggior parte degli utenti sulla mia piattaforma non saprebbe dove trovare dopo essere stati membri per mesi, specialmente quelli che usano principalmente il cellulare.

Desktop:

Mobile:

Evidenziatore Pulsanti di Navigazione (Nav Buttons Highlighter)

Un componente tema per Discourse che evidenzia i pulsanti di navigazione per guidare gli utenti verso percorsi o funzioni specifiche che desideri che seguano e rende il menu a discesa mobile più chiaro e visibile.

Scopo

Questo componente ti aiuta a:

Guidare gli utenti evidenziando i link di navigazione importanti (ad esempio, la tua bacheca attività, la documentazione o le categorie chiave)
Migliorare l’esperienza utente (UX) su dispositivi mobili rendendo visibile il pulsante di navigazione a discesa
Creare gerarchia visiva nella tua barra di navigazione

Caratteristiche

Stile pulito dei pulsanti con colori solidi ed effetti hover
Configurabile dall’amministratore - nessuna modifica CSS richiesta
Supporto per un massimo di 3 pulsanti di navigazione personalizzati
Responsive per dispositivi mobili - include l’evidenziazione del pulsante a discesa mobile
Preconfigurato per il plugin Discourse Kanban per impostazione predefinita
Supporto per la selezione del colore per una facile personalizzazione

Configurazione Predefinita

Per impostazione predefinita, questo componente è configurato per evidenziare il plugin Discourse Kanban (link) in BLU (#4285F4).

Installazione

Nella console di amministrazione di Discourse, vai su Personalizza → Temi → Componenti e fai clic su Installa

Copia il link del repository Git e incolla:

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

Una volta installato, aggiungi il componente al tuo tema attivo.

Come Personalizzare

Pannello Impostazioni Amministratore

Tutta la configurazione viene eseguita tramite semplici impostazioni di amministrazione - nessuna modifica CSS richiesta!

Per configurare:

Vai su Admin → Personalizza → Temi
Fai clic sul tuo tema attivo
Trova Nav Buttons Highlighter nella sezione Componenti Inclusi
Fai clic su Impostazioni

Impostazioni Disponibili:

Pulsante 1 - Kanban (Predefinito):

Evidenzia Kanban: Attiva/disattiva (predefinito: attivo)
Colore Kanban: Selettore colore (predefinito: blu #4285F4)
Selettore Kanban: Selettore CSS (predefinito: a.kanban-nav)

Pulsante 2 - Personalizzato:

Evidenzia Pulsante 2: Abilita il secondo pulsante (predefinito: disattivato)
Colore Pulsante 2: Selettore colore (predefinito: verde #4CAF50)
Selettore Pulsante 2: Inserisci il tuo selettore CSS (ad esempio, a[href='/page'])

Pulsante 3 - Personalizzato:

Evidenzia Pulsante 3: Abilita il terzo pulsante (predefinito: disattivato)
Colore Pulsante 3: Selettore colore (predefinito: arancione #FF5722)
Selettore Pulsante 3: Inserisci il tuo selettore CSS

Mobile:

Evidenzia Menu a Discesa Mobile: Attiva/disattiva il menu a discesa Ultimi mobile (predefinito: attivo)
Colore Menu a Discesa Mobile: Selettore colore (predefinito: blu #4285F4)

Trovare Selettori CSS:

Per evidenziare diversi link di navigazione, hai bisogno del loro selettore CSS:

Apri il tuo forum in un browser
Fai clic destro sul link che vuoi evidenziare
Seleziona “Ispeziona Elemento”
Cerca il tag <a> e annota:
- Nomi di classe: class="kanban-nav" → usa: a.kanban-nav
- Valore Href: href="/c/support" → usa: a[href="/c/support"]

Esempi Comuni:

Plugin Kanban: a.kanban-nav
Categoria Supporto: a[href="/c/support"]
Tag Documentazione: a[href="/tags/documentation"]
Pagina personalizzata: a[href="/my-page"]
Secondo pulsante di navigazione: #navigation-bar > li:nth-child(2) > a

Selezione del Colore:

Usa i codici colore esadecimali (ad esempio, #4285F4 per il blu). Il componente genera automaticamente:

Tonalità più chiara per la parte superiore del gradiente
Tonalità più scura per la parte inferiore/ombra
Colori per gli stati hover e attivo

Colori Popolari:

Blu: #4285F4 (predefinito)
Verde: #4CAF50
Rosso: #F44336
Arancione: #FF9800
Viola: #9C27B0

Versione Solo CSS Stabile

Se preferisci la modifica CSS diretta, la versione precedente (2.0.1) è disponibile:

Installa la versione solo CSS:

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

Consulta il file README di quella branch per le istruzioni di modifica CSS.

Sviluppo

Questo repository contiene:

common/common.scss — Tutto lo stile dei pulsanti e guida dettagliata alla personalizzazione
assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js — Inizializzatore minimo (richiesto per Discourse)
about.json — Metadati del componente

Risoluzione dei Problemi

D: Le modifiche non vengono visualizzate
R: Dopo la modifica, fai clic su “Salva” e aggiorna forzatamente la pagina del tuo forum (Ctrl+F5 o Cmd+Shift+R).

D: Voglio evidenziare più pulsanti
R: Copia l’intero blocco CSS del pulsante e incollalo sotto la regola CSS esistente, quindi modifica il selettore e facoltativamente i colori.

Licenza

MIT — Public Happiness Movement

merefield · 18 Novembre 2025, 1:25pm

Cosa c’è con tutto questo markdown strano?

L’hai segnalato per spostarlo in Theme component?

Drew-ART · 18 Novembre 2025, 1:33pm

Grazie. Ho copiato/incollato direttamente dal file readme di Github. Lo sto aggiornando da quando ho cliccato su pubblica.

l’hai segnalato per spostarlo a Componente tema?

No, volevo prima ricevere feedback e verificare che fosse tutto a posto.

Drew-ART · 18 Novembre 2025, 1:47pm

Ho riscontrato uno strano problema in cui Discourse ha memorizzato nella cache un file, penso fosse il file about.json, e ogni modifica che ho apportato non è riuscita ad aggiornarsi o a reinstallarsi. Ci è voluto un’eternità per capire perché non riuscivo a far funzionare alcuna modifica.

Esiste un modo migliore per testare un componente piuttosto che su un sito live?

NateDhaliwal · 19 Novembre 2025, 2:44am

@Drew-ART Hai dato un’occhiata a Objects type for theme setting? Forse allora può essere usato per aggiungere molte regole CSS, magari usando l’annidamento per aggiungere cose come il colore di sfondo e il padding a ogni regola. SCSS ha un ciclo each che potresti essere in grado di usare.

Forse questo può aiutare?

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 Novembre 2025, 12:47pm

Ringrazio @NateDhaliwal. Quello era il mio approccio originale, ma mi sono imbattuto nell’errore 500 di cui sopra e non riuscivo a superarlo da un sacco di tempo, quindi sono tornato a un approccio solo CSS.

Potrei tornare a quel tentativo abbandonato e vedere se ora si carica dato che penso di aver capito l’errore 500. Ci proverò.

Drew-ART · 19 Novembre 2025, 1:28pm

No, non riesco a farlo funzionare affatto.

L’ho impostato con le impostazioni di amministrazione e con il fallback al CSS se non vengono caricati correttamente, ma qualcosa che non riesco a individuare ne impedisce del tutto il funzionamento.

Drew-ART · 20 Novembre 2025, 12:36am

Ok, sono riuscito a far funzionare la sezione admin utilizzando impostazioni semplici di testo/booleano.

Ho trovato difficile far funzionare il tipo Oggetti con l’analisi SCSS e qualcuno potrebbe spiegare perché il ramo sopra non ha funzionato, ma chiunque voglia usarlo ora può personalizzare le proprie impostazioni nella sezione admin del componente.

Drew-ART · 20 Novembre 2025, 8:54pm

Ok, penso di aver trovato il problema SCSS.

Ho trovato questi nel componente carousel di @NateDhaliwal:
SCSS (common.scss):

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

Impostazioni (settings.yml):


pagination_button_color:
  type: string
  default: ""

Per chiunque altro stia lottando:

iniettare nelle proprietà personalizzate CSS usando la sintassi #{$var}
Quindi utilizzare queste variabili CSS altrove affinché la libreria Swiper le legga

Questo funziona perché:

Le variabili di impostazione possono essere interpolate con #{}
Le proprietà personalizzate CSS accettano valori stringa
Lo stile effettivo utilizza le variabili CSS, non le funzioni SCSS

Aggiornerò questo plugin con la versione più moderna a breve.

Argomento		Risposte	Visualizzazioni
First component attempt. I've had a go at creating a Nav Button Highlighter. Not working as yet Dev	1	45	Novembre 11, 2025
Highlighter Composer Button Theme component	22	1301	Settembre 5, 2023
Fast Highlight Dev	49	2304	Settembre 30, 2023
MD Composer extras Theme component	70	8697	Luglio 8, 2025
Discourse Button Styles Theme component	40	10498	Settembre 18, 2025