How to bring in Latest topics when using category boxes

Entwickler
23

Ich war kurz davor aufzugeben, dann habe ich diesen Code verwendet.

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

Und den JSON-Pfad zu /latest.json geändert.

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;
  const Topic = require('discourse/models/topic').default;
  // Wir verwenden ajax und das Topic-Modell von Discourse

  api.registerConnectorClass('below-discovery-categories', 'featured-topics', {
    // above-main-container ist der Plugin-Outlet,
    // featured-topics ist Ihr benutzerdefinierter Komponentenname

    setupComponent(args, component) {

      api.onPageChange((url, title) => {
        if ((url == "/") || (url == "/categories")) {
        // bei Seitenwechsel prüfen, ob die URL übereinstimmt
        // wenn Ihre Homepage nicht /latest ist, ändern Sie dies zu /categories

          $('html').addClass('custom-featured-topics');
          // eine Klasse zum HTML-Tag hinzufügen, um sie einfach per CSS anzusprechen

          component.set('displayfeaturedTopics', true);
          // wir werden dies später verwenden, um unsere Vorlage anzuzeigen

          component.set("loadingTopics", true);
          // hilft uns, einen Lade-Spinner anzuzeigen, bis die Themen bereit sind

          ajax("/latest.json").then(function(result) {
          // Beiträge aus dem Tag "featured" per AJAX abrufen
          // wenn dies eine Kategorie wäre, würden Sie /c/featured.json verwenden

            let featuredTopics = [];
            // Ein leeres Array erstellen, wir werden Themen hineinschieben

            var featuredUsers = result.users;
            // Die relevanten Benutzer abrufen

            result.topic_list.topics.slice(0, 4).forEach(function(topic) {
            // Wir extrahieren die Themen ab Index 0 und bis Index 4
            // Das bedeutet, wir zeigen insgesamt 3 an. Erhöhen Sie 4, um mehr anzuzeigen.

              topic.posters.forEach(function(poster) {
                poster.user = $.grep(featuredUsers, function(e) { return e.id == poster.user_id; })[0];
              });
              // Benutzer unserem Thema zuordnen

              featuredTopics.push(Topic.create(topic));
              // Unsere Themen in das featuredTopics-Array pushen
            });

            component.set("loadingTopics", false);
            // Themen sind geladen, den Lade-Spinner nicht mehr anzeigen

            component.set('featuredTopics', featuredTopics);
            // Unsere Komponente mit den Themen aus dem Array einrichten
          });

        } else {
        // Wenn die Seite nicht mit den obigen URLs übereinstimmt, tun Sie Folgendes:

          $('html').removeClass('custom-featured-topics');
          // Unsere benutzerdefinierte Klasse entfernen

          component.set('displayfeaturedTopics', false);
          // Unsere Anpassung nicht anzeigen
        }
      });
    }
  });
</script>

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

  {{#if displayfeaturedTopics}}
  <!-- Wenn unsere Komponente true ist, diesen Inhalt anzeigen: -->

      <div class="custom-featured-topics-wrapper">
        {{conditional-loading-spinner condition=loadingTopics}}
        <!-- Lade-Spinner anzeigen, wenn Themen geladen werden -->

        {{#unless loadingTopics}}
        <!-- Es sei denn, Themen werden noch geladen... -->
          {{topic-list topics=featuredTopics showPosters=true}}
          <!-- Die Themenliste anzeigen -->
        {{/unless}}

      </div>

  {{/if}}
</script>