How to bring in Latest topics when using category boxes

開発
23

諦めかけていたのですが、このコードを使ってみました。

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

そして、jsonパスを /latest.json に変更しました。

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;
  const Topic = require('discourse/models/topic').default;
  // Discourse の ajax と Topic モデルを使用しています

  api.registerConnectorClass('below-discovery-categories', 'featured-topics', {
    // above-main-container はプラグインのアウトレットです
    // featured-topics はカスタムコンポーネント名です

    setupComponent(args, component) {

      api.onPageChange((url, title) => {
        if ((url == "/") || (url == "/categories")) {
        // ページ変更時に URL が一致するか確認します
        // ホームページが /latest でない場合は /categories に変更してください

          $('html').addClass('custom-featured-topics');
          // CSS で簡単にターゲット指定できるように HTML タグにクラスを追加します

          component.set('displayfeaturedTopics', true);
          // 後でテンプレートを表示するためにこれを使用します

          component.set("loadingTopics", true);
          // トピックが準備できるまでローディングスピナーを表示するのに役立ちます

          ajax("/latest.json").then(function (result) {
          // AJAX を使用してタグ「featured」から投稿を取得します
          // カテゴリの場合は /c/featured.json を使用します

            let featuredTopics = [];
            // 空の配列を作成し、トピックをプッシュします

            var featuredUsers = result.users;
            // 関連するユーザーを取得します

            result.topic_list.topics.slice(0, 4).forEach(function (topic) {
            // 0 から始まるトピックを抽出し、4 で終わります
            // これは合計 3 つを表示することを意味します。増やすには 4 を増やしてください。

              topic.posters.forEach(function (poster) {
                poster.user = $.grep(featuredUsers, function (e) { return e.id == poster.user_id; })[0];
              });
              // ユーザーをトピックに関連付けます

              featuredTopics.push(Topic.create(topic));
              // トピックを featuredTopics 配列にプッシュします
            });

            component.set("loadingTopics", false);
            // トピックがロードされたので、ローディングスピナーの表示を停止します

            component.set('featuredTopics', featuredTopics);
            // 配列からトピックを取得してコンポーネントをセットアップします
          });

        } else {
        // 上記の URL に一致しないページの場合、次を実行します:

          $('html').removeClass('custom-featured-topics');
          // カスタムクラスを削除します

          component.set('displayfeaturedTopics', false);
          // カスタマイズを表示しません
        }
      });
    }
  });
</script>

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

  {{#if displayfeaturedTopics}}
  <!-- コンポーネントが true の場合、このコンテンツを表示します: -->

      <div class="custom-featured-topics-wrapper">
        {{conditional-loading-spinner condition=loadingTopics}}
        <!-- トピックがロード中の場合はローディングスピナーを表示します -->

        {{#unless loadingTopics}}
        <!-- トピックがまだロードされていない限り... -->
          {{topic-list topics=featuredTopics showPosters=true}}
          <!-- トピックリストを表示します -->
        {{/unless}}

      </div>

  {{/if}}
</script>