Ho esaminato questo precedente post di Kris e l’ho direttamente adattato a qualcosa che potresti utilizzare come base. Gran parte di ciò che viene trattato qui è stato esposto da lui nel suo argomento originale.
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Tutto il codice verrà aggiunto alla sezione </head> (head_tag.html) del tuo tema.
Questa prima sezione verificherà se la pagina in cui ti trovi è la “home page”.
Successivamente, otterremo le categorie del sito utilizzando il metodo Category.list() sulla classe Category.
Confronteremo quindi queste con le categorie che desideri in evidenza. Queste saranno posizionate nell’array definedFeaturedCategories definito nel codice sottostante. Quelle che consenti verranno impostate sul componente da passare a un template per il rendering.
<script type="text/discourse-plugin" version="0.8">
const Category = require("discourse/models/category").default;
// useremo il modello Category per recuperare le categorie del sito
api.registerConnectorClass('above-main-container', 'featured-categories', {
// above-main-container è l'uscita del plugin,
// featured-topics è il nome del tuo componente personalizzato
setupComponent(args, component) {
api.onPageChange((url, title) => {
console.log(url,title)
if ((url === "/") || (url === "/latest") ) {
// al cambio di pagina, controlla se l'URL corrisponde
// se la tua home page non è /latest, modifica questo in /categories
$('html').addClass('custom-featured-categories');
// aggiungi una classe al tag HTML per un facile targeting CSS
let definedFeaturedCategories = ["uncategorized","blog","two"]
// array delle categorie che desideri in evidenza
// assicurati di inserire i titoli delle categorie in minuscolo
let featuredCategories = [];
categories = Category.list();
for (let cat of categories) {
if (definedFeaturedCategories.includes(cat.name.toLowerCase())) {
// inserisce nell'array solo le categorie che desideri in evidenza per il rendering
featuredCategories.push(cat)
}
}
component.set('featuredCategories', featuredCategories)
} else {
// Se la pagina non corrisponde agli URL sopra, fai questo:
$('html').removeClass('custom-featured-categories');
// Rimuovi la nostra classe personalizzata
component.set('categories',[])
// imposta le categorie su un array vuoto per disabilitare il rendering
}
});
}
});
</script>
Questa prossima sezione inietta il template per il componente creato sopra nell’uscita del plugin above-main-container. Chiamerà il categories-wrapper personalizzato creato nel terzo passaggio e definirà categories come featuredCategories creato sopra.
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/featured-categories">
<div class="custom-featured-categories-wrapper">
{{categories-wrapper categories=featuredCategories}}
<!-- usa il template categories-wrapper creato sotto -->
<!-- definisci categories come featuredCategories creato nello script sopra -->
</div>
</script>
La terza sezione crea il template handlebars personalizzato categories-wrapper per il rendering delle categorie in evidenza. È direttamente adattato dal template categories-only.hbs di Discourse utilizzato nella pagina delle categorie di Discourse.
<script type="text/x-handlebars" data-template-name="components/categories-wrapper">
<!-- Questo crea un template chiamato 'categories wrapper' -->
<!-- Tutto questo codice del template è stato adattato dal template della pagina delle categorie di Discourse
https://github.com/discourse/discourse/blob/acd1693dac1bff6ff50250d942134bc48a27ff14/app/assets/javascripts/discourse/templates/components/categories-only.hbs -->
<div class="top-categories-wrapper">
{{#each categories as |c|}}
<div class="top-category-column-one">
{{category-title-link category=c}}
{{#if c.description}}
<div class="category-description">
{{dir-span c.description}}
</div>
{{/if}}
{{#if c.isGrandParent}}
<table class="category-list subcategories-with-subcategories">
<tbody>
{{#each c.subcategories as |subcategory|}}
<tr
data-category-id={{subcategory.id}}
data-notification-level={{subcategory.notificationLevelString
}}
class="{{if
subcategory.description_excerpt
"has-description"
"no-description"
}}
{{if subcategory.uploaded_logo.url "has-logo" "no-logo"}}"
>
<td
class="category"
style={{border-color subcategory.color}}
>
{{category-title-link tagName="h4" category=subcategory}}
{{#if subcategory.description_excerpt}}
<div
class="category-description subcategory-description"
>
{{{dir-span subcategory.description_excerpt}}}
</div>
{{/if}}
{{#if subcategory.subcategories}}
<div class="subcategories">
{{#each subcategory.subcategories as |subsubcategory|
}}
{{#unless subsubcategory.isMuted}}
<span class="subcategory">
{{category-title-before category=subsubcategory
}}
{{category-link subsubcategory hideParent="true"
}}
</span>
{{/unless}}
{{/each}}
</div>
{{else if subcategory.description_excerpt}}
<div
class="category-description subcategory-description"
>
{{{dir-span subcategory.description_excerpt}}}
</div>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{else if c.subcategories}}
<div class="subcategories">
{{#each c.subcategories as |subcategory|}}
{{#unless subcategory.isMuted}}
<span class="subcategory">
{{category-title-before category=subcategory}}
{{category-link subcategory hideParent="true"}}
{{category-unread category=subcategory}}
</span>
{{/unless}}
{{/each}}
</div>
{{/if}}
</div>
<div class="top-category-column-two">
<span class="topics-header">
Argomenti
</span>
<span class="topics-count">
{{c.topic_count}}
</span>
{{category-unread category=c tagName="div" class="unread-new"}}
</div>
{{/each}}
</div>
</script>
Questo dovrebbe aiutarti a iniziare a fare ciò che hai richiesto nel tuo OP.
Per lo stile del colore di ogni riquadro della categoria in base ai suoi colori personalizzati definiti, nella terza sezione, puoi codificare a mano gli stili utilizzando # + c.color per accedere al codice colore delle categorie.
A parte questo, lo stile può essere effettuato nel file common.scss.
