上面使用的 unboundClassNames() 方法负责添加到组件元素的类。换句话说，就是 .topic-list-item 或 .latest-topic-list-item HTML 元素。你可以在这里看到：
和这里：
Ember 会获取该方法返回的任何字符串，并将其作为 class 属性添加到元素本身。
如果你想向该元素的子元素添加类，你需要使用其他方法。
posters 属性中的每个发帖人都有一个名为 extras 的属性。此属性用作渲染时添加到头像的额外类的标志。
它在这里设置：
并在以下位置使用：
因此，你可以根据条件向主题列表中的头像添加类，如果你扩展了该属性。
你可以在组件接收其属性时使用 @on 装饰器来调用一个方法来实现这一点。由于我们已经在修改这些组件类，我们可以将这种新行为合并到上面的代码中。
这是我们最终得到的结果：
在初始化器中：
import { apiInitializer } from "discourse/lib/api";
import discourseComputed, { on } from "discourse-common/utils/decorators";
export default apiInitializer("0.11.1", (api) => {
const PLUGIN_ID = "hide-ignored-op-topics";
const IGNORED_TOPIC_CLASS_STRING = " ignored-op-topic";
const IGNORED_AVATAR_CLASS_STRING = " ignored-user-avatar";
const user = api.getCurrentUser();
if (!user) {
return;
}
const ignoredUsers = user.ignored_users;
function isIgnoredUser(poster) {
return ignoredUsers.includes(poster.user.username);
}
function addIgnoredTopicClass() {
let classList = this._super(...arguments);
const topicCreator = this.topic.posters[0];
if (isIgnoredUser(topicCreator)) {
classList += IGNORED_TOPIC_CLASS_STRING;
}
return classList;
}
function addIgnoredAvatarClass() {
this.topic.posters.forEach((poster) => {
if (isIgnoredUser(poster)) {
// default raw topic-lists
poster.extras += IGNORED_AVATAR_CLASS_STRING;
// categories page topic lists
poster.user.set("extras", IGNORED_AVATAR_CLASS_STRING);
}
});
}
api.modifyClass("component:topic-list-item", {
pluginId: PLUGIN_ID,
@discourseComputed()
unboundClassNames() {
return addIgnoredTopicClass.call(this);
},
@on("didReceiveAttrs")
ignoredAvatarClass() {
addIgnoredAvatarClass.call(this);
},
});
api.modifyClass("component:latest-topic-list-item", {
pluginId: PLUGIN_ID,
@discourseComputed()
unboundClassNames() {
return addIgnoredTopicClass.call(this);
},
@on("didReceiveAttrs")
ignoredAvatarClass() {
addIgnoredAvatarClass.call(this);
},
});
});
这应该会在由被忽略用户发起的主题列表项上添加一个 ignored-op-topic CSS 类，并在海报列中的每个被忽略用户的头像上添加一个 ignored-user-avatar CSS 类。
我们已经有了上面 .ignored-op-topic 的 CSS。
// 我们在这里不使用 display: none; 因为我们不想影响 load-more
.ignored-op-topic {
height: 0;
width: 0;
position: fixed;
bottom: 0;
}
现在，你想隐藏海报列中被忽略用户的头像。
不要这样做。这会造成很多混淆。
如果被忽略的用户回复了一个主题，并且该主题被顶上来了，但你隐藏了他们的头像怎么办？这会让人看起来像是别人顶了该主题。
另外，分类页面主题标题旁只有一个头像。如果最后回复是被忽略的用户，会发生什么？没有头像？
你可以看到这些情况会给你的用户带来不愉快的体验。
与其隐藏被忽略用户的头像，不如用 SVG 图标替换它们。所有被忽略的用户都会有相同的头像。你可以用 CSS 来实现这一点：
.ignored-user-avatar {
background: white;
border: 1px solid transparent;
box-sizing: border-box;
opacity: 0.5;
content: svg-uri(
'\u003csvg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"\u003e\u003cpath d="m256 0c141.385 0 256 114.615 256 256s-114.615 256-256 256-256-114.615-256-256 114.615-256 256-256zm0 105c-83.262 0-151 67.74-151 151s67.737 151 151 151 151-67.736 151-151-67.74-151-151-151zm-52.816 130.621a22.119 22.119 0 1 0 0-44.237 22.119 22.119 0 0 0 0 44.237zm127.749-22.121a22.116 22.116 0 0 0 -22.12-22.12 22.119 22.119 0 1 0 22.12 22.12zm-40.233 70.79a9.439 9.439 0 0 0 -13.35-13.347l-21.35 21.357-21.352-21.357a9.438 9.438 0 1 0 -13.348 13.347l21.352 21.352-21.352 21.358a9.438 9.438 0 1 0 13.347 13.347l21.353-21.355 21.351 21.351a9.439 9.439 0 0 0 13.349-13.343l-21.352-21.354z"/\u003e\u003c/svg\u003e'
);
}
它将渲染如下：
并且在 latest-topic-list-item 上也是如此。将 SVG 更改为您想使用的任何图标。
言归正传……
我回答了你的问题，因为这是一个谈论如何自定义主题列表的好机会。然而，我对你的用例有很多保留。隐藏被忽略用户头像的需求表明存在潜在问题。说
“这个人写的东西我不敢兴趣。我会忽略他们以减少噪音。”
这是一种情况，但说
“即使看到这个人的头像也会引起我的情绪反应。我再也不想看到他们的头像了。”
这是完全不同的情况。
你比任何人都了解你的社区……但这可能值得深入研究。
