Banner di Categoria

[Discourse]

	Riepilogo	Category Banners utilizza i dettagli esistenti delle categorie per creare banner per le tue pagine di categoria (per i tag consulta Discourse Tag Banners).
	Anteprima	Anteprima su Discourse Theme Creator
	Collegamento al Repository	https://github.com/discourse/discourse-category-banners
	Nuovo a Discourse Themes?	Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Poiché questo è un componente del tema #ufficiale mantenuto dal team di Discourse, le richieste di #supporto, bug, ux e #funzionalità possono essere presentate nelle rispettive categorie qui su Meta, e contrassegnate con l’etichetta appropriata del componente del tema. Clicca su un collegamento qui sotto per iniziarne uno.

 Supporto  Bug  UX  Funzionalità

Funzionalità

Category Banners utilizza i dettagli esistenti delle categorie per creare banner per le tue pagine di categoria. Utilizza il nome, la descrizione e il colore della categoria per generare un banner nella parte superiore delle pagine della categoria pertinente (per i tag consulta Discourse Tag Banners).

La descrizione della categoria è definita dal primo paragrafo del topic “Definizione della categoria per …” di ciascuna categoria. I colori di sfondo/testo del banner sono definiti dalle impostazioni del badge della tua categoria.

Per impostazione predefinita, questo verrà visualizzato su desktop e mobile su tutte le pagine di Categoria e Sottocategoria, ma non apparirà se non hai fornito una descrizione alla tua categoria.

Impostazioni

Questo componente include opzioni per sovrascrivere i valori predefiniti:

Nome	Descrizione
show description	Mostra la descrizione dal post “About This Category”
show mobile	Mostra i banner su mobile
show subcategory	Mostra i banner per le sottocategorie
hide if no description	Nascondi i banner se la descrizione della categoria non è impostata
show category logo	Mostra il logo della categoria
align text
exceptions	Il banner non verrà mostrato per questi NOMI di categoria
categories	Categorie per cui mostrare un banner
plugin outlet	Modifica la posizione del banner nella pagina
show category icon	Mostra l’icona o l’emoji della categoria dalle impostazioni della categoria *
override category icon color	Quando vengono utilizzate le icone delle categorie, abilitare questa opzione farà sì che l’icona corrisponda al colore del testo del banner

• Nota che questa impostazione ora si riferisce all’icona o emoji della categoria impostata nelle impostazioni della categoria, non al componente del tema Category Icons (che è deprecato a favore della funzionalità principale).

Note sulla personalizzazione

Se desideri personalizzarli con del CSS aggiuntivo, puoi indirizzare intestazioni di categoria specifiche utilizzando questa struttura (example-category è il nome della tua categoria):

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

Questo componente aggiunge anche la classe category-header al tag body come target CSS aggiuntivo.

Ospitato da noi? I componenti del tema sono disponibili per l’uso sui nostri piani Standard, Business ed Enterprise.

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

@jrgong

Is there any way to display emoji’s there?

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

[Hang]

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

[Vanecx]

Hello, and thank you for this theme component!

I just tried installing it, following this tutorial (did exactly the same steps) to try this Category Banners component, but nothing happens. No banner in any of the categories. Is there anything that I might have done that doesn’t make it work? The only explanation I see is that the “bootstrap” warning blocks it?

[simon]

@Vanecx

No banner in any of the categories. Is there anything that I might have done that doesn’t make it work?

By default, the theme component does not display category banners if you have not set a category description for a category. This can be changed by unchecking the “Hide banners if category description not set” checkbox.

Category descriptions are set by editing the About category topic that Discourse automatically creates for every category. If you have either added category descriptions, or disabled the setting to hide banners for categories without descriptions, and you are still not seeing category banners, let us know. We’ll look into what is going on.

[Vanecx]

Thank you for your answer. I have checked and confirm that each category on the forum has a description. The “Hide banners…” option is now unchecked just to make sure but nothing changes.

As you can see on the images, everything looks normal in the settings :

No idea if it could have anything to do with the issue but just informing you it’s a Discourse installation on a Yunohost instance.

[downey (Michael Downey)]

C’è qualcuno oltre a me che pensa che sarebbe bello abilitare questo stesso stile anche nelle pagine dell’elenco dei gruppi (ad es. /g/foo)? Il CSS, purtroppo, non è esattamente lo stesso, e immagino che richiederebbe una gestione aggiuntiva dei vari pulsanti a destra del nome del gruppo, ovvero: Richiedi Messaggio Elimina

Potrebbe fare una grande differenza per un aspetto e una sensazione coerenti, e rendere i gruppi più come un elemento di “prima classe” nell’interfaccia utente. (A mio parere)

[jord8on (Jordan)]

Adoro questi banner delle categorie! Grazie per aver creato questo componente del tema!

Mi piacerebbe molto che questo banner fosse presente nella home page principale dei nostri forum, dove vengono mostrate:

