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

Sviluppatore
7

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.

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