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.
Questo link di github, che si spera sia il componente che fa questo trucco, è 404.
Penso che quel componente sia ora qui:
Okay⌠dovrò capire come far funzionare un hbs come qualcosa che posso aggiungere a discourse. Immagino di doverlo usare come file in un componente e devo fare un tutorial su questo?
Ho visto un tutorial con un tema semplice. Ă la direzione giusta da prendere?
Non lâho mai fatto prima, quindi non conosco la risposta. Il tutorial per sviluppatori di temi sarebbe sicuramente un buon punto di partenza.
Se cerchi in quella pagina âMounting widgetsâ, vedrai un esempio di come visualizzare un widget in una parte diversa della pagina.
Anche questo argomento howto potrebbe essere utile come esempio:
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Ti farò sapere se avrò successo. Nel frattempo, ho installato il tema Air e sono abbastanza soddisfatto, ma mi piacerebbe comunque avere gli ultimi post sotto gli argomenti delle categorie.
Una volta ero un programmatore msvc++ 25 anni fa, e sono riuscito a creare unâapp Flutter rilasciata sul Play Store. Tuttavia, le API open source non sono facili per me. Vedremo come andranno le cose. Pubblicherò un aggiornamento quando potrò.
Ci sei riuscito? Sto cercando di fare lo stesso, mi chiedo se câè qualcosa di facile o se devo approfondire il tema e dedicare del tempo.
Utilizzando lâimpostazione dello stile della pagina della categoria desktop âBox con sottocategorieâ, sono stato in grado di creare un componente del tema e aggiungere codice sotto i box. Ora sto cercando di capire come elencare gli argomenti piĂš recenti su tutto il sito.
<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>
Il problema è che questo dice semplicemente âSei in pariâ.
Mi sono arreso. Ora uso principalmente cose standard.