分离置顶主题

[Arkshine]

嘿 Terise，

我看了一下你的代码，你很接近了！

以下是一些反馈：

• 你可以用一个主题组件（而不是插件）来修改它。我建议你使用这个模板：GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes

• 使用连接器是正确的。正确的路径是 /discourse/connectors/…
  

  

• 连接器传递的参数可以用 outletArgs 检索。你可以在这里看到连接器：

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136

这意味着应该是这样的：

export default class PinnedTopicBody extends Component {
  get pinnedTopics() {
    return this.outletArgs.topics.filter((t) => t.get("pinned"));
  }
}

以及模板：

{{#if this.pinnedTopics}}
  <tbody class="pinned-topics">
    {{#each this.pinnedTopics as |topic|}}
      <TopicListItem
        @topic={{topic}}
        @bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
        @lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
        @selected={{@outletArgs.selected}}
        @hideCategory={{@outletArgs.hideCategory}}
        @showPosters={{true}}
      />
    {{/each}}
    <tr class="table-break">
      <td colspan="10">&nbsp;</td>
    </tr>
  </tbody>
{{/if}}

• 注意：不幸的是，showPosters 不是作为参数传递的；你必须在这里硬编码它的值。

• 注意：默认情况下，它看起来像这样：
  

  

它会生成一个带有唯一 ID 的 div 包装器，并弄乱 CSS。但是，如果你想将操作绑定到该元素，这是必需的。

你可以使用 tagName 和 classNames 来自定义包装器。

import { classNames, tagName } from "@ember-decorators/component";

@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
  ...
}

{{#if this.pinnedTopics}}
  {{#each this.pinnedTopics as |topic|}}
    ...
  {{/each}}
  <tr class="table-break">
    <td colspan="10">&nbsp;</td>
  </tr>
{{/if}}

（如果你知道你不会对该元素做任何事情，你可以将 tbody 保留在模板中并使用 tagName("")）。

然后，你会得到这个：

我没有仔细检查是否有更好的方法。
我只是想帮你让你的代码正常工作！