# How to bring in Latest topics when using category boxes

**URL:** https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679
**Category:** Development
**Created:** [1월 4, 2019, 9:26오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679 "2019-01-04T09:26:54Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Kyle\_Risi](https://avatars.discourse-cdn.com/v4/letter/k/b5ac83/32.png) [@Kyle\_Risi](https://meta.discourse.org/u/Kyle_Risi)
#### Post date: [1월 4, 2019, 9:26오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/1 "2019-01-04T09:26:54Z")

</div>

Hi Guys,

Our HR team have decided to go with category boxes instead of a category list as below.

 ![categories](https://global.discourse-cdn.com/meta/original/3X/f/9/f9a7623fc1384de3f9cf66cd88052af80e96e1f6.png)

However, they also would like the latest topics to appear at the bottom of the categories as seen in revoluts community page

 ![Revolut](https://global.discourse-cdn.com/meta/original/3X/e/6/e64ef15cf5fa56b7b33995a56167a261a1da44d3.png)

I am struggling to work out how this can be done, either as an existing setting or with CSS,

any ideas?

---

<div class="post-metadata">

### Author: ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [1월 4, 2019, 11:49오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/2 "2019-01-04T11:49:17Z")

</div>

Try to work with components

You can use: categories-and-latest-topics

In this mode, there is a connection and categories and recent topics.

```plaintext
<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

```plaintext
<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.

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs)

## Useful material

> [@Structure of themes and theme components](https://meta.discourse.org/t/how-to-develop-custom-themes/60848):
>
> Discourse supports [native themes](https://meta.discourse.org/t/native-theme-support/47494/26) that can be sourced from a .tar.gz archive or from a remote git repository including [private repositories](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). An example theme is at: [GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub](https://github.com/SamSaffron/discourse-simple-theme) The git repository will be checked for updates ([once a day](https://github.com/discourse/discourse/blob/main/app/jobs/scheduled/check_out_of_date_themes.rb)), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to foll…

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [1월 4, 2019, 12:07오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/3 "2019-01-04T12:07:38Z")

</div>

Another option is to simply structure your category directly

[https://meta.discourse.org/c/howto](https://meta.discourse.org/c/howto)

---

<div class="post-metadata">

### Author: ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [1월 4, 2019, 12:10오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/4 "2019-01-04T12:10:30Z")

</div>

Then just change the css, which is even easier. )

---

<div class="post-metadata">

### Author: ![Kyle\_Risi](https://avatars.discourse-cdn.com/v4/letter/k/b5ac83/32.png) [@Kyle\_Risi](https://meta.discourse.org/u/Kyle_Risi)
#### Post date: [1월 4, 2019, 12:17오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/5 "2019-01-04T12:17:21Z")

</div>

> [@codinghorror](#):
>
> structure your category directly

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. ☹

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [1월 4, 2019, 12:37오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/6 "2019-01-04T12:37:04Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [1월 4, 2019, 3:21오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/7 "2019-01-04T15:21:17Z")

</div>

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.

```javascript
<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">&nbsp;</i>{{/if}}{{c.name}}</h2>
            <p>{{c.description}}</p>
          </div>
        </a>
        {{/each}}
      </div>
      
    </div>
    
  </div> 
  {{/if}}

</script>

```

---

<div class="post-metadata">

### Author: ![elGrande](https://avatars.discourse-cdn.com/v4/letter/e/ecc23a/32.png) [@elGrande](https://meta.discourse.org/u/elGrande)
#### Post date: [1월 7, 2019, 4:41오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/9 "2019-01-07T16:41:48Z")

</div>

![](https://global.discourse-cdn.com/meta/original/3X/0/6/069bab22f4ed0be689679e001dd2ccfcf86280ae.png)

It looks very nice. How I can to add Font Awesome 5 instead of images? Many thanks!

---

<div class="post-metadata">

### Author: ![thymotep](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thymotep/32/141302_2.png) [@thymotep](https://meta.discourse.org/u/thymotep)
#### Post date: [7월 2, 2019, 9:56오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/10 "2019-07-02T09:56:38Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [7월 6, 2019, 3:49오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/11 "2019-07-06T15:49:12Z")

</div>

I love this idea! Looking forward to test such a theme component or plugin

---

<div class="post-metadata">

### Author: ![Frank\_Johnette](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/frank_johnette/32/204914_2.png) [@Frank\_Johnette](https://meta.discourse.org/u/Frank_Johnette)
#### Post date: [9월 10, 2021, 11:59오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/12 "2021-09-10T23:59:51Z")

</div>

이 문제에 대한 업데이트가 있나요? 스크립트가 카테고리 이름을 가져오지 못한다는 오류가 발생하고 있습니다. 페이지에는 아무런 변화가 없습니다.

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/c/dcaa960cebdef123ee60825e9e331f94637d938e.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [9월 11, 2021, 12:42오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/13 "2021-09-11T00:42:19Z")

</div>

네, 오류가 있었습니다! 보고해 주셔서 감사합니다. 위에 있는 게시물에서 코드를 수정했습니다.

JavaScript에 대해 [strict mode](https://meta.discourse.org/t/upcoming-core-changes-that-may-break-some-themes-components-april-12/186252)를 활성화했는데, 이는 `categoryName = [];`가 선언되어야 한다는 것을 의미합니다. 해당 줄을 `let categoryName = [];`로 변경하는 것이 해결책이었습니다.

---

<div class="post-metadata">

### Author: ![bksubhuti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bksubhuti/32/254360_2.png) [@bksubhuti](https://meta.discourse.org/u/bksubhuti)
#### Post date: [4월 4, 2022, 12:15오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/15 "2022-04-04T12:15:56Z")

</div>

이 트릭을 수행하는 컴포넌트일 것으로 예상되는 이 GitHub 링크는 404 오류를 반환합니다.

> [@Stranik](#):
>
> 아마도 이 파일에서 카테고리 박스를 이동하거나, 단순히 CSS를 변경해야 할 것입니다.
> 
> 고려할 수 있는 옵션은 매우 많습니다.
> 
> [https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs)

---

<div class="post-metadata">

### Author: ![simonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonk/32/247950_2.png) [@simonk](https://meta.discourse.org/u/simonk)
#### Post date: [4월 4, 2022, 3:31오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/16 "2022-04-04T15:31:08Z")

</div>

해당 컴포넌트는 이제 여기 있습니다:

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs)

---

<div class="post-metadata">

### Author: ![bksubhuti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bksubhuti/32/254360_2.png) [@bksubhuti](https://meta.discourse.org/u/bksubhuti)
#### Post date: [4월 5, 2022, 12:32오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/17 "2022-04-05T00:32:30Z")

</div>

음.. hbs를 discourse에 추가할 수 있는 형태로 만드는 방법을 알아봐야 할 것 같아요. 컴포넌트에서 이 파일을 사용해야 하고, 그에 대한 튜토리얼이 필요할까요?  
단순한 테마를 다루는 튜토리얼을 하나 봤는데, 그 방향으로 가는 게 맞을까요?

---

<div class="post-metadata">

### Author: ![simonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonk/32/247950_2.png) [@simonk](https://meta.discourse.org/u/simonk)
#### Post date: [4월 5, 2022, 8:27오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/18 "2022-04-05T08:27:50Z")

</div>

이전에 해본 적이 없어서 정확한 답을 모릅니다. 테마 개발자 튜토리얼이 시작하기에 좋은 곳이 될 것입니다.

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

해당 페이지에서 \*\*“Mounting widgets”\*\*를 검색하면, 페이지의 다른 위치에 위젯을 표시하는 예시를 볼 수 있습니다.

이 #howto 토픽도 예시로 유용할 수 있습니다:

[https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949](https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949)

---

<div class="post-metadata">

### Author: ![bksubhuti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bksubhuti/32/254360_2.png) [@bksubhuti](https://meta.discourse.org/u/bksubhuti)
#### Post date: [4월 6, 2022, 6:00오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/19 "2022-04-06T06:00:04Z")

</div>

성공하면 알려드릴게요. 그 사이에 Air 테마를 적용해 봤는데 꽤 마음에 들지만, 여전히 카테고리 주제 아래에 최신 게시글이 표시되길 원합니다.

25년 전에 msvc++ 프로그래머로 일했던 적이 있고, 플레이스토어에 배포할 수 있는 Flutter 앱도 직접 만들어 봤습니다. 하지만 오픈소스 API는 저한테 좀 어렵네요. 어떻게 될지 지켜보겠습니다. 가능하면 업데이트를 올려드리겠습니다.

---

<div class="post-metadata">

### Author: ![jordantrizz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordantrizz/32/328273_2.png) [@jordantrizz](https://meta.discourse.org/u/jordantrizz)
#### Post date: [12월 1, 2023, 10:21오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/20 "2023-12-01T22:21:59Z")

</div>

> [@bksubhuti](#):
>
> 성공하면 알려드리겠습니다.

성공하셨나요? 저도 같은 것을 해보려 하는데, 쉬운 방법이 있는지 아니면 테마에 깊이 파고들어 시간을 들여야 하는지 궁금합니다.

---

<div class="post-metadata">

### Author: ![jordantrizz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordantrizz/32/328273_2.png) [@jordantrizz](https://meta.discourse.org/u/jordantrizz)
#### Post date: [12월 1, 2023, 11:46오후 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/21 "2023-12-01T23:46:34Z")

</div>

데스크톱 카테고리 페이지 스타일인 “Boxes with Subcategories” 설정을 활용하여 Theme Component를 만들고 Boxes 아래에 코드를 추가할 수 있었습니다. 이제 전체 사이트의 최신 토픽을 목록으로 표시하는 방법을 알아보고 있습니다.

```plaintext
<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"라고 표시한다는 것입니다.

---

<div class="post-metadata">

### Author: ![bksubhuti](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bksubhuti/32/254360_2.png) [@bksubhuti](https://meta.discourse.org/u/bksubhuti)
#### Post date: [12월 2, 2023, 3:44오전 UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/22 "2023-12-02T03:44:50Z")

</div>

포기했어요. 요즘은 대부분 표준적인 것들을 사용하거든요.

[다음 페이지](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679.md?page=2)