Componente del tema degli intestazioni delle categorie del forum

[Rhidian (Rhidian Bramley)]

Questo componente del tema offre numerosi miglioramenti per l’intestazione delle categorie di Discourse.

L’intestazione ‘standard’ delle categorie di Discourse viene visualizzata nella parte superiore di ogni pagina di categoria, sopra i link di navigazione e l’elenco degli argomenti. Di solito è visibile solo se è stata caricata un’immagine del logo della categoria nelle impostazioni della categoria. L’intestazione mostra il logo e una breve descrizione della categoria, estratta dal primo paragrafo dell’argomento ‘A proposito della… categoria’.

Questo componente del tema offre i seguenti miglioramenti

L’intestazione della categoria è ora visualizzata di default per tutte le categorie. Ora include il nome della categoria, oltre al logo (se impostato) e alla descrizione della categoria. Può anche includere un’immagine di sfondo del logo e può essere stilizzata per apparire come una ‘scatola’ o un ‘banner’, utilizzando le impostazioni del colore della categoria. Sono disponibili numerose opzioni configurabili nelle impostazioni del tema.

Impostazioni del tema

• mostra nome categoria: Mostra il nome della categoria nell’intestazione
• mostra descrizione categoria: Mostra il testo della descrizione della categoria (il primo paragrafo dell’argomento ‘A proposito di questa categoria’)
• dimensione testo descrizione: Dimensione del testo all’interno della descrizione della categoria
• allineamento testo: Allineamento del testo all’interno dell’intestazione della categoria
• mostra intestazione sottocategoria: Mostra l’intestazione per le sottocategorie
• mostra nome categoria padre: Aggiungi il nome della categoria padre come prefisso nelle intestazioni delle sottocategorie (questo funge da link a breadcrumb verso la pagina della categoria padre)
• mostra icona blocco: Mostra l’icona del blocco sulle categorie protette dalle autorizzazioni
• mostra logo categoria: Mostra l’immagine del logo della categoria all’interno dell’intestazione
• mostra logo categoria padre: Mostra il logo della categoria padre se non è impostato un logo per la sottocategoria
• mostra logo sito: Mostra il piccolo logo del sito se non è impostato un logo per la categoria
• posizione logo: Posizione del logo all’interno della scatola
  – ‘left’ e ‘right’ visualizzano il logo in linea con il testo.
  – ‘top’ visualizza il logo sopra, allineato con il testo
• dimensione logo: Dimensione del logo all’interno dell’intestazione.
  – Piccolo: 50px di altezza, simile al logo di una scatola di sottocategoria.
  – Standard: 150px di altezza.
  – Originale: la dimensione dell’immagine caricata
• stile intestazione: Imposta lo stile dell’intestazione su:
  – Scatola: l’intestazione della categoria viene visualizzata nello stesso stile delle scatole standard di Discourse
  – Banner: imposta lo sfondo dell’intestazione sul colore di sfondo della categoria e il testo sul colore in primo piano
  – Nessuno: nessun bordo o stile di sfondo
• immagine di sfondo intestazione: Si applica se hai caricato un’immagine di sfondo per la categoria
  – ‘contain’, ‘cover’ e ‘resize’ visualizzano lo sfondo all’interno dell’intestazione.
  – ‘outside’ è l’impostazione predefinita di Discourse che lo visualizza all’esterno dell’intestazione, su tutta la pagina.
• mostra su mobile: Mostra l’intestazione della categoria sui dispositivi mobili
• forza allineamento mobile: Forza l’allineamento mobile del logo-testo al centro in alto dell’intestazione
• nascondi se nessuna descrizione categoria: Nascondi l’intestazione se la descrizione della categoria non è impostata
• escludi categorie: Le intestazioni non verranno visualizzate per queste categorie

Installa il componente del tema

Repository Git: https://github.com/naidihr/discourse-category-headers

Come installo un tema o un componente del tema?

Crediti

Grazie a @Johani per la sua eccellente Guida per sviluppatori ai temi di Discourse
Questo componente del tema è stato ispirato da altri temi, in particolare dal tema Discourse Category Banners di @awesomerobot

Esempi

Stile scatola: l’intestazione della categoria viene visualizzata nello stesso stile delle scatole delle sottocategorie

Sottocategoria: nota che la sottocategoria non ha un logo ma è impostata per ereditare il logo della categoria padre. Anche il nome della categoria padre è impostato per essere visualizzato come un link a breadcrumb.

Se la sottocategoria ha il proprio logo, lo visualizzerà al suo posto.

Visualizzazione mobile che mostra un diverso allineamento di testo e icone.

Impostazioni della dimensione del testo.

Esempio di opzioni di allineamento: testo centrato, logo a destra.

Stile banner: utilizza i colori di sfondo e in primo piano della categoria

Immagine di sfondo: utilizza l’immagine di sfondo della categoria

[awesomerobot (Kris)]

L’ampia gamma di opzioni rende tutto davvero flessibile, sembra fantastico!

[Heliosurge (Dan DeMontmorency)]

Che lavoro fantastico!

[Anatolia]

Questo aspetto è eccellente.

