你好！
我不太确定如何着手做这件事，正在寻求一些帮助。
基本上，我想在置顶主题和常规主题之间进行视觉分隔。这将用于一家游戏工作室的社区论坛，这种分隔对用户来说会很有帮助。
我想要的是这样的：
[PINNED] 主题名称
常规主题
而不是：
[PINNED] 主题名称
常规主题
我已经更改了置顶主题的背景颜色，以在两者之间创建细微差别。我尝试过 CSS，虽然有效，但只在页面刷新时才生效。
我尝试创建自己的主题组件，但在这里我遇到了困难，因为我需要添加一些东西，但我不确定在哪里添加。
我的目标是在原始（常规主题）tbody 之前添加 <tbody> class="pinned-topics">。
任何指导都将不胜感激！
您可以使用主题组件 Filtered Topic Lists 并配合 in:pinned 查询。\n\n如果您想坚持使用 CSS，可以这样做：\n\ncss\n// 定位列表中的最后一个置顶项\ntr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {\n // 强制表格行内添加空间的粗略方法\n padding-bottom: 1.8em;\n}\n\ntr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {\n // 如果需要，在此空间中显示的内容\n content: 'regular';\n width: 100%;\n position: absolute;\n display: flex;\n height: 1em;\n left: 0;\n right: 0;\n bottom: 0;\n justify-content: center;\n border-top: 1px solid var(--primary-low);\n}\n
感谢您的帮助！但不幸的是，这并没有奏效。我有一个插件尝试，应该能完成我需要的功能，但我似乎无法在 Discourse 3.4.0-beta2 上运行它。
如果您能在这方面提供任何帮助，我将不胜感激！
嘿 Terise，
我看了一下你的代码，你很接近了！
以下是一些反馈：
你可以用一个主题组件（而不是插件）来修改它。我建议你使用这个模板：GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes
使用连接器是正确的。正确的路径是 /discourse/connectors/…
连接器传递的参数可以用 outletArgs 检索。你可以在这里看到连接器：
这意味着应该是这样的：
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"> </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"> </td>
</tr>
{{/if}}
（如果你知道你不会对该元素做任何事情，你可以将 tbody 保留在模板中并使用 tagName("")）。
然后，你会得到这个：
我没有仔细检查是否有更好的方法。
我只是想帮你让你的代码正常工作！
我是否需要在 components 目录中放置任何东西，或者所有文件都将驻留在 connectors 中？
我之所以将其作为插件而不是主题组件，唯一的原因是我计划以后添加更多功能。
在此连接器和代码上下文中，您不需要 components 目录。
您可以在我的截图中看到它，因为我修改了一个现有组件。
话虽如此，这取决于您之后想做什么。也可以在连接器中创建一个引用另一个组件的组件（这个组件可以放在 components 目录中）。
太好了，非常感谢！
如果可以的话，我还有一个最后的问题。有没有办法阻止置顶主题出现在普通主题列表中，以免置顶主题重复出现？
编辑： 我实际上已经通过一些 CSS 实现了这个功能。
再次感谢您的帮助！
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
