How to bring in Latest topics when using category boxes

Sviluppatore
23

Ero quasi sul punto di arrendermi, poi ho usato questo codice.

https://meta.discourse.org/t/add-a-featured-topic-list-to-your-discourse-homepage/132949

E ho cambiato il percorso json in /latest.json

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;
  const Topic = require('discourse/models/topic').default;
  // Usiamo ajax e il modello Topic di Discourse

  api.registerConnectorClass('below-discovery-categories', 'featured-topics', {
    // above-main-container è il plugin outlet,
    // featured-topics è il nome del tuo componente personalizzato

    setupComponent(args, component) {

      api.onPageChange((url, title) => {
        if ((url == "/") || (url == "/categories") ) {
        // al cambio pagina, controlla se l'url corrisponde
        // se la tua homepage non è /latest cambiala in /categories
        
          $('html').addClass('custom-featured-topics');
          // aggiunge una classe al tag HTML per un facile targeting CSS
          
          component.set('displayfeaturedTopics', true);
          // useremo questo più tardi per mostrare il nostro template
          
          component.set("loadingTopics", true);
          // ci aiuta a mostrare uno spinner di caricamento finché i topic non sono pronti
          
          ajax("/latest.json").then (function(result){
          // Ottiene i post dal tag "featured" usando AJAX
          // se fosse stata una categoria avresti usato /c/featured.json
          
            let featuredTopics = [];
            // Crea un array vuoto, ci aggiungeremo i topic
            
            var featuredUsers = result.users;
            // Ottiene gli utenti pertinenti
            
            result.topic_list.topics.slice(0,4).forEach(function(topic){
            // Estraiamo i topic a partire da 0 e fino a 4
            // Questo significa che ne mostreremo 3 in totale. Aumenta 4 per vederne di più.
            
              topic.posters.forEach(function(poster){
                poster.user = $.grep(featuredUsers, function(e){ return e.id == poster.user_id; })[0];
              });
              // Associa gli utenti al nostro topic
              
              featuredTopics.push(Topic.create(topic));
              // Aggiunge i nostri topic all'array featuredTopics
            });

            component.set("loadingTopics", false);
            // I topic sono caricati, smetti di mostrare lo spinner di caricamento
            
            component.set('featuredTopics', featuredTopics);
            // Imposta il nostro componente con i topic dall'array
          });

        } else {
        // Se la pagina non corrisponde agli url sopra, fai questo:
        
          $('html').removeClass('custom-featured-topics');
          // Rimuove la nostra classe personalizzata
          
          component.set('displayfeaturedTopics', false);
          // Non mostrare la nostra personalizzazione
        }
      });
    }
  });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-discovery-categories/featured-topics">

  {{#if displayfeaturedTopics}}
  <!-- Se il nostro componente è true, mostra questo contenuto: -->

      <div class="custom-featured-topics-wrapper">
        {{conditional-loading-spinner condition=loadingTopics}}
        <!-- Mostra uno spinner di caricamento se i topic sono in caricamento -->

        {{#unless loadingTopics}}
        <!-- A meno che i topic non siano ancora in caricamento... -->
          {{topic-list topics=featuredTopics showPosters=true}}
          <!-- Mostra la lista dei topic -->
        {{/unless}}

      </div>

  {{/if}}
</script>