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.
Dieser GitHub-Link zum hoffentlich komponenten, das diesen Trick macht, ist 404.
Ich glaube, diese Komponente ist jetzt hier:
Okay.. Ich muss herausfinden, wie ich ein HBS als etwas einbinden kann, das ich zu Discourse hinzufügen kann. Ich schätze, ich muss dies als Datei in einer Komponente verwenden und ich muss dazu ein Tutorial erstellen?
Ich habe ein Tutorial mit einem einfachen Thema gesehen. Ist das der richtige Weg?
Ich habe das noch nie gemacht, daher kenne ich die Antwort nicht. Das Tutorial für Theme-Entwickler wäre definitiv ein guter Ausgangspunkt.
Wenn Sie auf dieser Seite nach „Widgets einhängen“ suchen, sehen Sie ein Beispiel dafür, wie ein Widget an einer anderen Stelle der Seite angezeigt wird.
Dieses #howto-Thema könnte auch als Beispiel nützlich sein:
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
Ich werde Sie informieren, wenn ich erfolgreich bin. In der Zwischenzeit habe ich das Air-Theme aktiviert und bin ziemlich zufrieden, aber ich würde trotzdem gerne die neuesten Beiträge unter den Kategoriethemen sehen.
Ich war vor 25 Jahren MSVC+±Programmierer und habe es geschafft, eine für den Playstore veröffentlichte Flutter-App zu erstellen. Open-Source-APIs sind für mich jedoch nicht einfach. Wir werden sehen, wie die Dinge laufen. Ich werde ein Update posten, wenn ich dazu in der Lage bin.
Warst du erfolgreich? Ich möchte dasselbe tun und frage mich, ob es etwas Einfaches gibt oder ob ich mich mit dem Thema befassen und etwas Zeit investieren muss.
Mit der Einstellung für den Desktop-Kategorie-Seitenstil „Boxen mit Unterkategorien“ konnte ich eine Theme-Komponente erstellen und Code unter den Boxen hinzufügen. Jetzt überlege ich, wie ich die neuesten Themen auf der gesamten Website auflisten kann.
<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>
Das Problem ist, dass hier einfach „Du bist auf dem neuesten Stand“ steht.
Ich habe aufgegeben. Ich benutze jetzt meistens Standarddinge.