How to bring in Latest topics when using category boxes

Dev
23

J’étais sur le point d’abandonner, puis j’ai utilisé ce code.

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

Et j’ai changé le chemin json en /latest.json

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;
  const Topic = require('discourse/models/topic').default;
  // Nous utilisons ajax et le modèle Topic de Discourse

  api.registerConnectorClass('below-discovery-categories', 'featured-topics', {
    // above-main-container est le plugin outlet,
    // featured-topics est le nom de votre composant personnalisé

    setupComponent(args, component) {

      api.onPageChange((url, title) => {
        if ((url == "/") || (url == "/categories") ) {
        // à chaque changement de page, vérifiez si l'url correspond
        // si votre page d'accueil n'est pas /latest, changez ceci en /categories
        
          $('html').addClass('custom-featured-topics');
          // ajoutez une classe à la balise HTML pour un ciblage CSS facile

          component.set('displayfeaturedTopics', true);
          // nous utiliserons ceci plus tard pour afficher notre modèle

          component.set("loadingTopics", true);
          // nous aide à afficher un spinner de chargement jusqu'à ce que les sujets soient prêts

          ajax("/latest.json").then(function(result) {
          // Obtenez les messages du tag "featured" en utilisant AJAX
          // si c'était une catégorie, vous utiliseriez /c/featured.json

            let featuredTopics = [];
            // Créez un tableau vide, nous y ajouterons des sujets

            var featuredUsers = result.users;
            // Obtenez les utilisateurs pertinents

            result.topic_list.topics.slice(0,4).forEach(function(topic) {
            // Nous extrayons les sujets en commençant à 0 et en terminant à 4
            // Cela signifie que nous en afficherons 3 au total. Augmentez 4 pour en voir plus.

              topic.posters.forEach(function(poster) {
                poster.user = $.grep(featuredUsers, function(e) { return e.id == poster.user_id; })[0];
              });
              // Associez les utilisateurs à notre sujet

              featuredTopics.push(Topic.create(topic));
              // Ajoutez nos sujets au tableau featuredTopics
            });

            component.set("loadingTopics", false);
            // Les sujets sont chargés, arrêtez d'afficher le spinner de chargement

            component.set('featuredTopics', featuredTopics);
            // Configurez notre composant avec les sujets du tableau
          });

        } else {
        // Si la page ne correspond pas aux urls ci-dessus, faites ceci :

          $('html').removeClass('custom-featured-topics');
          // Supprimez notre classe personnalisée

          component.set('displayfeaturedTopics', false);
          // Ne pas afficher notre personnalisation
        }
      });
    }
  });
</script>

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

  {{#if displayfeaturedTopics}}
  <!-- Si notre composant est vrai, affichez ce contenu : -->

      <div class="custom-featured-topics-wrapper">
        {{conditional-loading-spinner condition=loadingTopics}}
        <!-- Affichez un spinner de chargement si les sujets sont en cours de chargement -->

        {{#unless loadingTopics}}
        <!-- À moins que les sujets ne soient encore en cours de chargement... -->
          {{topic-list topics=featuredTopics showPosters=true}}
          <!-- Affichez la liste des sujets -->
        {{/unless}}

      </div>

  {{/if}}
</script>