How to bring in Latest topics when using category boxes

Desarrollador
23

Estaba a punto de rendirme, entonces usé este código.

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

Y cambié la ruta json a /latest.json


  const ajax = require('discourse/lib/ajax').ajax;
  const Topic = require('discourse/models/topic').default;
  // Usamos ajax y el modelo Topic de Discourse

  api.registerConnectorClass('below-discovery-categories', 'featured-topics', {
    // above-main-container es el outlet del plugin,
    // featured-topics es el nombre de tu componente personalizado

    setupComponent(args, component) {

      api.onPageChange((url, title) => {
        if ((url == "/") || (url == "/categories")) {
        // al cambiar de página, comprueba si la url coincide
        // si tu página de inicio no es /latest, cámbiala a /categories

          $('html').addClass('custom-featured-topics');
          // añade una clase a la etiqueta HTML para facilitar la selección de CSS

          component.set('displayfeaturedTopics', true);
          // usaremos esto más tarde para mostrar nuestra plantilla

          component.set("loadingTopics", true);
          // nos ayuda a mostrar un spinner de carga hasta que los temas estén listos

          ajax("/latest.json").then(function(result) {
          // Obtiene publicaciones de la etiqueta "featured" usando AJAX
          // si esto fuera una categoría, usarías /c/featured.json

            let featuredTopics = [];
            // Crea un array vacío, agregaremos temas a él

            var featuredUsers = result.users;
            // Obtiene los usuarios relevantes

            result.topic_list.topics.slice(0, 4).forEach(function(topic) {
            // Estamos extrayendo los temas comenzando en 0 y terminando en 4
            // Esto significa que mostraremos 3 en total. Aumenta 4 para ver más.

              topic.posters.forEach(function(poster) {
                poster.user = $.grep(featuredUsers, function(e) { return e.id == poster.user_id; })[0];
              });
              // Asocia usuarios con nuestro tema

              featuredTopics.push(Topic.create(topic));
              // Agrega nuestros temas al array featuredTopics
            });

            component.set("loadingTopics", false);
            // Los temas están cargados, deja de mostrar el spinner de carga

            component.set('featuredTopics', featuredTopics);
            // Configura nuestro componente con los temas del array
          });

        } else {
        // Si la página no coincide con las urls anteriores, haz esto:

          $('html').removeClass('custom-featured-topics');
          // Elimina nuestra clase personalizada

          component.set('displayfeaturedTopics', false);
          // No muestres nuestra personalización
        }
      });
    }
  });

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

  {{#if displayfeaturedTopics}}
  <!-- Si nuestro componente es verdadero, muestra este contenido: -->

      <div class="custom-featured-topics-wrapper">
        {{conditional-loading-spinner condition=loadingTopics}}
        <!-- Muestra un spinner de carga si los temas se están cargando -->

        {{#unless loadingTopics}}
        <!-- A menos que los temas aún se estén cargando... -->
          {{topic-list topics=featuredTopics showPosters=true}}
          <!-- Muestra la lista de temas -->
        {{/unless}}

      </div>

  {{/if}}
</script>