# 尝试以颜色显示自己的回复

**URL:** <https://meta.discourse.org/t/trying-to-show-self-replies-in-color/122410>\
**Category:** Feature\
**Created:** [2019年七月9日 06:42 UTC](https://meta.discourse.org/t/trying-to-show-self-replies-in-color/122410 "2019-07-09T06:42:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)\
**Post date:** [2019年七月9日 06:42 UTC](https://meta.discourse.org/t/trying-to-show-self-replies-in-color/122410/1 "2019-07-09T06:42:32Z")

</div>

你好，  
我正在尝试为“话题-回复”中的用户添加一个新类，用于标识用户回复自己的情况。实际上，我希望在话题中以不同的样式显示用户自发的消息。  
当模板设计得像即时通讯应用时，这个功能非常实用。

请问这个功能是否已经在某处定义过了？

---

<div class="post-metadata">

**Author:** ![vinothkannans](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinothkannans/32/86465_2.png) [@vinothkannans](https://meta.discourse.org/u/vinothkannans)\
**Post date:** [2019年七月9日 08:21 UTC](https://meta.discourse.org/t/trying-to-show-self-replies-in-color/122410/2 "2019-07-09T08:21:22Z")

</div>

这已经可以通过 `.topic-owner` CSS 类实现。您可以使用以下 CSS 来高亮显示自己的回复

```css
.topic-owner .topic-body {
  background: #fffaaa;
}

```

---

<div class="post-metadata">

**Author:** ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)\
**Post date:** [2019年七月9日 10:56 UTC](https://meta.discourse.org/t/trying-to-show-self-replies-in-color/122410/3 "2019-07-09T10:56:18Z")

</div>

但是 `topic-owner` 类仅被分配给话题创建者的回复。我需要另一个类（例如命名为 `my-own`），以便在登录用户撰写其他回复时将其添加进去。

就像即时通讯应用一样，将我的回复显示在右侧，其他人的回复显示在左侧的气泡中。

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2019年七月9日 13:54 UTC](https://meta.discourse.org/t/trying-to-show-self-replies-in-color/122410/4 "2019-07-09T13:54:02Z")

</div>

您可以通过将以下代码添加到主题的头部（或主题组件的头部）来实现：

```js
<script type="text/discourse-plugin" version="0.8">
    const currentUser = api.getCurrentUser();
    api.addPostClassesCallback((attrs) => {
        if (currentUser && currentUser.id === attrs.user_id) {
            return ["post-by-current-user"];
        } else {
            return [];
        }
    });
</script>

```

之后，您可以在样式表中使用该 `post-by-current-user` 类。

---

<div class="post-metadata">

**Author:** ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)\
**Post date:** [2019年七月9日 15:30 UTC](https://meta.discourse.org/t/trying-to-show-self-replies-in-color/122410/5 "2019-07-09T15:30:43Z")

</div>

> [@pmusaraj](#):
>
> 然后你可以在样式表中使用 `post-by-current-user` 类。

哇，我原以为这样做需要很多改动。  
Discourse 真的很令人兴奋……

非常感谢！