 |
Riepilogo | Il componente tematico Notification Banners offre un modo personalizzabile e flessibile per condividere messaggi sul tuo sito. |
 |
Anteprima | Theme Creator |
 |
Repository | |
| GitHub - gormus/discourse-notification-banners: Helps admins create notification banners in various plugin outlets. | ||
 |
Guida all’installazione | Come installare un tema o un componente tematico |
 |
Nuovo ai temi di Discourse? | Guida per principianti all’uso dei temi di Discourse |
Installa questo componente tematico
Il componente tematico Notification Banners offre un modo personalizzabile e flessibile per condividere messaggi sul tuo sito.
Ecco alcune caratteristiche principali:
- Completamente personalizzabile: personalizza ogni banner per soddisfare le tue esigenze, inclusi contenuto, stile e comportamento.
- Opzioni di visualizzazione flessibili: mostra i banner impilati o come carosello rotante per una facile navigazione.
- Messaggistica mirata: mostra i banner solo a specifici gruppi di utenti, garantendo una comunicazione personalizzata.
- Supporto temi: i banner si adattano automaticamente ai temi chiari o scuri, oppure puoi impostare colori personalizzati.
- Supporto Markdown: utilizza Markdown per formattare facilmente i messaggi dei tuoi banner.
- Carosello basato su Splide: la funzionalità carosello è alimentata dalla libreria JavaScript Splide, con impostazioni individuali per ogni banner.
- Pianificazione: imposta date di inizio e fine specifiche per quando i banner dovrebbero apparire.
- Facile ordine di visualizzazione: controlla l’ordine in cui vengono visualizzati i banner con impostazioni semplici.
Questo componente rende facile coinvolgere il tuo pubblico con notifiche visivamente accattivanti, personalizzate e ben organizzate.
Installazione
-
Segui le istruzioni ufficiali per aggiungere questo componente tematico al tuo tema:
Beginner's guide to using Discourse Themes -
Modifica l’impostazione
theme authorized extensionsper includere le estensioni di filecssejs.
Funzionalità
Ogni banner di notifica può avere le seguenti funzionalità:
- Titolo, facoltativo, visualizzato come intestazione H2 sopra il messaggio
- Messaggio, messaggio di notifica semplice lungo 500 caratteri. È supportato Markdown.
- Pubblico, seleziona i gruppi di utenti come pubblico per la notifica.
- Categorie; seleziona le categorie su cui visualizzare il banner. Lascia vuoto per visualizzare su tutte le categorie.
- Colore di sfondo, può essere impostato per differenziare il banner dagli altri.
- Plugin outlet, imposta le notifiche sopra o sotto l’intestazione del sito, oppure utilizza l’outlet top-notices per visualizzarle insieme ai banner di topic nativi.
- Visualizza in un carosello, quando selezionato, tutti i banner in ogni outlet vengono visualizzati in un carosello. Richiede un minimo di 2 banner selezionati per qualsiasi outlet.
- Ignorabile, quando selezionato, gli utenti potranno ignorare il banner e questo verrà nascosto per loro.
- Date di inizio e fine, quando definite, la visibilità del banner obbedisce a tali date. Puoi quindi impostare un banner in anticipo, ma diventerà visibile al pubblico selezionato solo alla data e ora impostate; o allo stesso modo puoi rimuovere automaticamente il banner dalla data dell’ultima visualizzazione.
- Ordine di visualizzazione, definisci quale banner deve essere visualizzato in alto, quale in basso. Dalla v1.3.0, utilizzando i pulsanti nativi di riordino.
Il Carosello
La funzionalità di slideshow, o carosello, è fornita dalla libreria Splide; è concessa in licenza MIT.
Ogni carosello può essere configurato nella pagina del componente tematico utilizzando le opzioni Splide.
Colori dei Banner
Per impostazione predefinita, i banner utilizzeranno gli stessi colori del banner-topic:
.notification-banner {
background: var(--tertiary-low);
color: var(--primary);
}
Tuttavia, quando viene definito un colore di sfondo nelle impostazioni del banner, a seconda della sua luminosità, il nero o il bianco viene selezionato automaticamente come colore di primo piano.
Classi CSS Disponibili
.notification-banners--above-site-header,
.notification-banners--below-site-header,
.notification-banners--top-notices {
.notification-banner {
&__wrapper {
}
&__close {
}
&__header {
}
&__content {
}
}
&.splide {
.notification-banner {
}
}
}
.notification-banners--top-notices {
.notification-banner {
&__content {
}
}
}
La v1.3.0 introduce modifiche che potrebbero causare incompatibilità (per alcuni)
Non dimenticare di testare le modifiche e controllare le tue personalizzazioni prima di aggiornare i tuoi siti di produzione.
