Olá, pessoal,
Nossa equipe de RH decidiu usar caixas de categoria em vez de uma lista de categorias, conforme mostrado abaixo.
No entanto, eles também desejam que os tópicos mais recentes apareçam na parte inferior das categorias, como visto na página da comunidade da Revolut.
Estou com dificuldade para descobrir como fazer isso, seja por meio de uma configuração existente ou com CSS.
Alguma ideia?
Try to work with components
You can use: categories-and-latest-topics
In this mode, there is a connection and categories and recent topics.
<script type='text/x-handlebars' data-template-name='components/categories-and-latest-topics'>
<div class='column categories'>
{{categories-only categories=categories}}
</div>
<div class='column'>
{{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>
</script>
Next, you override: categories-only
<script type='text/x-handlebars' data-template-name='components/categories-only'>
The contents of the file...
</script>
Perhaps from this file it is necessary to move the box with the categories, or to do simply to change the css.
Options think very many.
Another option is to simply structure your category directly
Then just change the css, which is even easier. )
Ideally I would prefer to do it like you have suggested, however, there isnt a way to display categories in a grid layout and have the latest topics below. 
I suggest building a static header customization if your categories do not change much. Then you could have whatever layout you like above the topic list.
Já criei isso ou algo similar para alguns sites até agora. Se você colocar isso na seção <head> do seu tema, ele exibirá todas as categorias no topo da sua página inicial (e em /latest, assumindo que seja o mesmo que sua página inicial).
Depois, tudo o que você precisará fazer é adicionar o CSS para estruturar esse layout da maneira que desejar. Isso é uma boa introdução ao uso da API e dos templates Handlebars em geral.
<script type="text/discourse-plugin" version="0.8">
const ajax = require('discourse/lib/ajax').ajax;
api.registerConnectorClass('below-site-header', 'custom-homepage', {
setupComponent(args, component) {
component.set('hostname', window.location.hostname);
api.onPageChange((url, title) => {
if (url == "/" || url == "/latest"){
$('html').addClass('show-custom-homepage'); // Mostrar página inicial
component.set('displayCustomHomepage', true);
ajax("/site.json").then (function(result){ // Obter lista de categorias
let categoryName = [];
result.categories.forEach(function(categories){
categoryName.push(categories);
});
component.set('categoryName', categoryName);
});
}
else { // Ocultar página inicial
$('html').removeClass('show-custom-homepage');
component.set('displayCustomHomepage', false);
}
});
}
});
</script>
<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/custom-homepage'>
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper">
<div class="wrap wrap-category-boxes">
<div class="homepage-category-boxes">
{{#each categoryName as |c|}}
<a href="/c/{{c.slug}}" class="box">
<div class="homepage-category-box">
{{#if c.uploaded_logo}}
<div class="category-image-wrapper">
<img class="homepage-category-image" src="{{c.uploaded_logo.url}}" />
</div>
{{/if}}
<h2>{{#if c.read_restricted}}<i class="fa fa-lock"> </i>{{/if}}{{c.name}}</h2>
<p>{{c.description}}</p>
</div>
</a>
{{/each}}
</div>
</div>
</div>
{{/if}}
</script>
It looks very nice. How I can to add Font Awesome 5 instead of images? Many thanks!
Olá,
Obrigado por este trecho de código! Estou trabalhando em um projeto onde preciso fazer algumas coisas seguindo este princípio (não necessariamente categorias) e gostaria de incluir isso diretamente no plugin que estou desenvolvendo.
Sei onde colocar o template Handlebars, mas não consigo encontrar a pasta/arquivo onde devo colocar o JavaScript. Você poderia me dizer como proceder?
Obrigado,
Thymotep
Adoro essa ideia! Mal posso esperar para testar esse componente de tema ou plugin.
Sim, houve um erro! Obrigado por reportá-lo. Corrigi o código na postagem acima.
Ativamos o modo estrito para nosso JavaScript, o que significa que categoryName = []; precisa ser declarado. A solução foi alterar essa linha para let categoryName = [];.
Este link do GitHub, que esperançosamente contém o componente que faz isso funcionar, está com erro 404.
Eu acho que esse componente está agora aqui:
Ok.. Terei que descobrir como fazer um hbs funcionar como algo que posso adicionar ao Discourse. Acho que tenho que usar isso como um arquivo em um componente e preciso fazer um tutorial sobre isso?
Vi um tutorial com um tema simples. Essa é a direção certa a seguir?
Eu nunca fiz isso antes, então não sei a resposta. O tutorial do desenvolvedor de temas seria definitivamente um bom lugar para começar.
Se você pesquisar nessa página por “Montando widgets”, verá um exemplo de como exibir um widget em outra parte da página.
Este tópico howto também pode ser útil como exemplo:
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Avisarei se for bem-sucedido. Enquanto isso, instalei o tema Air e estou bastante satisfeito, mas ainda gostaria de ter as últimas postagens abaixo dos tópicos das categorias.
Já fui programador msvc++ há 25 anos e consegui criar um aplicativo Flutter lançado na Play Store. No entanto, APIs de código aberto não são fáceis para mim. Veremos como as coisas vão. Postarei uma atualização quando puder.
Você foi? Estou querendo fazer o mesmo, me pergunto se há algo fácil ou se preciso mergulhar no tema e gastar algum tempo.
Utilizando a configuração de estilo da página de categoria da área de trabalho “Caixas com Subcategorias”, consegui criar um Componente de Tema e adicionar código abaixo das Caixas. Agora estou descobrindo como listar os tópicos mais recentes em todo o site.
<script type="text/x-handlebars" data-template-name="/connectors/category-boxes-after-boxes/mwp">
<div class='column'>
{{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>
</script>
O problema é que isso simplesmente diz “Você está em dia”.
Desisti. Agora uso principalmente coisas padrão.