# Come includere gli argomenti più recenti quando si utilizzano le caselle delle categorie

**URL:** <https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679>\
**Category:** Development\
**Created:** [4 Gennaio 2019, 9:26am 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:** 1\
**Showing post:** 7

<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:** [4 Gennaio 2019, 3:21pm UTC](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679/7 "2019-01-04T15:21:17Z")

</div>

Ho realizzato questo o qualcosa di simile per alcuni siti finora. Se inserisci questo codice nella sezione `<head>` del tuo tema, tutte le categorie verranno visualizzate in cima alla tua homepage (e anche in /latest, assumendo che sia identica alla homepage).

Dovrai solo aggiungere il CSS per strutturare il layout come preferisci. Questo è un ottimo punto di partenza per utilizzare l’API e i template Handlebars in generale.

```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'); // Mostra la homepage
          component.set('displayCustomHomepage', true);
          
            ajax("/site.json").then (function(result){ // Ottieni l'elenco delle categorie
              let categoryName = [];
              result.categories.forEach(function(categories){
                categoryName.push(categories);
            });
            component.set('categoryName', categoryName);
          });  
        }
        else { // Nascondi la 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>

```

---

_[View the full topic](https://meta.discourse.org/t/how-to-bring-in-latest-topics-when-using-category-boxes/105679)._
