Questo componente del tema ti permette di evidenziare una (o più) categoria in Discourse. Puoi:
- Assegnare uno stile di sfondo speciale a categorie specifiche
- Aggiungere un link alla categoria nell’intestazione con lo stesso stile speciale
Un caso d’uso tipico è per una categoria contenente contenuti “Premium”.
Come installare
Ottieni il codiceNavigazione delle categorie ed etichetta nell’intestazione
Pagina delle categorie
Configurazione
Il componente del tema Category Highlighter ha un’impostazione principale: “highlight categories” (evidenzia categorie). Troverai questa impostazione nel pannello delle impostazioni del componente del tema Category Highlighter.
Ogni categoria che desideri evidenziare ha la propria voce in questa impostazione. Il formato di ogni voce è:
category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link
Un esempio di questo formato è:
premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star: Premium~:star:
Ci sono sei valori possibili, ciascuno separato da ~ (una “tilde”). Analizziamo ciascun valore.
Category Slug
Questo è lo “slug” della categoria che desideri evidenziare. Puoi trovarlo nelle impostazioni della categoria.
Se devi evidenziare una sottocategoria, devi utilizzare lo slug della categoria “Parent” (genitore), seguito dallo slug della sottocategoria separato da una /.
Ad esempio, se esistesse una sottocategoria di premium con lo slug videos che desideri evidenziare, useresti:
premium/videos
Permessi
Tieni presente che solo gli utenti che hanno i permessi di read (lettura) per la categoria evidenziata vedranno gli evidenziazioni, inclusa l’etichetta nell’intestazione. Puoi modificare i permessi della categoria nelle impostazioni di “Sicurezza” della categoria.
Background
Questo è un valore che verrà assegnato alla proprietà CSS background del badge della categoria. Puoi utilizzare qualsiasi valore supportato da tale proprietà.
background - CSS: Cascading Style Sheets | MDN
La proprietà CSS abbreviata background imposta tutte le proprietà di stile di sfondo in una volta sola, come colore, immagine, origine e dimensione, o metodo di ripetizione.
Ad esempio linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).
Text Color
Questo è un valore che verrà assegnato alla proprietà CSS color del badge della categoria. Questo influisce sul colore del testo. Puoi utilizzare qualsiasi valore supportato da tale proprietà.
color - CSS: Cascading Style Sheets | MDN
La proprietà CSS color imposta il valore del colore in primo piano del testo di un elemento e delle decorazioni del testo, e imposta il valore currentcolor. currentcolor può essere utilizzato come valore indiretto in altre proprietà ed è il valore predefinito per altre proprietà di colore, come…
Nel nostro esempio, questo valore è #88562e.
Header Label
Questo valore serve a due scopi. Determina:
- se la categoria evidenziata riceverà un’etichetta nell’intestazione; e
- il contenuto di tale etichetta.
Se non desideri un’etichetta nell’intestazione, non includere affatto questo valore.
Questo valore supporta testo, entità HTML ed emoji.
Il valore dell’etichetta nell’intestazione qui è: :star: Premium. Cioè:
- Lo shortcode per l’emoji stella:
:star: - Due entità HTML per spazi non divisibili (ciascuna aggiunge uno spazio bianco):
- Il nostro testo dell’etichetta:
Premium
Puoi trovare l’elenco completo degli shortcode delle emoji qui e l’elenco completo delle entità HTML qui.
Mobile Header Label
Anche questo valore serve a due scopi. Determina:
- se la categoria evidenziata riceverà un’etichetta nell’intestazione mobile; e
- il contenuto dell’etichetta nell’intestazione mobile.
L’utilizzo e la formattazione sono gli stessi dell’etichetta nell’intestazione. Una cosa da notare qui è che hai meno spazio su mobile, quindi potrebbe essere prudente utilizzare solo un’emoji o una parola breve per risparmiare spazio.
Categoria Genitore
Puoi creare un menu a tendina nell’intestazione impostando il “parent” (genitore) di un elemento. Inserisci lo slug della categoria come sesto elemento e l’elemento corrispondente diventerà un elemento di sottomenu di quella categoria nell’intestazione. Come per il primo elemento, assicurati di utilizzare qui lo slug della categoria, che puoi recuperare dalla finestra di dialogo delle impostazioni della categoria.
Alternate Link
Per impostazione predefinita, ogni elemento della categoria collega alla categoria a cui si riferisce. Puoi modificare il link aggiungendo un URL come sesto elemento nel blocco delle impostazioni.
preeemium
