Banner persistente di Discourse

:information_source: Riepilogo Viene visualizzato un banner persistente nella parte superiore di ogni pagina che può essere nascosto solo dagli amministratori.
:eyeglasses: Anteprima Theme Creator
:hammer_and_wrench: Repository GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user.
:question: Guida all’installazione Come installare un tema o un componente del tema
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’utilizzo dei temi di Discourse

Installa questo componente del tema

Questo componente visualizza un banner nella parte superiore di ogni pagina. È possibile utilizzare qualsiasi colore CSS valido. Se si intende utilizzare le variabili del tema di Discourse, racchiuderle in var(), in modo da ottenere qualcosa come var(--tertiary-very-low).


Ci sono 7 impostazioni per controllare il banner.

  1. banner_background_color cambia il colore di sfondo del banner.
  2. banner_text_color cambia il colore del testo del banner.
  3. banner_border_color cambia il colore del bordo del banner.
  4. banner_border_thickness cambia lo spessore del bordo del banner.
  5. banner_text_content cambia il testo del banner. Il testo andrà a capo nel banner se è più lungo di 1 riga.
  6. banner_visible cambia la visibilità del banner. show per mostrare il banner, hide nasconde il banner.
  7. banner_location posiziona il banner in 1 dei 4 punti disponibili: above-site-header, below-site-header, above-main-container e before-topic-list.

Un ringraziamento speciale a @Lilly per l’aiuto nell’organizzazione dei file!

4 Mi Piace

Lo trovo abbastanza simile ai componenti del tema “Notification banners” e ha più personalizzazione.

2 Mi Piace

Sì, ma in questo modo il banner rimane lì (le persone hanno chiesto come far tornare il banner dopo averlo chiuso).

2 Mi Piace

Bel lavoro Nate. :clap: :slight_smile:
Mi piace la semplicità

Non credo che l’anteprima del creatore del tema funzioni. :thinking:

Alcuni suggerimenti su cui riflettere:

  • c’è un piccolo problema di posizionamento in modalità desktop, specialmente se si utilizza uno schermo largo / a schermo intero.

  • sarebbe bello poter controllare le dimensioni e il colore di quel bordo.

  • forse opzioni di posizionamento con diversi plugin outlets, come below-site-header e above-main-containter?

  • sebbene l’uso di un elenco enum rispetto a un input di testo per le scelte di colore sia conveniente, limita anche gli amministratori dall’utilizzare le variabili della palette di colori che funzionano con le modalità scura / chiara, o dall’essere più granulari con i valori dei colori esadecimali.

  • Suggerirei di rendere l’impostazione del testo del banner un input di testo con la proprietà textarea: true, in modo da ottenere una casella di testo multilinea che l’utente può espandere. Quindi è più facile fare questo:

2 Mi Piace

[citazione=“Lilly, post:4, topic:330575”]
c’è un piccolo problema di posizionamento in modalità desktop, specialmente se si utilizza uno schermo largo / a schermo intero
[/citazione]

Mi divertirò con i posizionamenti del banner e cercherò di farlo funzionare.

[citazione=“Lilly, post:4, topic:330575”]
sarebbe bello controllare le dimensioni e il colore del bordo.
[/citazione]
Non dovrebbe essere un grosso problema, lo aggiungerò.

[citazione=“Lilly, post:4, topic:330575”]
forse opzioni per il posizionamento con diversi plugin outlet, come below-site-header e above-main-containter?
[/citazione]
Capito. Ho una sorta di idea su come implementarlo.

[citazione=“Lilly, post:4, topic:330575”]
mentre l’uso di un elenco enum rispetto all’input di testo per le scelte di colore è conveniente, limita anche gli amministratori dall’utilizzare le variabili della tavolozza dei colori che funzionano con le modalità scura/chiara o dall’essere più granulari con i valori di colore esadecimali.
[/citazione]
Penso di poterlo implementare.

[citazione=“Lilly, post:4, topic:330575”]
suggerirei di rendere l’impostazione dell’input di testo della stringa del banner con la proprietà textarea-true, quindi otterrai una casella di testo multi-riga che l’utente può espandere.
[/citazione]
Capito, lo aggiungerò.

1 Mi Piace

@Lilly Solo per verificare, lo aggiungo in settings.yml?

1 Mi Piace

sì, puoi vederlo qui nel componente banner versatile:

risultato nelle impostazioni del componente:

2 Mi Piace

[citazione=“Lilly, post:4, topic:330575”]
forse opzioni per il posizionamento con diverse uscite plugin, come below-site-header e above-main-containter?
[/citazione]

Implementato.

[citazione=“Lilly, post:4, topic:330575”]
sarebbe bello controllare le dimensioni e il colore del bordo.
[/citazione]
Fatto.

[citazione=“Lilly, post:4, topic:330575”]
inoltre impedisce agli amministratori di utilizzare le variabili della tavolozza dei colori che funzionano con le modalità scura/chiara, o di essere più granulari con i valori dei colori esadecimali.
[/citazione]
Ora puoi utilizzare valori esadecimali (includi #), colori CSS validi o variabili del tema (var(–var-name)).

[citazione=“Lilly, post:4, topic:330575”]
suggerirei di impostare l’input del testo della stringa del banner con textarea: true
[/citazione]
Fatto anche questo.

[citazione=“Lilly, post:4, topic:330575”]
c’è un piccolo problema di posizionamento nella modalità desktop, soprattutto se si utilizza uno schermo largo/a schermo intero.
[/citazione]
Penso che sia stato risolto. Potresti provarlo dalla tua parte?

2 Mi Piace

questo è decisamente risolto. buon lavoro. :smiley: :discourse:

screenshot from my widescreen desktop view

3 Mi Piace

AGGIORNAMENTO:
Ho semplificato il file .gjs spostando le istruzioni if per verificare se il testo del banner è vuoto e la visibilità del banner nel file .scss.

2 Mi Piace