Esiste una "mappa" di tematiche? (Un modo semplice per trovare plugin-outlet, ecc.)

Ho letto le eccellenti guide sui componenti per plugin e temi, ma sono ancora un po’ bloccato su come trovare rapidamente i template, i componenti, i widget o i plugin-outlet di cui ho bisogno.

Ho pensato di iniziare con 3 modifiche semplici: se qualcuno può indicarmi la strada giusta, mi sarebbe di grande aiuto :blush:

Quale template, componente o plugin-outlet devo modificare per apportare queste modifiche?

  1. I tag nell’ dell’HTML della pagina “Mostra argomento” (quindi quando si visualizza un argomento). La modifica deve essere visibile sia ai bot che agli esseri umani.
  2. Il markup delle caselle delle categorie ovunque vengano visualizzate. (Queste: AdminCP > impostazioni > stile categoria.)
  3. Pagina “Chi siamo” (dove modificare i contenuti nei blocchi Amministratore e Moderatore)

Quando si lavora con il tema su altri software per forum, di solito esiste un file “genitore” che contiene i riferimenti a tutto ciò che compone quella pagina, rendendo facile trovare rapidamente i template da modificare. Ad esempio, ci sarebbe un file/template forumdisplay (visualizza categoria in Discourse) che contiene l’HTML principale e fa riferimento a tutti gli altri template. Un altro per la pagina showthread (quindi la pagina Mostra/Visualizza argomento in Discourse), un altro per la pagina del profilo membro, ecc. Questi agirebbero come un elenco o una mappa che indica dove trovare ciò di cui si ha bisogno. Quindi, se volessi modificare, ad esempio, il markup sottostante dei post, andresti al file o template showthread (cioè visualizza argomento) e, guardandoci dentro, noteresti che devi modificare o cercare nel template postbit.

Abbiamo qualcosa di simile? Se no, il team potrebbe prendere in considerazione l’idea di aggiungere qualcosa di analogo? Sarebbe di enorme aiuto :slight_smile:

L’ho visto (scusa, avrei dovuto menzionarlo!) ed è molto utile per le uscite dei plugin visibili, ma cosa si può fare per template, componenti, widget, ecc.? Come fai a trovarli rapidamente e facilmente, Robert? Hai idea di dove si trovano quelli menzionati nel primo post?

Il mio consiglio è sempre di iniziare in modo semplice. Lavora prima su un requisito semplice e capisci come realizzarlo. Poi passa al successivo.

Per quanto riguarda i temi, direi che la maggior parte delle modifiche riguarderà il CSS. Usa le risorse usuali. Dove non è possibile, dovrai valutare la modifica dei template con jQuery o, come ultima risorsa, la sovrascrittura dei template. Crea i tuoi componenti o widget per casi d’uso innovativi e collegali.

Il codice sorgente è sempre il tuo migliore amico: esplora la struttura delle directory su GitHub per discourse/discourse e troverai le diverse parti dell’applicazione organizzate. I template sono, a mio avviso, la parte più facile da comprendere. Se non hai familiarità con la struttura delle directory di Ember, questo è il momento giusto per familiarizzarci.

Sì, assolutamente. Costruisco temi da quasi quanto esiste Discourse, e faccio costantemente riferimento al codice sorgente in una finestra separata.

In genere, per i template, devi guardare qui: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

mentre per i widget qui: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets.

A volte non è immediatamente chiaro dove si trovi un template, magari perché è un componente annidato all’interno di un altro template… se non riesco a ricordarmi, quello che faccio alla fine è cercare nel sorgente un pezzo specifico di markup…

Quindi, ad esempio, se sto cercando di aggiungere qualcosa alla pagina “About”… posso vedere che il corpo della pagina About ha una classe unica about-page, quindi inizierò a cercare about e body-page (che è un’altra classe presente nella pagina).

Per rispondere ad alcune delle tue domande:

Penso che questo richieda un plugin, il che esula dalle mie competenze… forse qualcun altro potrà essere più d’aiuto.

Ci sono template diversi per i diversi layout di pagina, ma supponendo che tu stia parlando di uno dei layout “Caselle con…”

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

Grazie per le risposte a entrambi :slight_smile:

È esattamente quello che credevo di fare (non penso si possa essere molto più semplici che modificare i tag del titolo). Su altri software per forum, aprirei semplicemente il file o il template della pagina ‘showthread’ e lo modificherei: ci vorrebbe letteralmente meno di un minuto. Mi piacerebbe che la personalizzazione dei temi su Discourse fosse altrettanto semplice (anche se è possibile che la mia attuale scarsa familiarità con la personalizzazione dei temi su Discourse sia la ragione per cui mi sento disorientato).

È esattamente ciò che credo di aver bisogno per tutti gli elementi del primo post, poiché devono modificare contenuti esistenti (anziché aggiungere o premettere in un punto specifico, per cui sembrano essere pensati i plugin-outlet).

