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.
这个指向可能实现此功能的组件的 GitHub 链接是 404。\n\n\n[quote="Stranik, post:2, topic:105679"]\n也许有必要将类别框从该文件中移出，或者只需更改 CSS。\n\n选项很多。\n\nhttps://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs \n[/quote]
好的……我需要弄清楚如何让 hbs 成为我可以添加到 discourse 中的内容。我猜我必须在组件中使用它作为文件，并且我需要做一个关于它的教程？
我看到一个关于简单主题的教程。那是正确的方向吗？
我以前没做过，所以不知道答案。主题开发人员教程绝对是一个很好的起点。
如果你在该页面上搜索**“挂件挂载”**，你将看到一个在页面不同部分显示挂件的示例。
这个 howto 主题也可能有用，可以作为一个例子：
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
如果我成功了，我会通知你。在此期间，我使用了 Air 主题，我对此很满意，但我仍然希望在分类主题下方显示最新帖子。
我曾经是一名 msvc++ 程序员，25 年前，我确实成功构建了一个在 Play 商店发布的 Flutter 应用程序。不过，开源 API 对我来说并不容易。让我们看看事情如何发展。我会在方便的时候发布更新。
你成功了吗？想做同样的事情，不知道有没有简单的方法，还是我需要深入研究主题并花些时间。
通过使用桌面分类页面样式“带子分类的框”设置，我能够创建一个主题组件并在框下方添加代码。我现在正在研究如何在整个站点上列出最新主题。
<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>
问题是这很简单地说“您已全部看完”。
我放弃了。我现在主要使用标准的东西。