Ho dovuto ricostruirlo come un componente puramente CSS poiché non riuscivo a rendere stabile la versione Javascript. L’obiettivo è aiutarti a evidenziare un percorso che desideri specificamente che gli utenti seguano.
Link: https://github.com/focallocal/nav-buttons-highlighter
Ecco come è installato e sta evidenziando il plugin della bacheca Kanban, che la maggior parte degli utenti sulla mia piattaforma non saprebbe dove trovare anche dopo essere stati membri per mesi, specialmente quelli che usano principalmente il cellulare.
Desktop:
Mobile:
Nav Buttons Highlighter
Un componente del tema 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 link di navigazione importanti (ad esempio, la tua bacheca, la documentazione o le categorie chiave)
- Migliorare l’esperienza utente mobile rendendo più evidente il pulsante di navigazione a discesa
- Creare una gerarchia visiva nella tua barra di navigazione
Caratteristiche
- Stile del pulsante 3D con gradienti, ombre ed effetti al passaggio del mouse
- Responsive per dispositivi mobili: evidenzia il pulsante di attivazione del menu a discesa “Latest” su mobile in modo che gli utenti capiscano meglio che possono/dovrebbero fare clic su di esso
- Preconfigurato per il plugin Discourse Kanban per impostazione predefinita
- Implementazione solo CSS: affidabile e leggera
- Facile da personalizzare
Configurazione predefinita
Per impostazione predefinita, questo componente è configurato per evidenziare il plugin Discourse Kanban [link](https://meta.discourse.org/t/kanban-board/) in BLU. Tuttavia, può essere facilmente modificato per evidenziare qualsiasi link di navigazione scelto in qualsiasi colore.
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
Trovare il file CSS
NON ESISTE un pannello di impostazioni per amministratori per questo componente - tutta la personalizzazione viene eseguita modificando direttamente il file CSS nel tuo repository.
Il file CSS si trova in:
common/common.scss
Come modificarlo:
Opzione 1: Modifica su GitHub (più facile)
- Esegui il fork di una versione di questo repository e installala
- Naviga su
common/common.scss - Fai clic sull’icona della matita per modificare
- Apporta le tue modifiche e fai il commit
- In Amministrazione Discourse → Personalizza → Componenti, fai clic su “Verifica aggiornamenti” sul componente Nav Buttons Highlighter
Opzione 2: Modifica localmente
- Clona il repository sul tuo computer
- Modifica
common/common.scssin qualsiasi editor di testo - Esegui il commit e il push delle tue modifiche
- In Amministrazione Discourse → Personalizza → Componenti, fai clic su “Verifica aggiornamenti”
Note:
- Questo componente funziona su TUTTI i temi in cui è abilitato (non è legato a un tema specifico)
- Il file CSS contiene commenti inline dettagliati che spiegano esattamente cosa cambiare
- Le modifiche richiedono l’aggiornamento del componente nell’amministrazione di Discourse dopo la modifica
I commenti nel file CSS spiegano:
- Quale selettore cambiare (ad esempio,
a.kanban-nav) per evidenziare link diversi - Quali valori di colore aggiornare per colori diversi
- Come aggiungere/rimuovere l’evidenziazione del menu a discesa mobile
Esempi
Cambiare il colore da Blu a Verde
Il pulsante utilizza tre tonalità di blu per creare un effetto gradiente:
- Azzurro:
#5ca3ff(in alto nel gradiente) - Blu medio:
#4285F4(al centro del gradiente) - Blu scuro:
#3a75e4(in basso/ombra)
Per cambiare in verde, trova e sostituisci questi valori in common/common.scss:
| Blu attuale | Sostituisci con Verde |
|---|---|
#5ca3ff |
#5cb860 |
#4285F4 |
#4CAF50 |
#3a75e4 |
#45a049 |
rgba(66, 133, 244 |
rgba(76, 175, 80 |
Evidenziare un link di navigazione diverso
Sostituisci il selettore a.kanban-nav con il tuo link di destinazione:
Esempi:
a[href=“/c/nome-categoria”]- Evidenzia una categoria specificaa[href=“/tags/nome-tag”]- Evidenzia un tag specificoa[href=“/mia-pagina-personalizzata”]- Evidenzia qualsiasi link personalizzato#navigation-bar > li:nth-child(2) > a- Evidenzia il secondo pulsante di navigazione
Come trovare il selettore:
- Apri il tuo forum in un browser
- Fai clic con il pulsante destro del mouse sul link che desideri evidenziare
- Seleziona “Ispeziona elemento”
- Cerca nomi di classe (ad esempio,
class=“kanban-nav”) o valori href nell’HTML
Disabilitare l’evidenziazione del menu a discesa mobile
Trova la sezione etichettata /* Latest dropdown button on mobile */ e fai una delle seguenti operazioni:
- Elimina l’intera sezione, OPPURE
- Commentala racchiudendola tra
/* … */
Evidenziare link all’interno del menu a discesa mobile
Aggiungi questo blocco CSS dopo gli stili esistenti:
.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;
}
Sostituisci a.kanban-nav con il selettore desiderato.
Sviluppo
Questo repository contiene:
common/common.scssTutte le stilizzazioni dei pulsanti e guida dettagliata alla personalizzazioneassets/javascripts/discourse/api-initializers/nav-buttons-highlighter.jsInizializzatore minimo (richiesto per Discourse)about.jsonMetadati del componente
Risoluzione dei problemi
D: Le modifiche non vengono visualizzate
R: Dopo aver modificato, 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 cambia il selettore e opzionalmente i colori.
Licenza
MIT Public Happiness Movement