Penso che questa sia probabilmente la questione qui. Non conosco Ember e forse è proprio questo che rende tutto un po’ estraneo. Mi piacerebbe molto avere qualcosa come (deprecated) Plugin outlet locations theme component ma per i template e tutto il resto che può essere personalizzato: sarebbe di enorme aiuto.

Ma come trovi ciò che ti serve, Kris?

Ah, grazie, è davvero un ottimo consiglio!

Sei sicuro, Kris? Pensavo che i plugin (o i plugin-outlet) permettessero solo di aggiungere qualcosa nel punto di quel particolare outlet. Mentre per cambiare il formato del tag del titolo, probabilmente dovrei aprire il template esistente (o il componente o il widget) e copiarlo/modificarlo. Almeno è questa la mia comprensione dopo aver letto le due guide sui plugin e sulla personalizzazione dei temi.

Grazie! Sembra proprio quello che mi serve :smiley:

Grazie ancora, haha! Entrambi sembrano relativamente facili da trovare ora, dato il loro nome e il fatto che li hai indicizzati tu. Penso che il fatto di essere rimasto bloccato nel cambiare i tag del titolo possa essere stato un fattore :relaxed:

Al momento ho la sensazione che mi stia sfuggire qualcosa e, come ha sottolineato @merefield, potrebbe essere la mia scarsa familiarità con Ember. Qualcuno conosce video su YouTube che spiegano rapidamente come usarlo? Forse tu o @merefield potreste farne uno? :blush:

Ember vale davvero la pena di essere appreso. È molto potente, estensibile e veloce.

Leggere questo ti aiuterà a dare più senso al codice sorgente:

Approfondisci Template, Proprietà Calcolate, Router e Componenti.

Discourse non è esattamente come un’app Ember vanilla, ma le guide sono comunque di grande aiuto.

Un ultimo consiglio IMPORTANTE: individua un plugin esistente (buono) che realizzi qualcosa di simile a ciò che vuoi ottenere. Esamina il codice e copia l’approccio.

Grazie, Robert! Dice che quella versione delle guide è obsoleta: sta usando Discourse quella versione o dovrei leggere le ultime, le guide 3.15?

Leggi la versione 3.10 per ora. È quella attualmente utilizzata da Discourse. Se apri la console JavaScript, vedrai la versione di Ember e jQuery in esecuzione su un’istanza.

Tieni inoltre presente che esistono vari ‘stili’ di decorazione del codice. Pertanto, le cose nel codice sorgente possono talvolta variare leggermente.

Purtroppo non è quello :–(

Ho anche provato questi:

Ho creato un componente del tema e ho aggiunto quanto segue:

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

Ma cambiare il data-template-name con tutti quelli elencati non ha alcun effetto. (Quando lo cambio per components/topic-list funziona.)

Avete qualche idea su dove si trovi questo template?

Questo è ciò che vorrei modificare (ma quando viene mostrato il formato box, da: AdminCP > impostazioni > stile categoria):

Qualsiasi aiuto è molto apprezzato.

Sembra quindi che questo non sia possibile con i componenti del tema, dato che non sembrano esserci template o componenti per questo :sob:

Sembra che questo modulo Ruby stia iniettando stili inline: discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

Era previsto che fosse una misura temporanea? In caso contrario, pensi che sarebbe possibile consentirci di specificare stili personalizzati, per favore @sam?

Potrebbe essere collegato all’opzione esistente none, dove potremmo avere due campi nel pannello delle impostazioni di amministrazione in cui incollare i nostri stili per ciascuno (se non vengono incollati stili, si comporta semplicemente come fa ora l’opzione none):

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

e

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="Una categoria esclusiva per i membri con livello di fiducia 3 o superiore."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Lounge</span></span>

Da questo frammento:

Avremmo solo bisogno di accedere alle variabili del colore di sfondo e del colore del testo dalla solita pagina di modifica della categoria.

Oppure esiste un altro modo per modificare questo, Sam? Voglio solo rimuovere il colore di sfondo e assegnargli un bordo dello stesso colore del testo (come specificato nella solita pagina di modifica della categoria).

Qualsiasi aiuto sarebbe molto apprezzato.

Modifica: sembra che non sia quel file Ruby dopo tutto (l’ho modificato nella mia installazione di sviluppo ma non è cambiato nulla)… un’ulteriore indagine e sembra che sia questo: discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub c’è un modo per creare un plugin per modificarlo?

Probabilmente ci sono diversi modi per farlo.

Prova così:

  • sovrascrivi il template che chiama quel helper
  • sostituiscilo con un helper tuo

Template in questione: discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

Sovrascrivere un template così basso nella gerarchia comporta rischi relativamente bassi.

Un altro modo potrebbe essere usare jQuery all’interno di una sovrascrittura del componente topic-list-item per eseguire le modifiche di cui hai bisogno.