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>
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
네, 오류가 있었습니다! 보고해 주셔서 감사합니다. 위에 있는 게시물에서 코드를 수정했습니다.
JavaScript에 대해 strict mode를 활성화했는데, 이는 categoryName = [];가 선언되어야 한다는 것을 의미합니다. 해당 줄을 let categoryName = [];로 변경하는 것이 해결책이었습니다.
이 트릭을 수행하는 컴포넌트일 것으로 예상되는 이 GitHub 링크는 404 오류를 반환합니다.
음.. hbs를 discourse에 추가할 수 있는 형태로 만드는 방법을 알아봐야 할 것 같아요. 컴포넌트에서 이 파일을 사용해야 하고, 그에 대한 튜토리얼이 필요할까요?
단순한 테마를 다루는 튜토리얼을 하나 봤는데, 그 방향으로 가는 게 맞을까요?
이전에 해본 적이 없어서 정확한 답을 모릅니다. 테마 개발자 튜토리얼이 시작하기에 좋은 곳이 될 것입니다.
해당 페이지에서 **“Mounting widgets”**를 검색하면, 페이지의 다른 위치에 위젯을 표시하는 예시를 볼 수 있습니다.
이 howto 토픽도 예시로 유용할 수 있습니다:
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
성공하면 알려드릴게요. 그 사이에 Air 테마를 적용해 봤는데 꽤 마음에 들지만, 여전히 카테고리 주제 아래에 최신 게시글이 표시되길 원합니다.
25년 전에 msvc++ 프로그래머로 일했던 적이 있고, 플레이스토어에 배포할 수 있는 Flutter 앱도 직접 만들어 봤습니다. 하지만 오픈소스 API는 저한테 좀 어렵네요. 어떻게 될지 지켜보겠습니다. 가능하면 업데이트를 올려드리겠습니다.
성공하셨나요? 저도 같은 것을 해보려 하는데, 쉬운 방법이 있는지 아니면 테마에 깊이 파고들어 시간을 들여야 하는지 궁금합니다.
데스크톱 카테고리 페이지 스타일인 “Boxes with Subcategories” 설정을 활용하여 Theme Component를 만들고 Boxes 아래에 코드를 추가할 수 있었습니다. 이제 전체 사이트의 최신 토픽을 목록으로 표시하는 방법을 알아보고 있습니다.
<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>
문제는 이 간단한 코드가 "You’re all caught up"라고 표시한다는 것입니다.
포기했어요. 요즘은 대부분 표준적인 것들을 사용하거든요.