我在新插件的 outlet 中加载主题

开发
2

我想我已经让这起作用了。目标：在新模板的指定位置加载某些主题（可能也适用于添加到现有模板，但我尚未测试过）：

  1. 在您的模板中插入自定义的插件出口（我的自定义插件出口名为 “great-topics”，示例如下）：

{{plugin-outlet name="great-topics"}}

  1. 在连接器中添加 Handlebars 代码（即您的组件）：

[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.hbs

<div>我在插件出口中！正在加载主题：</div>
{{topic-list topics=featuredTopics showPosters=true}}
  1. 为您的新连接器中的组件添加 JavaScript 代码：

[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.js.es6
[此代码改编自以下 Meta 帖子，其中包含加载带有 “featured” 标签的主题的代码：https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949]

const ajax = require('discourse/lib/ajax').ajax;
const Topic = require('discourse/models/topic').default;

setupComponent(args, component) {
 ajax("/tag/featured.json").then(function (result) {
                 
   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 数组
     });
   }) //end result.topic.topic_list...
                    
component.set('featuredTopics', featuredTopics);  // 主题在此处被添加到组件中
 
component.set("loadingTopics", false); // 我上面的代码没有加载器。但如果您需要加载器，这里也有。为此还需在 hbs 文件中添加相应内容。请参阅上方 Meta 上的链接帖子

  }); //end ajax 


 }//end setup component

至少对我来说，这已经可以正常工作，能够在我的新模板的插件出口中加载带有 “featured” 标签的主题。

要查看其效果，需要重启服务器。

1 个赞