# 自定义提及颜色

**URL:** https://meta.discourse.org/t/customize-mention-colors/219023
**Category:** Developers
**Tags:** how-to
**Created:** [2022年二月22日 03:59 UTC](https://meta.discourse.org/t/customize-mention-colors/219023 "2022-02-22T03:59:40Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Alexander](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alexander/32/497634_2.png) [@Alexander](https://meta.discourse.org/u/Alexander)
#### Post date: [2022年二月22日 03:59 UTC](https://meta.discourse.org/t/customize-mention-colors/219023/1 "2022-02-22T03:59:40Z")

</div>

受 [此主题](https://meta.discourse.org/t/custom-categories-and-tags-mention/39225) 和 Discord 角色自定义颜色的启发，我编写了这段非常简单的代码，它为群组和用户的提及添加了 `data-mention`，这样就可以通过 CSS 设置不同的颜色（而不是“通用颜色”）：smile:

目前的代码是 JQuery，但将来我也会将其更改为 Vanilla JavaScript：sweat\_smile:

* * *

要应用它，只需将代码粘贴到你的主题或组件的头部：

```html
<script type="text/discourse-plugin" version="0.9">
$(document).ajaxSuccess(() =>{
  $('a.mention').each(function() {
    $(this).attr('data-mention', $(this).text().replace('@', ''));  
   });
  $('a.mention-group').each(function() {
   $(this).attr('data-mention', $(this).text().replace('@', ''));  
   });
});
</script>

```

之后，你可以通过 CSS 应用所需的样式：partying\_face:

例如：

```css
a.mention[data-mention="Alexander"] {
  color: #4527a0 !important;
}

```

![CapturaMentionUser](https://global.discourse-cdn.com/meta/original/3X/6/c/6cacf59bada15e604aa436a0ada30f6c52adaf14.png)

* * *

在这种情况下，它是针对特定用户名的，但它也适用于群组，使用 `a.mention-group[data-mention="group-name"]`

* * *

我将研究如何将其制作成一个主题组件，可以从其“设置”中自定义，而无需修改 CSS：thinking:

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2022年二月22日 09:58 UTC](https://meta.discourse.org/t/customize-mention-colors/219023/2 "2022-02-22T09:58:57Z")

</div>

我只是把它发出来。我认为这与这个话题很相符。尤其是这个

> [@Alexander](#):
>
> 它也适用于使用 `a.mention-group[data-mention="group-name"]` 的组

> [@Make staff users more recognizable with customized avatars, posts, and mentions](https://meta.discourse.org/t/how-to-make-a-staff-user-more-recognizable/142794):
>
> There are various methods that can be used to make a staff user immediately recognizable to other users. Show moderator shield Any staff user who is moderator, or admin and moderator, will have the moderator shield next to the username. left_speech_bubble Tips: the shield will not appear if the staff user has the role of admin but not moderator. CSS to change color of the shield play_button Change color for all Staff usersplay_button Change color differentiating ADMIN users from MOD users CSS to h…

---

<div class="post-metadata">

### Author: ![kinetiksoft](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kinetiksoft/32/229578_2.png) [@kinetiksoft](https://meta.discourse.org/u/kinetiksoft)
#### Post date: [2023年七月7日 09:58 UTC](https://meta.discourse.org/t/customize-mention-colors/219023/3 "2023-07-07T09:58:25Z")

</div>

是否可以进行调整，以便为属于该组的每个人的提及着色？

---

<div class="post-metadata">

### Author: ![martyn\_thomas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/martyn_thomas/32/344874_2.png) [@martyn\_thomas](https://meta.discourse.org/u/martyn_thomas)
#### Post date: [2023年十二月13日 17:04 UTC](https://meta.discourse.org/t/customize-mention-colors/219023/4 "2023-12-13T17:04:32Z")

</div>

+1

我正在寻找一种方法来识别某个主题中不在某个组（或在某个组）中的用户，该主题包含用户提及列表。