Questo è un corso intensivo sui fondamenti dei temi di Discourse. Il pubblico di riferimento è chiunque non abbia familiarità con i temi di Discourse. Se hai già utilizzato temi/componenti tema di Discourse, questa guida probabilmente non fa per te.
Cosa sono i temi e i componenti tema?
Un tema o un componente tema è un insieme di file raggruppati insieme, progettati per modificare visivamente Discourse o per aggiungere nuove funzionalità.
Iniziamo con i temi.
Temi
In generale, i temi non sono destinati a essere compatibili tra loro perché sono essenzialmente design autonomi e diversi. Pensa ai temi come a delle “skin” o ai lanciatori su Android. Puoi installare più lanciatori, ma non puoi usarne due contemporaneamente. La tua installazione predefinita di Discourse include due temi: Foundation e Horizon.
Foundation offre un aspetto classico e pulito di Discourse, mentre Horizon propone un design più moderno con diverse palette di colori tra cui scegliere (come Horizon, Royal, Clover, Lily, Violet e Marigold — ognuna con varianti chiara e scura).
Predefinito
e Scuro
Supponiamo che questo non sia sufficiente e tu voglia MOAR (di più). Beh, puoi installare temi aggiuntivi piuttosto facilmente. Ecco alcuni esempi di temi gratuiti disponibili qui su Meta.
Il design personale “minimal” della lista dei topic di Sam
Come puoi vedere, il tuo sito può apparire drasticamente diverso in base al tema selezionato; tuttavia, non è finita qui. Oltre ai temi, Discourse supporta anche i componenti tema.
Componenti tema
Usiamo la frase “theme-component” (componente tema) per descrivere pacchetti più orientati alla personalizzazione di un aspetto specifico di Discourse. Grazie al loro focus ristretto, i componenti tema sono quasi sempre compatibili tra loro. Questo significa che puoi avere più componenti tema in esecuzione contemporaneamente sotto qualsiasi tema. Puoi pensare ai componenti tema come alle app sul tuo telefono.
Come sempre, gli esempi sono il modo migliore per descrivere qualcosa, quindi ecco alcuni esempi di componenti tema disponibili qui su Meta.
Questo componente tema prende i dettagli esistenti della categoria, inclusi nome, descrizione e colore, e genera un banner nella parte superiore delle pagine della categoria rilevante.
Questo componente tema aggiunge un’intestazione superiore aggiuntiva per il branding con il tuo logo, link di navigazione e icone social sia per le viste mobile che desktop. Il logo del brand può essere un’immagine o del testo.
Come puoi vedere, i componenti tema hanno un focus molto più ristretto. Di conseguenza, sono compatibili tra loro nella maggior parte dei casi. Ora hai un’idea generale di cosa siano i temi e i componenti tema di Discourse. Scendiamo un po’ più nel dettaglio.
Interfaccia del tema di Discourse
Analizziamo l’interfaccia per i temi. Vai su your.site.com/admin/customize/themes e dovresti vedere qualcosa del genere:
Questa è l’interfaccia predefinita dei temi in Discourse. Puoi fare molte cose qui:
- Impostare il tema attivo predefinito
- Scegliere quali temi rendere disponibili per gli utenti
- Creare nuovi temi e componenti tema
- Importare nuovi temi e componenti tema
- Aggiungere componenti tema a un tema
- Modificare gli schemi di colore
- Modificare le impostazioni del tema
- Anteprima di un tema
Analizziamoli uno per uno.
Impostare il tema attivo predefinito
La piccola spunta accanto al nome del tema predefinito indica che questo è il tema attivo sul tuo sito.
Ora cambiamo il tema attivo in Scuro. Clicca sul tema Scuro e dovresti vedere questo:
Il tema attivo sul tuo sito verrà impostato su Scuro. Questo significa che tutti coloro che visitano il tuo sito vedranno questo:
E la spunta si sposterà accanto al nome del tema Scuro, indicando che è il tema attivo.
Scegliere quali temi rendere disponibili per gli utenti
È bello poter impostare un tema per il tuo sito, ma sai cosa è ancora meglio? Lasciare che siano gli utenti a decidere. Discourse ti permette di offrire temi diversi ai tuoi utenti, consentendo loro di impostare il tema in base alle proprie preferenze. La loro scelta è limitata al proprio account e non influirà sulla scelta del tema attivo o sulle scelte degli altri utenti.
Ad esempio, puoi impostare il tema attivo sul tema predefinito (chiaro) ma offrire il tema scuro come opzione. Proviamo a farlo ora. Nell’interfaccia dei temi.
Tutti i temi attivi che hai, sia il tema predefinito impostato sul tuo sito sia i temi che hai contrassegnato come selezionabili dall’utente, verranno mostrati qui:
Tuttavia, solo il tema predefinito avrà la spunta verde.
Ora, proviamo a rendere il tema Rosso selezionabile dall’utente, ad esempio.
Tutto ciò che devi fare è cliccarci sopra e spuntare la casella che dice “Il tema può essere selezionato dagli utenti”.
Fatto! Noterai che viene automaticamente spostato dall’elenco dei temi inattivi all’elenco dei temi attivi.
e i tuoi utenti potranno selezionare qualsiasi tema preferiscano andando a
your.site.com/my/preferences/interface
Creare nuovi temi e componenti tema
Per creare un nuovo tema o componente tema, clicca su uno dei due pulsanti “Install”.
A questo punto apparirà una finestra di dialogo. Seleziona l’opzione “Create new” (Crea nuovo) nel menu a sinistra. Dovrai fornire un nome per ciò che vuoi creare e decidere se si tratta di un tema o di un componente tema.
Abbiamo in parte coperto i fondamenti di cosa siano i temi e i componenti tema. Se ricordi, un componente tema è solitamente focalizzato sulla modifica di un’area di Discourse. Mentre un tema generalmente copre diverse cose. Dovresti anche notare che un tema può avere qualsiasi numero di componenti tema sotto di sé, mentre un componente tema non può. Non preoccuparti troppo di questo per ora, una spiegazione più dettagliata di questa relazione seguirà più avanti.
Ora, supponiamo che tu abbia deciso il nome e abbia deciso di renderlo un tema. Beh, una volta premuto il pulsante “Create” (Crea), il tema verrà creato e sarai quindi in grado di:
- Modificare il nome del tema / componente tema
- Impostare o modificare uno schema di colore per il tema
- Aggiungere HTML / CSS / JS al tema / componente tema
- Aggiungere file o upload al tema
- Aggiungere componenti figli al tuo tema
Le personalizzazioni specifiche esulano dall’ambito di questa guida, quindi mi fermo qui per questo punto.
L’interfaccia per aggiungere HTML / CSS / JS appare così (una volta cliccato su #3 sopra)
Importare nuovi temi e componenti tema
Abbiamo già una guida su come importare i temi, ma la includo qui poiché questa guida dovrebbe coprire tutti i fondamenti.
Per importare un tema o un componente tema, clicca su uno dei due pulsanti “Install”.
La sezione “Popular” (Popolari) ti permetterà di visualizzare un’anteprima/installare da un elenco dei nostri temi e componenti più popolari.
Puoi anche importare file di tema dal tuo dispositivo o tramite il link del repository del tema. Il link del repository per ciascun tema è fornito dall’autore nella discussione del tema. Una volta importato un tema, si applicano tutte le cose discusse in precedenza. Puoi impostarlo come predefinito, renderlo selezionabile dall’utente e così via.
Se importi un componente tema, puoi anche aggiungerlo a uno dei tuoi temi. Questo viene trattato in dettaglio nella sezione successiva.
Aggiungere componenti tema a un tema
Supponiamo che ti piaccia il componente tema “Discourse category banners” e che tu voglia usarlo. Procederesti come segue:
- importa il tema dal repository come discusso sopra
- aggiungilo come componente tema ai tuoi temi attivi / selezionabili dall’utente
Puoi farlo in questo modo:
Dopo aver importato il componente, vai al tema a cui vuoi aggiungerlo e cerca la sezione “Included components” (Componenti inclusi).
Questo elenco mostrerà tutti i componenti tema installati. Da lì puoi aggiungere componenti tema al tema. L’aggiunta del componente tema Versatile Banner apparirebbe così:
Un’opzione simile, “Include component on these themes” (Includi componente su questi temi), esiste nella pagina di un singolo componente. Questo ti permette di aggiungere un componente a più temi contemporaneamente.
Quasi finito. I banner delle categorie di Discourse sono ora un componente attivo del tema predefinito. Se vuoi anche che venga aggiunto al tema Scuro, dovrai ripetere il processo di aggiunta del componente tema per il tema Scuro.
Se hai impostato il tema Scuro come selezionabile dall’utente e hai aggiunto anche il componente tema “Discourse category banners” ad esso, gli utenti che selezionano il tema Scuro come tema attivo riceveranno anche il componente tema “Discourse category banners”, poiché è un “child-theme” (tema figlio) del tema Scuro.
Puoi avere un numero illimitato di componenti tema sotto un tema e, come abbiamo discusso in precedenza, sono solitamente compatibili tra loro. Quindi puoi fare qualcosa del genere:
e tutti quei componenti sarebbero attivi sul tema predefinito contemporaneamente.
Modificare gli schemi di colore
Uno schema di colore è una palette di colori che scegli per generare il colore degli elementi in un tema. Non entrerò in molti dettagli qui, ma ti mostrerò come utilizzare gli schemi di colore.
Vai a your.site.com/admin/customize/colors e vedrai
Da qui puoi modificare gli schemi di colore o crearne di nuovi. Per modificare uno schema di colore, clicca su di esso e cambia i colori a tuo piacimento.
Per creare un nuovo schema di colore clicca qui.
Una volta terminata la modifica dei colori, è il momento di impostare lo schema di colore come attivo nei tuoi temi attivi o selezionabili dall’utente. Per farlo, vai alla pagina del tema e guarda qui.
Impostazioni del tema
I temi di Discourse possono avere delle impostazioni. Queste impostazioni sono progettate per essere un modo semplice per configurare un tema o un componente tema in base alle tue esigenze. Ad esempio, il tema Discourse Button Styles ha alcune impostazioni che permettono una facile personalizzazione dell’aspetto dei pulsanti semplicemente modificando alcuni valori a tuo piacimento.
Non tutti i temi / componenti tema hanno impostazioni, ma per quelli che le hanno, appariranno sempre qui. Le impostazioni di solito includono istruzioni fornite dall’autore che ti aiutano a determinare quali modifiche devono essere apportate.
Anteprima di un tema
A volte è necessario vedere come appare un tema sul tuo sito prima di applicarlo. Discourse offre un modo semplice per anteprimare i temi senza impostarli come attivi.
Mentre sei nella pagina di un tema, clicca qui.
e si aprirà una nuova scheda con un’anteprima dal vivo di come apparirebbe il tema sul tuo sito. Puoi navigare tra le diverse pagine e vedere come appare tutto.
la parte migliore dell’anteprima di un tema è che puoi testare le modifiche dal vivo senza causare problemi al tuo sito nel caso in cui qualcosa vada storto.
Informazioni aggiuntive
Modalità sicura (Safe-mode)
Discourse ha un modo integrato per bypassare il tema attivo corrente nel caso in cui le cose vadano storte. Ad esempio, un errore JavaScript nel codice di un componente potrebbe impedire al tuo sito di funzionare correttamente. Per bypassare il tema attivo corrente, visita semplicemente
your.site.com/safe-mode
A quel punto vedrai
da lì puoi disabilitare il tema attivo corrente, navigare verso la pagina del tema e risolvere il problema o disabilitare definitivamente il tema.
Ottenere nuovi temi
Il modo più diretto per trovare nuovi temi e componenti tema è controllare la categoria Customization > Theme qui su Meta.
Letture ulteriori
Designer's Guide to getting started with themes in Discourse
Developing Discourse Themes & Theme Components
Using Safe Mode to troubleshoot issues with themes and plugins
Structure of themes and theme components
Create and share a font theme component
Create and share a color scheme
Use Discourse Core Variables in your Theme
Add settings to your Discourse theme
Theme Creator, create and show themes without installing Discourse!
Se hai domande, non esitare a chiedere.