• Le discussioni “Ultime” o
• Le discussioni “Top” o
• Le “Categorie” o
• “Seguiti” (se stai utilizzando il Plugin Follow )

Esisterebbe un modo (relativamente) semplice per avere un banner se qualcuno seleziona ciascuna di queste opzioni, in base a ciò che è stato scelto?

[Rhidian (Rhidian Bramley)]

@awesomerobot, spero che non ti dispiaccia che io condivida questo qui…

Ho creato una fork di questo tema discourse-category-banners chiamato

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

Puoi visualizzarne un’anteprima qui:

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

Fondamentalmente fa la stessa cosa, ma con alcune modifiche:

• La casella del banner di categoria viene visualizzata in linea sopra l’intestazione principale, invece di occupare tutta la larghezza in alto. Questo permette di mostrare un tema banner in alto, ad esempio discourse-versatile-banner.

• La casella del banner di categoria viene visualizzata con lo stesso stile delle caselle native delle sottocategorie di Discourse, che sono un componente fondamentale di Discourse. Queste caselle delle sottocategorie sono un’opzione di visualizzazione nelle impostazioni delle categorie di Discourse Mostra elenco delle sottocategorie sopra gli argomenti in questa categoria. Questa opzione visualizza il nome e la descrizione della sottocategoria come una riga o una casella sopra l’elenco degli argomenti, utilizzando il colore di sfondo della categoria come bordo sinistro.

• Se la categoria è una sottocategoria, il nome della categoria viene visualizzato come breadcrumb nel seguente modo: Nome categoria padre: Nome sottocategoria

Screenshot dimostrativo della casella del banner del tema per la categoria, sopra le caselle native delle sottocategorie.

Screenshot della sottocategoria, che mostra il riferimento breadcrumb alla categoria padre.

Questo è il mio primo tentativo di modifica di un tema. Spero che possa essere utile!

Aggiornamento

Ho rifattorizzato questa adattamento come componente separato, con molte funzionalità aggiuntive, tra cui l’utilizzo dell’immagine del logo e dell’immagine di sfondo della categoria nell’intestazione. Questo nuovo componente sostituisce efficacemente l’intestazione standard della categoria di Discourse, a differenza dei banner di categoria, diventando quindi un nuovo componente. Consulta:

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

Eccezioni: se non vuoi che una categoria abbia un banner, aggiungi qui il suo nome

Questo non funziona per noi. Ho provato sia lo slug della categoria che l’ID della categoria, ma il banner rimane ostinatamente lì. Funziona per qualcun altro?

[awesomerobot (Kris)]

L’ho appena provato e funziona per me: sta cercando la categoria name con distinzione tra maiuscole e minuscole. Ripensandoci, non è stato il modo migliore per implementarlo… Potrei probabilmente migliorarlo.

[nathank (Nathan Kershaw)]

Ah, quella sorta è fatta per me! E nel guida sopra hai scritto proprio ‘nome’ - non l’avevo letto.

Il campo ‘nome’ non è molto intuitivo, dato che in realtà non lo usiamo per altro. Ma viene visualizzato spesso. Rendere più esplicita questa impostazione nelle opzioni andrebbe benissimo, secondo me.

[AntiMetaman]

Invece di aggiungere eccezioni per le categorie che non mostreranno un determinato banner caricato, non possiamo semplicemente specificare quale categoria deve mostrare quale banner?

[awesomerobot (Kris)]

Dipende dal sito specifico e dal caso d’uso, ne sono certo. Il mio primo pensiero è che sia più probabile che un sito voglia implementarlo ovunque e che, se ci fossero eccezioni, sarebbero solo poche.

Se volessi implementare un banner per un numero limitato di categorie, potrebbe esserci un’opzione componente del tema migliore, progettata per essere meno generica e universale, come Versatile Banner o personalizzando una delle opzioni trovate in https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368

[Idan]

Sarebbe fantastico poter caricare un’immagine per sostituire il testo.

[oca]

Grazie per questo componente davvero utile!

Sarebbe possibile aggiungere una piccola funzionalità?

• Aggiungere la classe restricted all’elemento <span.discourse-category-banners> o <div.category-title-header> quando la categoria non è pubblica, allo stesso modo in cui viene fatto per il badge della categoria.

Sarebbe utile per personalizzare il banner con CSS aggiuntivo, per mostrare all’utente che questa categoria è speciale.

Al momento è possibile farlo, ma è complicato selezionare con CSS l’icona del lucchetto ed eseguire alcune operazioni. Poiché CSS non ha il selettore per gli elementi genitore, non posso utilizzare la presenza dell’icona del lucchetto per verificare se il banner deve essere modificato.

Non so ancora come creare le PR, ma userei questa richiesta come ottima occasione per imparare, se foste interessati alla mia modifica.

[Drew-ART (Drew)]

È possibile farlo funzionare sulle pagine dei tag? Ho trovato il plugin tag-banners, ma non ha la possibilità di aggiungere testo o collegamenti.