Questo è un corso intensivo sui concetti base dei temi Discourse. Il pubblico target è chiunque non sia familiare con i temi Discourse. Se hai già usato temi Discourse / componenti tema, probabilmente questa guida non è qualcosa che devi leggere.
Cosa sono i temi e i componenti tema?
Un tema o componente tema è un insieme di file raggruppati insieme progettati per modificare Discourse visivamente o per aggiungere nuove funzionalità.
Iniziamo con i temi.
Temi
In generale, i temi non sono compatibili tra loro perché sono essenzialmente design autonomi diversi. Pensa ai temi come a skin, o come ai launcher su Android. Puoi avere più launcher installati ma non puoi usarne due contemporaneamente. La tua installazione predefinita di Discourse include due temi: Foundation e Horizon.
Foundation è un aspetto Discourse pulito e classico, mentre Horizon offre un design più moderno con diverse palette di colori tra cui scegliere (come Horizon, Royal, Clover, Lily, Violet e Marigold — ciascuno con varianti chiare e scure).
Foundation
e Horizon
Supponiamo che questo non sia sufficiente per te e tu voglia DI PIÙ. Beh, puoi installare temi aggiuntivi abbastanza facilmente. Ecco alcuni esempi di temi gratuiti disponibili qui su Meta.
Design “minimale” della lista argomenti personale di Sam
Come puoi vedere, il tuo sito può apparire drasticamente diverso in base al tema che selezioni; tuttavia, non è finita qui. Oltre ai temi, Discourse supporta anche i componenti tema.
Componenti Tema
Usiamo la frase componente tema per descrivere pacchetti più orientati alla personalizzazione di un aspetto di Discourse. A causa del loro focus ristretto, i componenti tema sono quasi sempre compatibili tra loro. Questo significa che puoi avere più componenti tema attivi 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 della tua categoria esistente, inclusi nome, descrizione e colore e genera un banner in cima alle pagine della categoria pertinente.
Componente tema intestazione brand
Questo componente tema aggiunge un’intestazione extra in alto per il branding con il tuo logo, link di navigazione e icone social per sia la vista mobile che desktop. Il logo del brand può essere un’immagine o testo.
Come puoi vedere, i componenti tema hanno un focus molto più ristretto. Come tali, sono compatibili tra loro nella maggior parte dei casi. Ora hai un’idea generale di cosa sono i temi Discourse e i componenti tema. Approfondiamo un po’.
Interfaccia Temi Discourse
Diamo un’occhiata all’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 diverse cose qui:
- Impostare il tema attivo predefinito
- Scegliere quali temi rendere disponibili ai tuoi utenti
- Creare nuovi temi e componenti tema
- Importare nuovi temi e componenti tema
- Aggiungere componenti tema a un tema
- Modificare le palette di colori
- Cambiare le impostazioni del tema
- Anteprima di un tema
Esaminiamoli uno per uno.
Impostare il tema attivo predefinito
Puoi vedere un badge che indica che un tema è impostato come predefinito:
Ora cambiamo il tema attivo in Horizon. Puoi farlo dal pulsante menu … o cliccando sul nome del tema e selezionando la casella di controllo nella pagina delle impostazioni:
Il tema attivo sul tuo sito sarà impostato su Horizon. Questo significa che chiunque visiti il tuo sito vedrà questo:
Scegliere quali temi rendere disponibili ai tuoi utenti
È bello poter impostare un tema per il tuo sito, ma sai cosa è ancora meglio? Lasciare che siano i tuoi utenti a decidere. Discourse ti permette di offrire diversi temi ai tuoi utenti permettendo loro di impostare il tema in base alle loro preferenze. La loro scelta è limitata al proprio account e non influenzerà la tua scelta di tema attivo o le scelte degli altri utenti.
Ad esempio, puoi impostare il tema attivo sul tema predefinito (Horizon) ma offrire il tema Foundation come opzione. Proviamo a farlo ora nell’interfaccia dei temi.
Tutto ciò che devi fare è cliccare sul pulsante menu …, e poi selezionare “Consenti agli utenti di selezionare”
Ecco fatto! ora avrà un badge “selezionabile dall’utente”
e i tuoi utenti potranno selezionare qualsiasi tema preferiscano andando su
your.site.com/my/preferences/interface
Creare nuovi temi e componenti tema
Per creare un nuovo tema o componente tema, clicca il pulsante “Installa”
Otterrai quindi una finestra di dialogo. Seleziona l’opzione “Crea nuovo” nel menu. Dovrai fornire un nome per ciò che vuoi creare e decidere se è un tema o un componente tema.
Abbiamo coperto le basi di cosa sono 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 esso, mentre un componente tema non può. Non preoccuparti di questo per ora, una spiegazione più dettagliata di questa relazione seguirà più tardi.
Ora, supponiamo che tu abbia deciso il nome e deciso di renderlo un tema. Beh, una volta premuto il pulsante “Crea”, il tema sarà creato e potrai quindi
- Cambiare il nome del tema / componente tema
- Impostare o cambiare una palette di colori per il tema
- Aggiungere componenti figlio al tuo tema
- Aggiungere html / css / js al tema / componente tema
- Aggiungere file o upload al tema
Le personalizzazioni specifiche sono al di fuori dell’ambito di questa guida e quindi mi fermerò qui per questo punto.
L’interfaccia per aggiungere html / css / js appare così (una volta cliccato su #4 sopra)
Importare nuovi temi e componenti tema
Abbiamo già una guida su come importare temi, ma sto includendo come farlo qui poiché questa guida dovrebbe coprire tutte le basi.
Per importare un tema o componente tema, il pulsante “Installa”
La sezione “Popolari” ti permetterà di anteprima/installare da una lista dei nostri temi e componenti più popolari.
Puoi anche importare file tema dal tuo dispositivo o tramite il link del repository del tema. Il link del repository per ogni tema è fornito dall’autore nell’argomento del tema. Una volta importato un tema, tutte le cose di cui abbiamo parlato prima si applicheranno ad esso. Puoi impostarlo come predefinito, renderlo selezionabile dall’utente e così via.
Se importi un componente tema, puoi anche aggiungerlo a qualsiasi dei tuoi temi. Questo è trattato in dettaglio nella prossima sezione
Aggiungere componenti tema a un tema
Supponiamo che ti piaccia il componente tema banner categorie Discourse e tu voglia usarlo. Procederesti come segue
- importa il tema dal repository come discusso sopra
- aggiungilo come componente tema ai tuoi temi attivi / selezionabili dagli utenti
Puoi farlo così:
Dopo aver importato il componente, vai al tema a cui vuoi aggiungerlo e cerca la sezione “Componenti inclusi”
Questo elenco mostrerà tutti i componenti tema installati. Da lì puoi aggiungere componenti tema al tema. Aggiungere il componente Homepage Feature apparirebbe così
Esiste un’opzione simile, “Includi componente su questi temi”, dalla pagina di un singolo componente. Questo ti permette di aggiungere un componente a più temi contemporaneamente
Questo è praticamente tutto. Homepage Feature è ora un componente attivo del tema predefinito. Se vuoi anche che sia aggiunto a un altro tema, dovrai ripetere il processo di aggiunta del componente tema.
Se hai impostato il tema Foundation come selezionabile dall’utente e aggiunto il componente tema Homepage Feature anche ad esso, gli utenti che selezionano il tema Foundation come tema attivo otterranno anche il componente tema Homepage Feature poiché è un “sotto-tema” del tema Foundation.
Puoi avere un numero illimitato di componenti tema sotto un tema e come discusso prima, sono solitamente compatibili tra loro. Quindi puoi fare qualcosa del genere:
E tutti quei componenti sarebbero attivi sul tema contemporaneamente.
Modificare le palette di colori
Una palette di colori è una serie di colori che scegli per generare il colore degli elementi in un tema. Non entrerò in molti dettagli qui ma ti mostrerò come usare le palette di colori.
Vai su your.site.com/admin/config/colors e vedrai
Da qui puoi modificare le palette di colori o crearne di nuove. Per modificare una palette di colori, clicca su di essa e cambia i colori a tuo piacimento
Per creare una nuova palette di colori clicca qui
Una volta terminato di cambiare i colori, è ora di impostare la palette di colori come attiva nei tuoi temi attivi o selezionabili dagli utenti. Per farlo, vai alla pagina del tema e guarda qui
Impostazioni tema
I temi Discourse possono avere impostazioni. Queste impostazioni sono progettate per essere un modo facile per te di configurare un tema o componente tema in base alle tue esigenze. Ad esempio il componente tema Homepage Feature ha alcune impostazioni per permettere il controllo di quali argomenti sono in evidenza:
Non tutti i temi / componenti tema hanno impostazioni ma per quelli che le hanno, appariranno sempre qui. Le impostazioni includeranno solitamente istruzioni fornite dall’autore che ti aiutano a determinare quali modifiche devono essere apportate.
Anteprima di un tema
A volte hai bisogno di vedere come appare un tema sul tuo sito prima di applicarlo. Discourse offre un modo facile per anteprima i temi senza impostarli come attivi.
Mentre sei sulla pagina di un tema, clicca qui
e si aprirà una nuova scheda con un’anteprima live di come apparirebbe il tema sul tuo sito. Puoi navigare tra diverse pagine e vedere come appare tutto. La cosa migliore dell’anteprima di un tema è che puoi testare le modifiche in tempo reale senza causare problemi sul tuo sito nel caso qualcosa vada storto.
Informazioni aggiuntive
Modalità sicura
Discourse ha un modo integrato per bypassare il tema attivo corrente nel caso qualcosa vada storto. Ad esempio, un errore javascript nel codice di un componente potrebbe causare il malfunzionamento del tuo sito. Per bypassare il tema attivo corrente visita semplicemente
your.site.com/safe-mode
Vedrai quindi
da lì puoi disabilitare il tema attivo corrente, navigare alla pagina del tema e correggere il problema o disabilitare il tema definitivamente.
Ottenere nuovi temi
Il modo più diretto per trovare nuovi temi e componenti tema è controllare la categoria Customization > Theme qui su Meta.
Approfondimenti
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.