How do I customise the styling of "solved topics" in the main list?

AI 生成的摘要

The discussion revolves around customizing the styling of “solved topics” in the main list. Jerome_Bouvard initially asked how to change the background color of a solved topic on the main page, but downey and sam mentioned that it’s not possible without adding a custom class.

sam provided a CSS solution to style the accepted answer on the topic page, but not the main list. alxsal and ggurbet requested support for changing the background color of solved topics on the main page. sam stated that it’s not currently supported, but it could be added in the future.

Johani provided a solution using the api.addPostClassesCallback method, which adds a topic-solution class to posts marked as the answer. This allows for styling of solved topics on the main list. loginerror also provided a workaround using JavaScript, but Johani’s solution is more straightforward and efficient.

The solution is a simple JavaScript code snippet that adds the topic-solution class to posts marked as the answer:

api.addPostClassesCallback((attrs) => {
  if (attrs.accepted_answer) return ["topic-solution"];
});

This allows for styling of solved topics on the main list using CSS.

Perfect plugin for me :smile:
How can I change the background color of a solved topic on the main page ?
Like some nice green to show everyone that this topic has a solution !
Best,
J.

You should be able to do it by targetting the post class via CSS.

Are you talking about the main list of all topics? If so, I don’t think this is possible.

If it’s on the topic page itself, AFAIK this is not possible either, because the only change to the “question” (first post) is the insertion of a paragraph in the post. You can style the post of the accepted solution, though, with CSS.

If someone knows a way, please share it because I also spent some time trying to do this. :wink:

I never added support for that, but on the actual topic page you can easily change it with

.topic-post.accepted-answer .topic-body {
  background-color: #E9FFE0;
}

Sorry for reviving this very old topic, but I had the exact same question :

Is changing the background color of solved topic on the main page now supported ?
We would like to make it more visible on topic lists / search results if a topic has an accepted answer or not.

No we do not yet decorate rows in the topic list with a .solved class. Not against adding this if we can do that with no performance impact.

我认为在某个时间点,.accepted-answer 类已从该 div 中移除。能否将其加回来,以便我们可以为已采纳的答案帖子设置不同的样式?

在另一个主题中,@awesomerobot 提到该类已添加到首帖的引用中。但我未在帖子主体中找到它:

那个类肯定是可见的

是的,在首帖的引用里确实有。但我指的是包含答案的正文部分。

我同意为已解决帖子的 div.topic-body 添加一个类是有用的。

我可以想到这样一个变通方法:

<script type="text/discourse-plugin" version="0.8.42">
api.onPageChange((url) => {
  $('button.accepted').parents('div.topic-body:first').toggleClass('solved-post-container', true);
});
</script>

配合一些 CSS 样式:

.solved-post-container {
outline: 3px !important;
outline-color: var(--success) !important;
outline-style: solid !important;
}

但我认为仍然需要某种针对“标记为已解决”操作的钩子,以便在帖子被取消解决时移除轮廓(这可能是一个边缘情况,但最好能覆盖到)。

为已解决帖子的主体添加一个类应该能解决这个问题 :slight_smile:

TL;DR

这将为标记为答案的帖子添加一个 topic-solution 类。

api.addPostClassesCallback((attrs) => {
  if (attrs.accepted_answer) return ["topic-solution"];
});

帖子所拥有的类是在此处确定的。

您需要的钩子已经存在于该文件的末尾……如下所示。

plugin-api 提供了一个方法,允许您根据条件为帖子添加类。

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L819-L829

其作用是应用给定的回调,并在条件满足时返回要添加的类。

当回调被触发时,Discourse 会将帖子属性传递给它。因此,您可以执行类似以下的操作。

api.addPostClassesCallback((attrs) => {
  console.log(attrs);
});

如果您检查控制台,会看到它显示了每个帖子的属性。

这些只是示例,其中还有更多内容。

幸运的是,当帖子被标记为解决方案时,Discourse 会记录这一点,并将其添加到帖子属性中。该属性名为 accepted_answer。

因此,您只需检查该属性是否为真,如果为真则添加自定义类。如下所示:

api.addPostClassesCallback((attrs) => {
  if (attrs.accepted_answer) return ["topic-solution"];
});

这足以切换类,即使原始发布者(OP)改变主意并选择了不同的解决方案。它将从旧答案中移除该类,并将其添加到新答案中。

太棒了,非常感谢!:slight_smile: