Comment afficher les derniers sujets lors de l'utilisation de boîtes de catégories

Dev
7

J’ai déjà créé ceci ou quelque chose de similaire pour plusieurs sites. Si vous placez ce code dans la section <head> de votre thème, il affichera toutes les catégories en haut de votre page d’accueil (et de /latest, en supposant qu’il s’agit de la même page que votre page d’accueil).

Ensuite, il vous suffira d’ajouter le CSS pour structurer cette mise en page comme vous le souhaitez. C’est une excellente introduction à l’utilisation de l’API et des modèles Handlebars en général.

<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'); // Afficher la page d'accueil
          component.set('displayCustomHomepage', true);
          
            ajax("/site.json").then (function(result){ // Récupérer la liste des catégories
              let categoryName = [];
              result.categories.forEach(function(categories){
                categoryName.push(categories);
            });
            component.set('categoryName', categoryName);
          });  
        }
        else { // Masquer la page d'accueil
          $('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>