Essendo nuovo di Discourse, sto cercando di capire cosa è possibile personalizzare e come. So che sono disponibili diversi temi e componenti di tema, e capisco anche che, in teoria, posso modificare HTML, CSS e JavaScript andando su admin -> personalizza -> Temi -> [clicca sul tema selezionato] -> modifica CSS/HTML.
Sto cercando di capire come utilizzare la dashboard che appare quando si prova a “modificare CSS/HTML”. Mostra <head> Header After Header <body> Footer CSS incorporato.
Esiste una guida con esempi su come modificare effettivamente l’HTML? Capisco che su Meta ci siano dei suggerimenti, ma per quanto posso vedere sono sparsi tra vari argomenti del forum.
Come esempio di qualcosa che mi crea confusione: questo post chiede se sia possibile cambiare l’ordine delle colonne nell’elenco degli argomenti, il che sembrerebbe una modifica HTML abbastanza basilare. Ma la risposta è, in sostanza, no, non è possibile senza intervenire con override complessi.
Quindi sto cercando di capire cosa posso fare con quella funzione “modifica CSS/HTML” per personalizzare il mio forum.
Grazie. L’avevo già visto, ma mi sono tirato indietro perché sembrava che l’obiettivo principale fosse creare un tema, non semplicemente modificare il mio unico forum.
Vedo che ci sono alcune indicazioni su come utilizzare la dashboard “Modifica CSS/HTML”. Ma, per conferma, posso modificare HTML, CSS e JS senza creare un nuovo tema, giusto?
Inoltre, non è chiaro dove o come posso spostare i componenti, non solo aggiungerli o rimuoverli (ad esempio, cambiando l’ordine delle colonne in modo che il gruppo utenti appaia come la colonna più a sinistra nella pagina).
Ti consiglio vivamente di consultare anche quella guida; non farti scoraggiare dalla parte relativa ai temi, poiché approfondisce diversi aspetti della personalizzazione che troverai utili.
Il link fornito da Simon spiega tutto, ma è piuttosto lungo da leggere.
In sostanza, se vuoi modificare l’HTML di Discourse, puoi farlo in diversi modi:
Attraverso alcune schede HTML predefinite nel tuo tema o componente: Header, After Header, </body>, Footer.
Indirizzando uno spazio HTML “libero” (outlet) che puoi riempire con il tuo HTML. Questo può essere fatto tramite un tag <script> che puoi aggiungere nella scheda <head>.
Ecco un esempio degli outlet disponibili nella visualizzazione di un argomento:
Sovrascrivendo un modello HTML esistente. I modelli a volte contengono molto codice HTML e dovrai copiare e incollare tutto per apportare le tue modifiche. Anche questo può essere fatto in un tag <script> aggiunto nel tuo <head>.
Creare un tema, un componente del tema o “semplicemente modificare il mio singolo forum” è in realtà quasi la stessa cosa qui. I tre vengono realizzati più o meno nello stesso modo.
Sì, dipende da cosa vuoi fare esattamente, ma solitamente il modo corretto è creare un nuovo componente del tema e scrivere qui l’HTML/CSS.
Grazie per queste utili informazioni. Riesco a capire come aggiungere HTML a uno spazio aperto e anche come nascondere HTML esistente con il CSS (ad esempio, impostando display: none sulla classe div pertinente, che presumo si possa individuare semplicemente usando l’ispettore).
Ma come si potrebbe sovrascrivere l’HTML, ad esempio spostando un componente? Avresti un breve esempio?
Sto citando parzialmente il link incollato da simon:
Breve esempio di riempimento di un outlet con un grande quadrato rosso; qui l’outlet è posizionato sopra l’elenco dei post in una visualizzazione di argomento:
Breve esempio di sovrascrittura del template della barra di navigazione:
<script type="text/x-handlebars" data-template-name="components/navigation-bar">
{{#each navItems as |navItem|}}
{{navigation-item content=navItem filterMode=filterMode category=category}}
{{/each}}
<div style="background: red; padding: 10px; float: left;">Ho aggiunto questo blocco nel template della barra di navigazione</div>
{{custom-html name="extraNavItem" tagName="li"}}
{{!- questo viene fatto per evitare un DIV all'interno di un UL, originariamente {{plugin-outlet name="extra-nav-item"}}
{{#each connectors as |c|}}
{{plugin-connector connector=c class=c.classNames tagName="li" args=(hash category=category filterMode=filterMode)}}
{{/each}}
</script>
Ok. Ora sto iniziando a capire. Questo è davvero utile.
1. Da dove proviene: type="text/x-handlebars" data-template-name="/connectors/topic-above-post-stream/a-unique-name? (cioè, come faccio a sapere cosa inserire lì)?
E con l’esempio di codice che hai fornito per sovrascrivere un template, comincio a vedere come sia possibile, perché posso prendere il codice del template, spostarlo, cancellarlo, aggiungerne altro, ecc.
2. Quindi ottengo il codice del template dal link GitHub che hai fornito? Se è così, ha senso, ma sembra difficile trovare il codice giusto. Ad esempio, qual è il template per la home page?
3. Poi incollare quel codice pertinente nella dashboard “modifica css/html”. Ma dove, sotto la prima opzione (<head>)? Lo suppongo dalla tua risposta precedente, ma sarebbe utile avere una conferma.
Spero che tutto questo possa essere utile anche ad altri.
Per trovare il nome e la posizione di un outlet, penso che il modo migliore sia il plugin che ho linkato sopra.
Per trovare il template corrispondente alla parte della pagina che vuoi modificare… è un po’ più complicato.
Non conosco un metodo semplice. Sarebbe ottimo avere un plugin simile.
A volte, guardo l’HTML della pagina per individuare un pezzo di codice (ad esempio una classe CSS) che ritengo unico, e poi cerco tra tutti i file dei template. Ho clonato il repository di Discourse sul mio computer di casa e cerco tra tutti questi file usando Sublime Text, ma sono sicuro che esistano altri modi migliori per farlo.
A volte esamino il codice di componenti di tema esistenti che modificano le posizioni della pagina che anch’io vorrei personalizzare.
Sì, è difficile, ma non sono un esperto e immagino che ci siano modi più efficienti per farlo!
Sì.
Se provieni da Wordpress o phpBB e sei abituato a modificare direttamente i file dei template in quella o quell’altra directory, Discourse potrebbe sembrare criptico…
