Hi Guys,
Our HR team have decided to go with category boxes instead of a category list as below.
However, they also would like the latest topics to appear at the bottom of the categories as seen in revoluts community page
I am struggling to work out how this can be done, either as an existing setting or with CSS,
any ideas?
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.
I’ve built this or something similar for a few sites at this point. If you put this in the </head> section of your theme it will put all the categories on top of your home page (and /latest assuming that it’s the same as your homepage)
Then all you’ll need is add the CSS to structure this layout however you want. This is a good introduction to using the API and Handlebars templates in general.
<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'); // Show homepage
component.set('displayCustomHomepage', true);
ajax("/site.json").then (function(result){ // Get list of categories
let categoryName = [];
result.categories.forEach(function(categories){
categoryName.push(categories);
});
component.set('categoryName', categoryName);
});
}
else { // Hide homepage
$('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!
Hello,
Thank you for this code snippet! I am working on a project where I need to do some things on this principle (not necessarily categories) and I would like to put this directly in the plugin that I develop.
I know where to put the template handlebars, but I can not find the folder / file where to put the javascript. Could you tell me how to proceed?
Thank you,
Thymotep
I love this idea! Looking forward to test such a theme component or plugin
Is there an update to this? I’m getting an error from the script not being able to get the category names. Nothing is changing on the page.
Yes, there was an error! Thanks for reporting it. I’ve fixed the code in the post above.
We turned strict mode on for our JavaScript, which means categoryName = []; needs to be declared, changing that line to let categoryName = []; was the fix.
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.