Eu revisei esta postagem anterior do Kris e a adaptei diretamente para algo que você possa usar como base. Grande parte do que é abordado aqui foi apresentada por ele em seu tópico original.
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Todo o código será adicionado à seção </head> (head_tag.html) do seu tema.
Esta primeira seção verificará se a página em que você está é a “página inicial”.
Em seguida, obteremos as categorias do site usando o método Category.list() na classe Category.
Depois, compararemos essas categorias com as que você deseja destacar. Elas estarão localizadas no array definedFeaturedCategories definido no código abaixo. As que você permitir serão passadas para o componente, que será enviado a um template para renderização.
<script type="text/discourse-plugin" version="0.8">
const Category = require("discourse/models/category").default;
// usaremos o modelo Category para recuperar as categorias do site
api.registerConnectorClass('above-main-container', 'featured-categories', {
// above-main-container é a saída do plugin,
// featured-topics é o nome do seu componente personalizado
setupComponent(args, component) {
api.onPageChange((url, title) => {
console.log(url,title)
if ((url === "/") || (url === "/latest") ) {
// ao mudar de página, verifica se a URL corresponde
// se sua página inicial não for /latest, altere isso para /categories
$('html').addClass('custom-featured-categories');
// adiciona uma classe à tag HTML para facilitar o direcionamento via CSS
let definedFeaturedCategories = ["uncategorized","blog","two"]
// array de categorias que você deseja destacar
// certifique-se de colocar os títulos das categorias em minúsculas
let featuredCategories = [];
categories = Category.list();
for (let cat of categories) {
if (definedFeaturedCategories.includes(cat.name.toLowerCase())) {
// empurra apenas as categorias que você deseja destacar para o array a ser renderizado
featuredCategories.push(cat)
}
}
component.set('featuredCategories', featuredCategories)
} else {
// Se a página não corresponder às URLs acima, faça o seguinte:
$('html').removeClass('custom-featured-categories');
// Remove nossa classe personalizada
component.set('categories',[])
// define as categorias como um array vazio para desativar a renderização
}
});
}
});
</script>
Esta próxima seção injeta o template para o componente criado acima na saída do plugin above-main-container. Ela chamará o categories-wrapper personalizado criado na terceira etapa e definirá categories como featuredCategories criado acima.
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/featured-categories">
<div class="custom-featured-categories-wrapper">
{{categories-wrapper categories=featuredCategories}}
<!-- use o template categories-wrapper criado abaixo -->
<!-- defina categories como featuredCategories criado no script acima -->
</div>
</script>
A terceira seção cria o template Handlebars personalizado categories-wrapper para renderizar as categorias destacadas. Ele foi adaptado diretamente do template categories-only.hbs do Discourse usado na página de categorias do Discourse.
<script type="text/x-handlebars" data-template-name="components/categories-wrapper">
<!-- Isso cria um template de componente chamado 'categories wrapper' -->
<!-- Todo este código de template foi adaptado do template da própria página de categorias do 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">
Tópicos
</span>
<span class="topics-count">
{{c.topic_count}}
</span>
{{category-unread category=c tagName="div" class="unread-new"}}
</div>
{{/each}}
</div>
</script>
Isso deve ajudá-lo a começar a fazer o que você solicitou em sua OP.
Para estilizar a cor de cada caixa de categoria de acordo com suas cores personalizadas definidas, na terceira seção, você pode codificar estilos fixos usando # + c.color para acessar o código de cor da categoria.
Além disso, a estilização pode ser feita no arquivo common.scss.
