自定义主题列表条目（排序、分组、过滤）以实现更好的组织

Sören_Geier · 2022 年8 月 20 日 18:28

TLDR:
最快的改变 filteredTopics（第 26 行）组成方式的方法是什么？我想完全控制收集哪些主题（以及它们的属性）。

app/assets/javascripts/discourse/app/templates/components/topic-list.hbs

dc5dc7830


      
          
          <PluginOutlet @name="before-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled
              lastVisitedTopic=this.lastVisitedTopic
              discoveryList=this.discoveryList
              hideCategory=this.hideCategory}} />
          
          <tbody class="topic-list-body">
            {{#each this.filteredTopics as |topic index|}}
              <TopicListItem @topic={{topic}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @showTopicPostBadges={{this.showTopicPostBadges}} @hideCategory={{this.hideCategory}} @showPosters={{this.showPosters}} @showLikes={{this.showLikes}} @showOpLikes={{this.showOpLikes}} @expandGloballyPinned={{this.expandGloballyPinned}} @expandAllPinned={{this.expandAllPinned}} @lastVisitedTopic={{this.lastVisitedTopic}} @selected={{this.selected}} @lastChecked={{this.lastChecked}} @tagsForUser={{this.tagsForUser}} @focusLastVisitedTopic={{this.focusLastVisitedTopic}} @index={{index}} />
              {{raw "list/visited-line" lastVisitedTopic=this.lastVisitedTopic topic=topic}}
              <PluginOutlet @name="after-topic-list-item" @args={{hash topic=topic index=index}} @connectorTagName="tr" />
            {{/each}}
          </tbody>
          
          <PluginOutlet @name="after-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled

大家好，

我一直在我们的托管环境中使用 GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists 主题组件，并且我们希望对其进行更多更改以满足我们的需求。

我们希望将所有主题从混合在一起的大块网格项中区分开来。
我们的目标是：
首先，我们想按已读/未读排序，其次按类别排序；然后，我们想按时间顺序对它们进行分组（并创建存储桶，例如今天（今天的所有相关帖子）、昨天、上周）。

所以我们的主题列表应该如下所示，下面有 3 个不同的网格：

<TODAY, YESTERDAY, LAST WEEK> 代表一个分组

置顶：
主题 20、主题 30、主题 40

未读：
<今天：[艺术：主题 1、主题 2]、[设计：主题 4]> <昨天：[概念：主题 3]、[其他类别：主题 6、主题 11]> <上周：主题 8、主题 10>

已读：
<今天：[艺术：主题 4、主题 12]、[设计：主题 4]> <昨天：[CGI：主题 13]、[其他类别：主题 16、主题 21]> <上周：主题 18、主题 100>

我的主要问题是如何创建/扩展用于生成结果集的查询，该结果集随后在

github.com/discourse/discourse

app/assets/javascripts/discourse/app/templates/components/topic-list.hbs

dc5dc7830


      
          
          <PluginOutlet @name="before-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled
              lastVisitedTopic=this.lastVisitedTopic
              discoveryList=this.discoveryList
              hideCategory=this.hideCategory}} />
          
          <tbody class="topic-list-body">
            {{#each this.filteredTopics as |topic index|}}
              <TopicListItem @topic={{topic}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @showTopicPostBadges={{this.showTopicPostBadges}} @hideCategory={{this.hideCategory}} @showPosters={{this.showPosters}} @showLikes={{this.showLikes}} @showOpLikes={{this.showOpLikes}} @expandGloballyPinned={{this.expandGloballyPinned}} @expandAllPinned={{this.expandAllPinned}} @lastVisitedTopic={{this.lastVisitedTopic}} @selected={{this.selected}} @lastChecked={{this.lastChecked}} @tagsForUser={{this.tagsForUser}} @focusLastVisitedTopic={{this.focusLastVisitedTopic}} @index={{index}} />
              {{raw "list/visited-line" lastVisitedTopic=this.lastVisitedTopic topic=topic}}
              <PluginOutlet @name="after-topic-list-item" @args={{hash topic=topic index=index}} @connectorTagName="tr" />
            {{/each}}
          </tbody>
          
          <PluginOutlet @name="after-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled

通过 filteredList 进行迭代。

我找到了一个可能填充它的地方，但不确定如何“扩展”它。似乎有一个 queryParam 系统和一些可以影响结果集的路由内容，但我没有理解。

github.com/discourse/discourse

app/assets/javascripts/discourse/app/components/topic-list.js

dc5dc7830


      
          
          export default Component.extend(LoadMore, {
            tagName: "table",
            classNames: ["topic-list"],
            classNameBindings: ["bulkSelectEnabled:sticky-header"],
            showTopicPostBadges: true,
            listTitle: "topic.title",
            canDoBulkActions: and("currentUser.staff", "selected.length"),
          
            // Overwrite this to perform client side filtering of topics, if desired
            filteredTopics: alias("topics"),
          
            _init: on("init", function () {
              this.addObserver("hideCategory", this.rerender);
              this.addObserver("order", this.rerender);
              this.addObserver("ascending", this.rerender);
              this.refreshLastVisited();
            }),
          
            @discourseComputed("bulkSelectEnabled")
            toggleInTitle(bulkSelectEnabled) {

有人能指出正确的地方吗？

我们正在使用上述主题组件，这意味着我们在可以做什么方面受到限制。
如果有人能向我展示如何仅将 filteredList 限制为未读帖子主题，那将对我很有帮助——然后我就可以自己解决了。

非常感谢！

CC @pfaffman

JammyDodger · 2022 年8 月 20 日 19:23

仅供参考，Topic List Thumbnails 是一个 Customization > Theme component，而不是插件。

Sören_Geier · 2022 年8 月 20 日 20:44

是的，谢谢，我注意到了，但错过了正确的术语。正在调整。

Sören_Geier · 2022 年8 月 23 日 06:11

Jammy，我添加了一个tldr。你对这个缩短的问题有什么线索吗？
谢谢

JammyDodger · 2022 年8 月 23 日 07:40

恐怕这超出了我的能力范围。

您是否查看了 Developing Discourse Themes & Theme Components 中的如何修改类？也许里面有什么可以帮助您。如果您拓宽关键词，搜索也能找到一些有用的示例？

Joe:

modifyClass()

您可以使用此方法来扩展或覆盖类中的方法，例如组件或控制器（阅读：Ember Classes ），但它也是获取信息和设置变量的好方法。
api.modifyClass('controller:composer', {
  actions: {
    newActionHere() { }
  }
});

Sören_Geier · 2022 年8 月 23 日 09:54

是的，谢谢你，Jammy，我知道这些事情，而且我还写了一些私有插件（或对其进行了扩展）。但问题是，我不明白列表在哪里聚合，以及整个 QUERYING TOPICs 逻辑是如何工作的，或者它实际上在哪里。如果我知道这两件事中的任何一件，我就可以继续前进。

Sören_Geier · 2022 年8 月 24 日 10:12

由于我在 Git 代码中看到了这些人，因此我将把他们添加为抄送。

JammyDodger · 2022 年8 月 24 日 10:45

仅供参考，以这种方式标记团队成员是极其糟糕的 Meta 礼仪，因此我已删除这些标记，以免形成他人可能模仿的模式。

很抱歉您的主题未能获得更多关注。我对此并不了解，因此恐怕无法直接回答。

您的研究/尝试有进一步的进展吗？

Sören_Geier · 2022 年8 月 24 日 11:51

我以为我把正确的人抄送给他们很聪明🤣

而且没有，我还没有取得任何进展。我尝试了三次显示主题列表，然后在每个主题中隐藏不需要的主题，但之后“加载更多”功能启动了，DOM 的大部分被重写了，我的 JS 计算变得太重，导致了奇怪的效果。

我想我必须使用 Discourse 提供的 API 正确地完成它。

Sören_Geier · 2022 年8 月 27 日 07:34

我在这里取得了重大进展，并且在此过程中还有一些问题：

是否有我可以用来获取所有已固定主题的 API 端点？类似于 /latest.json 或 /top.json？
是否有我可以在插件中使用（假设我在插件中）的 JS 命令来强制主题列表在我对主题列表项的状态进行更改后重新渲染，以便更改立即反映出来？我想我必须使用 topics. 的观察者？

另外，我找到了以下文章，其中包含了我自定义所需主题列表所需的一切。

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

nathank · 2022 年9 月 6 日 10:08

很高兴你取得了进展——你显然是在探索未知领域！

Sören_Geier · 2022 年9 月 6 日 10:15

可以通过查询 /search.json?expanded=true&q=in%3Apinned 来获取置顶主题
在没有实际搜索关键字的情况下使用搜索。

这只会返回主题 ID 列表，或者可以说是一个简化的主题数据集。您必须发出后续的 ajax 请求到 /t/${topic.id}.json 来获取围绕主题的完整数据集。

我仍然对如何通过 JS 强制重新渲染主题列表感兴趣。

话题		回复	浏览量
Filtered Topic Lists Theme component	14	979	2025 年12 月 22 日
Latest/Hot/Top - what about Best/Popular? Request for automatic selection Support	3	204	2024 年7 月 7 日
Topics list filter feature Feature feedback , topic-filter	41	4761	2024 年11 月 24 日
Filtering topic lists in Discourse Using Discourse search , reference , topic-filter	19	1287	2026 年4 月 3 日
Featured Lists Theme component	29	2295	2026 年2 月 18 日

自定义主题列表条目（排序、分组、过滤）以实现更好的组织

相关话题