[labrumfield (Lauren Brumfield)]

Rhidian, potresti condividere le tue impostazioni di configurazione per far apparire le categorie in formato griglia nello screenshot che hai condiviso? (collegamento sotto)

Ho installato questo componente del tema e riesco a vedere solo le intestazioni a riquadro nella parte superiore di ogni pagina delle categorie. Grazie!

[labrumfield (Lauren Brumfield)]

In realtà, credo di averlo risolto. Mi mancava quanto segue sotto Impostazioni:

[Rhidian (Rhidian Bramley)]

Ottimo @labrumfield . Grazie anche per aver condiviso la risposta: credo che sarà utile anche per altri. Spero che il componente del tema funzioni bene per te.

[MichelleBarnett]

Sai per caso se c’è un modo per visualizzare in anteprima questa impostazione ‘Box con sottocategorie’ con un nuovo tema senza pubblicarlo?

[Rhidian (Rhidian Bramley)]

Non sono sicuro di cosa intendiate per anteprima? Potete visualizzare in anteprima i temi e i componenti dei temi nelle impostazioni di amministrazione personalizza

[MichelleBarnett]

Idealmente, vorrei poter visualizzare in anteprima l’impostazione ‘Caselle con sottocategorie’ senza pubblicarla. In alternativa, esiste un modo per associare questa impostazione solo al componente del tuo tema e non ad altri temi o componenti del tema?

Non credo sia possibile farlo, quindi volevo solo chiedere se qualcuno avesse qualche idea. Grazie!

[Rhidian (Rhidian Bramley)]

Le caselle con l’impostazione della sottocategoria non fanno parte di questo componente. Si tratta di un’impostazione delle categorie di Discourse.

Discourse Category Headers theme component

Actually, I believe I figured it out. I was missing the following under Settings: [Screen Shot 2020-07-08 at 1.23.35 PM]

Non è possibile ‘visualizzarne un’anteprima’, ma puoi attivarla temporaneamente per vedere come appare. Le impostazioni delle categorie servono a visualizzare le sottocategorie come righe o caselle.

[MichelleBarnett]

Ciao,

Ho appena modificato un’impostazione di categoria e le intestazioni delle categorie si sono un po’ disordinate. (vedi immagine)

L’impostazione modificata era lo Stile dell’elenco delle sottocategorie, passato da “Box” a “Box con argomenti in evidenza”. Non credo che siano state modificate le altre impostazioni. Hai idea di come riportare il banner in alto, invece che nel riquadro in alto a sinistra?

Inoltre, quando torno a impostare “Box”, non torna alla normalità.

[JacobDK]

Grazie mille. Questo è un componente davvero, davvero, davvero bello.

Ho provato la fortuna e ho cercato di inserire un video YouTube e un podcast di SoundCloud, ma purtroppo non sono stati visualizzati nella casella della categoria.

Sarebbe un modo fantastico per dare alle persone un’introduzione su di cosa tratta la categoria, se potessi scegliere tra immagine e/o video e/o audio. Creare una breve introduzione video per ogni categoria invece di un’immagine. In questo modo, un potenziale membro potrebbe ottenere una panoramica da un breve testo e guardare un video con un’introduzione su di cosa tratta la categoria, oppure un’introduzione audio/podcast se è la loro preferenza.

Ma grazie mille per il tuo lavoro e il tuo contributo.

[satonotdead]

Quali sono le migliori dimensioni e opzioni per rendere un banner responsivo? Forse devo controllare un altro componente?

Penso che sarebbe ottimo visualizzare le informazioni della categoria con un buon design.

Grazie per questo modulo. È fantastico.

[Rhidian (Rhidian Bramley)]

I banner utilizzano i modelli responsivi standard di Discourse, quindi dovrebbero ridimensionarsi automaticamente in base al tuo dispositivo.

[satonotdead]

Vedo che la configurazione automatica non è ottimale per la larghezza completa del banner su desktop e dispositivi mobili.

Hai qualche esempio a riguardo? Forse potrei risolverlo tramite CSS, utilizzando alcune media query, ma potrebbe essere utile per tutti. O forse sto tralasciando qualcosa nella mia configurazione.

Grazie per la risposta, Rhidian.

[James_Lodge]

Ciao,

sto utilizzando il tuo fantastico componente tema, ma qualsiasi impostazione faccia, nulla cambia nel layout. La descrizione non viene visualizzata e, se sposto il logo tra in alto, a sinistra e a destra, non si notano effetti.

Cosa mi sto perdendo, per favore?

[James_Lodge]

Qualcuno monitora ancora questo argomento, o questo componente del tema non è più mantenuto?

[Rhidian (Rhidian Bramley)]

Non ci sono state modifiche al componente. In questi casi, è probabile che sia un altro componente a interagire con esso. Ti suggeriamo di disabilitare i componenti uno alla volta per verificare se riesci a individuarlo. Se ci riesci, facci sapere.

[evantill (Eric Vantillard)]

Il link nella descrizione della categoria è stilizzato come codice normale a causa della regola CSS a,a:visited {color: inherit;} nel file component.css.

common/common.scss

È questo il risultato atteso?