Canvas fornisce un modello flessibile che ti consente di creare temi personalizzati con meno codice. Regola facilmente proprietà e valori di configurazione per adattare un tema alle tue esigenze.
Esempi di viste
Il modello di base mantiene i valori predefiniti e rimane neutro nel design.
Sincronizza il tema con la tua istanza Discourse utilizzando la gemma discourse_theme.
Vai al backend di amministrazione e regola manualmente queste impostazioni del componente tema: Banner di categoria
Plugin outlet → above-main-container Banner di tag
Mostra sotto l’intestazione del sito → deseleziona
Mostra sopra il contenitore principale → seleziona
Modifica scss/properties.scss per definire i valori delle proprietà personalizzate
Modifica about.json per aggiungere asset, schemi di colori e altri componenti del tema
Uno sguardo più da vicino alla configurazione
Il modello Canvas Theme estende solo lo scheletro del tema predefinito raggruppando alcuni componenti del tema e aggiungendo alcuni file di stile pronti all’uso. Le funzionalità effettive sono gestite da un componente tema separato Canvas Settings. Questo componente svolge due funzioni:
Assegna proprietà personalizzate che possono essere utilizzate con il modello. Una tabella che elenca tutte le proprietà si trova nel file Readme del modello.
Questa configurazione divisa ti consente di creare un tema utilizzando il modello Canvas, beneficiando comunque delle correzioni e degli aggiornamenti continui forniti tramite il componente.
Esempi di temi
Puoi rivedere il codice delle viste di esempio condivise o installarle come tema di avvio da questi repository:
Le impostazioni sono sul componente tema installato come Impostazioni Canvas. Potrebbe essere un po’ fuorviante che le impostazioni siano sempre chiamate Impostazioni Tema nell’interfaccia utente, anche sui componenti tema.
Anche il banner della categoria viene mostrato nello stesso posto, sopra la barra laterale. Gli argomenti più recenti e gli argomenti più popolari sono mostrati correttamente nella colonna principale.
Suppongo che non sia un obiettivo del tema coprire completamente l’interfaccia di amministrazione, tuttavia, le palette di colori chiare e scure dell’Editor fanno apparire la barra laterale di amministrazione in modo piuttosto diverso. Sono curioso di sapere se è possibile armonizzarla con la barra laterale non di amministrazione.
Il tema è pensato per mostrare banner accanto alla barra laterale, utilizzando l’outlet above-main-container. Il componente Extra-Banners utilizza quell’outlet per impostazione predefinita, ma i due componenti per i banner di Categoria e Tag vengono visualizzati per impostazione predefinita sotto l’intestazione. Non vorrei creare una fork di questi componenti solo per impostare un outlet predefinito diverso. Ecco perché ho inserito queste istruzioni:
Ma se fosse facile da trascurare, forse c’è un modo migliore per dirlo?
Sì, è abbastanza facile e sembra un buon approccio per questo tema. Ho appena aggiunto un commit!
Ah sì, capisco come siamo arrivati fin qui. Non vogliamo necessariamente modificare le impostazioni predefinite nei componenti delle banner di categoria/tag, né volerli forkare. È difficile da sistemare, lasciamo tutto com’è per ora e vediamo se anche altri riscontrano lo stesso problema.
Il cambiamento nella barra laterale dell’amministratore sembra già buono, grazie!
Queste istruzioni potrebbero essere elaborate un po’? Non è possibile installare semplicemente dall’interfaccia utente di amministrazione? Grazie
MODIFICA: Ho installato tramite l’interfaccia utente di amministrazione e sembra funzionare, tranne per il fatto che non sembra esserci più alcun posto dove modificare scss.
MODIFICA: lascia perdere, vedo che probabilmente è previsto e stai mostrando di modificare direttamente i file del tema. Mi chiedo se questo possa essere nella roadmap per accadere tramite l’interfaccia utente di amministrazione? Ad esempio, avere un editor di variabili come hai un editor di impostazioni.
Non so cosa ci sia nella roadmap principale, ma una cosa che potresti fare subito è creare un nuovo componente tematico direttamente nell’interfaccia di amministrazione:
E poi dichiarare proprietà personalizzate nel suo file CSS. Potresti cercare le proprietà nel file Readme. Oppure copiare il contenuto di properties.scss dal repository del tema.
Tuttavia, se desideri essere in grado di sincronizzare le modifiche, credo che dovresti eseguire il pull su un clone locale e quindi eseguire il push da esso. Qualcosa del genere:
Non vedo un’opzione “+” su mobile su GitHub. Potrebbe essere necessario provare le righe di comando quando si è a casa.
Tutto ciò che vedo su GitHub nella dashboard è l’opzione per creare un nuovo repository, ma nessuna opzione di “claim”. Sono su un account gratuito, quindi non sono sicuro che ciò possa avere a che fare con questo.
È limitato rispetto alla dichiarazione di variabili personalizzate nel foglio di stile. Ma ti permette di sperimentare con alcuni look diversi. Sono curioso di sapere se funziona!
Ho appena modificato gli stili CSS per la barra laterale fissa, lo scorrimento dovrebbe funzionare di nuovo!
Tuttavia, la barra laterale fissa è solo una delle opzioni nel componente Stili che ho menzionato nel post precedente. Se desideri regolare altri stili (come la spaziatura del menu della barra laterale), dovrai seguire l’approccio spiegato sopra in Utilizzo e Uno sguardo più da vicino alla configurazione: usa il tuo foglio di stile con proprietà CSS personalizzate, in questo caso sarebbe -d-sidebar-row-height.
Ho messo insieme un nuovo tema di esempio basato su questo template. Come suggerisce il nome, questo è un omaggio al tema Central originale!
Mi è piaciuto il layout e lo stile visivo di Central e ho impacchettato alcune delle sue funzionalità in componenti standalone, come il Menu Utente Personalizzato e diversi blocchi della barra laterale.
Mi sono reso conto che con la barra laterale e alcuni stili, questo template ti porta effettivamente a un buon punto verso l’aspetto e la sensazione del tema originale.
In ogni caso, non ho intenzione di ricostruire completamente il tema Central… ma potrei ancora sperimentare con uno stile dedicato alla lista degli argomenti in futuro. Se sei curioso e vuoi dare un’occhiata, il tema è anche live qui: https://central.kostka.studio
Grazie per aver condiviso questo template! La flessibilità con i componenti e il design pulito lo rendono davvero facile da personalizzare. Non vedo l’ora di provarlo sulla mia istanza.
| Riepilogo | Avvia rapidamente la progettazione del tuo tema con un modello di tema preparato.
|Pubblico| Nuovi sviluppatori che desiderano iniziare a creare temi per Discourse. Sviluppatori esperti che desiderano utilizzare un modello pronto all’uso. |
|Repository| Manuel Kostka / Discourse / Canvas / Canvas Theme Template · GitLab |
|Guida all’installazione|Come installare un tema o un componente tema|
|Nuovo ai temi di Discourse?| Guida per principianti all’utilizzo dei temi di Discourse
Un enorme ringraziamento a Discourse per aver sponsorizzato lo sviluppo di questo progetto!
!