| | | |
|:information_source: | Riepilogo | Avvia rapidamente la progettazione del tuo tema con un modello di tema preparato.|
|:busts_in_silhouette: | Pubblico | Sviluppatori nuovi che desiderano iniziare a creare temi per Discourse. Sviluppatori esperti che desiderano utilizzare un modello pronto all’uso.|
|:hammer_and_wrench: | Repository | https://gitlab.com/manuelkostka/discourse/canvas/theme|
|:open_book: | Nuovo ai Temi di Discourse? | Guida per principianti all’uso dei temi di Discourse|
Canvas fornisce un modello flessibile che ti consente di creare temi personalizzati con meno codice. Modifica facilmente proprietà e valori di configurazione per adattare un tema alle tue esigenze.
Viste di esempio
Il modello di base mantiene i valori predefiniti e rimane neutro nel design.
Sincronizza il tema con la tua istanza di Discourse utilizzando la gem discourse_theme.
Vai al backend di amministrazione e regola manualmente queste impostazioni del componente tema: Category Banners
Plugin outlet → above-main-container Tag Banners
Show below site header → deseleziona
Show above main container → seleziona
Modifica scss/properties.scss per definire i valori per le proprietà personalizzate
Modifica about.json per aggiungere risorse, schemi di colori e altri componenti tema
Un’occhiata più da vicino alla configurazione
Il modello Canvas Theme estende solo lo scheletro del tema predefinito raggruppando alcuni componenti 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à è disponibile nel file Readme del modello.
Questa configurazione separata ti consente di creare un tema utilizzando il modello Canvas, pur beneficiando delle correzioni e degli aggiornamenti continui forniti tramite il componente.
Temi di esempio
Puoi visualizzare i temi di esempio condivisi su https://canvas.kostka.studio. C’è un interruttore del tema in fondo alla barra laterale per cambiare tema.
Rivedi il codice delle viste di esempio condivise o installale come tema iniziale 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 preparato un nuovo tema di esempio basato su questo modello. Come suggerisce il nome, questo è un omaggio al tema originale Central!
Ho amato il layout e lo stile visivo di Central e ho impacchettato alcune delle sue funzionalità in componenti autonomi, come il Menu Utente Personalizzato e diversi blocchi della barra laterale.
Mi sono reso conto che con la barra laterale e alcuni stili, questo modello ti avvicina molto all’aspetto e alla sensazione del tema originale.
In ogni caso, non ho intenzione di ricostruire completamente il tema Central… ma potrei ancora sperimentare con uno stile dedicato all’elenco degli argomenti in futuro. Se sei curioso e vuoi dare un’occhiata, il tema è attivo anche qui, selezionalo utilizzando l’interruttore del tema nella barra laterale: https://canvas.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.
Un enorme ringraziamento a Discourse per aver sponsorizzato lo sviluppo di questo progetto!
!