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');
          // 向 HTML 标签添加一个类，以便于 CSS 定位

          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>