# 让工作人员用户通过自定义头像、帖子和提及更易识别

**URL:** https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794
**Category:** Site Management
**Tags:** css, how-to, users
**Created:** [2020年四月23日 16:48 UTC](https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794 "2020-04-23T16:48:00Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2020年四月23日 16:48 UTC](https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794/1 "2020-04-23T16:48:00Z")

</div>

有多种方法可以让工作人员用户立即被其他用户识别。

## 显示版主徽章

任何是版主，或既是管理员 **又** 是版主的工作人员用户，其用户名旁边都会显示版主徽章。

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/0/801c1ad0871d19001bfae0aba5b3efe3df5ba6aa.png)

> 🗨 **提示** ：_如果工作人员用户的角色仅是管理员而非版主，则徽章不会显示。_

**更改徽章颜色的 CSS**

> **更改所有工作人员用户的徽章颜色**
>
> ```css
> /*更改所有工作人员用户的徽章颜色*/
> span.username.staff .d-icon.d-icon-shield-halved {
> color: #00A9DB;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/5/8/58998c71e68c558a31915da17282e83a26f66069.png)
> 
> 若要更改徽章在所有出现位置的颜色（不仅限于主题中）：
> 
> ```plaintext
> span.username.staff .d-icon.d-icon-shield-halved,
> .user-card .first-row .names .d-icon.d-icon-shield-halved,
> .user-profile-names .d-icon.d-icon-shield-halved {
> color: #00A9DB;
> }
> 
> ```

> **区分管理员用户和版主用户的徽章颜色**
>
> ```css
> /*区分管理员用户和版主用户的徽章颜色*/
> span.username {
> &.moderator .d-icon.d-icon-shield-halved {
> color: green;
> }
> 
> &.admin .d-icon.d-icon-shield-halved {
> color: red;
> }
> } 
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/8/3/837dcc336d3511e4d17eca0f5f7681007c0e89f0.png)

**隐藏徽章的 CSS**

> **仅在帖子中隐藏徽章**
>
> ```css
> .names .svg-icon-title {
> display: none;
> }
> 
> ```

> **在帖子和用户卡片中隐藏徽章**
>
> ```css
> .names .svg-icon-title, 
> .user-card .names .d-icon.d-icon-shield-halved {
> display: none;
> }
> 
> ```

## 添加头衔

任何工作人员用户都可以访问 `/admin/users/list/staff` 并为其自己的账户创建头衔。该头衔将显示在工作人员用户的用户名旁边：

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/d/ad094656d0c4342ec74c97123ff286819d07d928.png)

示例如下：

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/c/0c62e01e96d1da579edf0d6f2f1b07d963a6caaf.png)

#### **自定义现有头衔的 CSS**

> **自定义工作人员成员的头衔**
>
> ```css
> .names .staff ~ .user-title {
> background: #00A9DB;
> color: white;
> padding: 3px 5px;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/7/7/7718b543654c0d0e01d11ae31ded2bc70226c7ec.png)

> **区分管理员和版主用户的头衔颜色**
>
> ```css
> .names {
> .moderator ~ .user-title {
> background: green;
> color: white;
> padding: 3px 5px;
> }
> 
> .admin ~ .user-title {
> background: red;
> color: white;
> padding: 3px 5px;
> }
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/e/4/e45b14be5e57f0851fcbb85b2a68ecc027f5bc37.png)

> 🗨 **提示** ：_您组织的工作人员用户不必是实际站点管理员或版主，他们可以是没有任何特殊权限的普通成员。若要自定义他们的头衔，只需创建一个新自定义群组，[将其设置为主要群组](https://meta.discourse.org/t/what-does-selecting-primary-group-for-a-user-do/) 并添加必要的用户即可。可以设置一个 **自动头衔** ，默认分配给所有成员。_

> **自定义属于主要自定义群组的非管理员和非版主用户的头衔**
>
> 将 `YOUR-CUSTOM-GROUP` 替换为群组名称，在下面的示例中是 `.group--community ~ .user-title` 等。
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/1/0/109fecc88441d7e0b8f4495c6f8145a4beb71c4c.png)
> 
> ```css
> .group--YOUR-CUSTOM-GROUP ~ .user-title {
> background: #00A9DB;
> color: white;
> padding: 3px 5px;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/7/5/758bab3aa66ae291c07e5cfb12b53faab6730b7a.png)

请注意，用户可以在用户资料中选择其他头衔（而不是分配的头衔）——在这种情况下，帖子上的头衔将变为用户选择的头衔——也可以将其配置为“无”——在这种情况下将不显示任何头衔。

为避免这种情况，可以创建一个完全自定义的头衔，使其无法从用户端编辑。

**从头开始创建自定义头衔的 CSS**

示例：

![image](https://global.discourse-cdn.com/meta/original/3X/f/2/f27099bb27bd3b285c595abf845908562891dbe4.png)

> **在用户名后添加头衔的提示**
>
> ```css
> /*在所有工作人员用户后显示自定义头衔
> 如果站点设置“在 UX 中优先显示用户名”被禁用，则不会显示*/
> .username.staff::after {
> content: '工作人员用户';
> color: #00A9DB;
> border: 1px solid #00A9DB;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> display: inline-block;
> }
> 
> /*可选 - 在用户卡片中减小尺寸*/
> .user-card .username.staff::after {
> font-size:.7em;
> margin-left:0px;
> }
> 
> /*可选 - 仅在帖子中隐藏版主徽章*/
> .names .svg-icon-title {
> display:none;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/8/5/85e847b1f13ccc125e092a68f898bf6cc199272f.png)
> 
> ```css
> /*在用户名后显示自定义头衔，区分管理员用户和版主用户
> 如果站点设置“在 UX 中优先显示用户名”被禁用，则不会显示*/
> .username {
> &.admin:after {
> content: '管理员用户' !important;
> color: red !important;
> border: 1px solid red !important;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> display: inline-block;
> }
> 
> &.moderator:after {
> content: '版主用户';
> color: green;
> border: 1px solid green;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> display: inline-block;
> }
> }
> 
> /*可选 - 仅在帖子中隐藏徽章图标*/
> .names .svg-icon-title {
> display: none;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/9/f/9fd32524ea7d9c14403a527ef2bd462b74198a19.png)

> **在姓名后添加头衔的提示**
>
> ```css
> /*在所有工作人员成员后显示自定义头衔*/
> span.staff :after {
> content: "工作人员";
> color: white;
> background-color: #00A9DB;
> border-radius: 8px;
> margin-left:5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/7/3/735fc2cf048f40f183e3d2ca54674516a5892d03.png)
> 
> ```css
> /*在姓名后显示自定义头衔，区分管理员用户和版主用户*/
> span {
> &.admin :after {
> content: "管理员" !important; 
> color: white;
> background-color: red !important;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
> 
> &.moderator :after {
> content: "版主";
> color: white;
> background-color: green;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/8/6/86c82e2b7c4100af6e3c0b61f8b2620bb267d8a6.png)

> **问题：我可以同时添加两个自定义头衔吗？**
>
> 可以，尽管这样会有些冗余。请参见以下示例：
> 
> ```css
> .username.staff::after {
> content: '工作人员用户';
> color: #00A9DB;
> border: 1px solid #00A9DB;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> display: inline-block;
> }
> 
> /*可选 - 在用户卡片中减小尺寸*/
> .user-card .username.staff::after {
> font-size:.7em;
> margin-left:0px;
> }
> 
> /*可选 - 隐藏版主徽章*/
> .names .svg-icon-title {
> display:none;
> }
> 
> span {
> &.admin :after {
> content: "管理员" !important; 
> color: white;
> background-color: red !important;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
> 
> &.moderator :after {
> content: "版主";
> color: white;
> background-color: green;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/e/2/e2a666154e7a6e30b6a6cdcf8063c960a1dd3c60.png)

## 添加头像装饰

您可以在工作人员用户头像的右下角添加装饰：

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/6/76df9e993b9011a14fa6d2ee045490e6d47908d3.png)

您需要创建一个自定义群组，将工作人员用户添加为成员，并将该群组设为主要群组。详细信息请参阅 [https://meta.discourse.org/t/create-a-group-that-automatically-adds-associated-flair-to-its-members-avatars/82700。](https://meta.discourse.org/t/create-a-group-that-automatically-adds-associated-flair-to-its-members-avatars/82700%E3%80%82)

如果您想添加 **自定义图片** 而不是图标，可以将其上传到您的网站，并按照 [在远程主题和组件中包含资源](https://meta.discourse.org/t/include-images-and-fonts-in-themes-and-components/62459) 指南中描述的方式使用 URL。在主题的_上传_部分添加图片后，将出现图片的变量及其直接链接。右键单击直接链接并复制链接，然后将其粘贴到“头像装饰图片”字段中。

## 自定义工作人员姓名和用户名

使用一些 CSS，您可以自定义帖子中工作人员的用户名。

请注意，以下所示的仅为示例，每个人都可以按照自己的喜好修改样式！

### 更改_用户名_颜色

默认情况下，用户名显示在完整姓名之前。

> **更改所有工作人员用户的用户名颜色**
>
> ```css
> span.username.staff a {
> color: #00A9DB;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/0/6/0654fb291f5f44ca02828f23bd3689b85e469749.png)
> 
> ```css
> 
> ```

> **区分管理员和版主用户的用户名颜色**
>
> ```css
> span.username {
> &.moderator {
> a {
> color: green;
> }
> }
> 
> &.admin {
> a {
> color: red;
> }
> }
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/d/a/dac07d17fc739dc6e857ff0d000f1df2fbcad503.png)
> 
> 此变体使用了（几乎）与自定义头衔相同的 CSS。
> 
> ```css
> span.username {
> &.moderator {
> a {
> color: white;
> background-color: green;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> }
> }
> 
> &.admin {
> a {
> color: white;
> background-color: red;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> }
> }
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/8/a/8ac34d69f4d9511025eff7491e25a7b527c26450.png)

### 更改_姓名_颜色

如果您希望完整姓名显示在用户名之前，请启用站点设置 `在帖子中显示姓名` 并禁用 `在 UX 中优先显示用户名`。

> **更改所有工作人员用户的姓名颜色**
>
> ```css
> .names span.staff a {
> color: #00A9DB;
> } 
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/5/5/559dfa4befd3e3e73c8f4f9a98d9b681c096f65d.png)
> 
> 此变体使用了（几乎）与自定义头衔相同的 CSS。
> 
> ```css
> .names span.staff a {
> color: #00A9DB;
> background-color: #D3F5FF; /*使用浅色*/
> border: 1px solid #00A9DB;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/e/4/e4a80aff834001e87f88a90e01f52babf4b6690a.png)

> **区分管理员和版主用户的姓名颜色**
>
> ```css
> .names span {
> &.moderator {
> a, i {
> color: green;
> }
> }
> 
> &.admin {
> a, i {
> color: red;
> }
> }
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/a/4/a40c788c3edadcf987b597914f2378c99406eb79.png)
> 
> 此变体使用了（几乎）与自定义头衔相同的 CSS。
> 
> ```css
> .names span {
> &.moderator {
> a {
> color: green;
> border: 1px solid green;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> }
> }
> 
> &.admin {
> a {
> color: red;
> border: 1px solid red;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> }
> }
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/7/2/72993889ff444a2cf02a68d9f12244c0703be4ce.png)

> 🗨 **提示** ：_出于某种原因，您可能希望自定义单个工作人员成员——也许是站点创始人或特别受重视的成员。以下是如何针对单个用户的示例——是的，同样的方法可用于任何用户，即使是非工作人员用户_。
> 
> > **用户名**
> >
> > ```css
> > /*将 USERNAME 替换为用户的用户名*/
> > .topic-meta-data .names span.username a[data-user-card=USERNAME] {
> > color: blue;
> > }
> > 
> > ```
> > 
> > ![image](https://global.discourse-cdn.com/meta/original/3X/7/6/7658195993fe23e3d486e8abb1c1ae8828f5ed09.png)
> 
> > **姓名**
> >
> > ```css
> > /*将 USERNAME 替换为用户的姓名*/
> > .topic-meta-data .full-name a[data-user-card=USERNAME] {
> > color: blue;
> > }
> > 
> > ```
> > 
> > ![image](https://global.discourse-cdn.com/meta/original/3X/e/e/ee9e0c8b02c687d2c355e15c2c97743d6bfd51f8.png)
> 
> > **姓名和用户名**
> >
> > ```css
> > .topic-meta-data .names span a[data-user-card=USERNAME] {
> > color: blue;
> > }
> > 
> > ```
> > 
> > ![image](https://global.discourse-cdn.com/meta/original/3X/1/0/10476ef684345d88143fc2238134a9287d254659.png)

## 自定义工作人员帖子背景

工作人员用户可以手动使用帖子上的 添加工作人员颜色 按钮添加工作人员颜色。

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/9/c9b5130ad6518d2c0c70d9cf53b037577660cee5.png)

结果如下：

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/4/6413cf82c9088a888bf7bffba69a422d9f889d42.png)

> **为整个帖子添加背景颜色**
>
> 添加几行 CSS 代码后，当点击 添加工作人员颜色 按钮时，背景颜色将应用于整个帖子。
> 
> ```css
> .moderator {
> .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
> background: #ffffd0; /*在此处更改颜色*/
> }
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/c/6/c6aa665f519ca7ab26ef3e2773b278759b8a682f.png)

可以通过 CSS 自动化此功能，并以各种方式自定义工作人员用户发布的所有帖子。为此，需要按照上述说明创建一个 **主要自定义群组** ，请参阅“装饰”章节。当您的工作人员成员处于 **主要** 群组时，您可以使用 CSS 针对他们的帖子。

> 🗨 **提示** ：_您可以在群组中添加所有工作人员成员，或者决定仅添加管理员或仅添加版主。您还可以为管理员和版主创建两个不同的 **主要** 群组（请注意，您必须使用两个不同的名称，因为“管理员”和“版主”是自动群组的名称），并设置 CSS 以区分管理员帖子和版主帖子。_

> **自动更改所有工作人员用户的帖子背景**
>
> ```css
> 
> /*将 GROUP-NAME 替换为您的群组名称*/
> .topic-post.group-GROUP-NAME .topic-body .cooked { 
> background-color: #ffffd0; /*在此处更改颜色*/
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/b/a/ba939a847a5b84c84ea79a33c06c1a7200c4764b.png)
> 
> 或
> 
> ```css
> .topic-post.group-GROUP-NAME .topic-body { 
> background-color: #ffffd0; /*在此处更改颜色*/
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/1/9/196a51e5340985402e78fc046eb372d04199c172.png)
> 
> 甚至
> 
> ```css
> /*将 GROUP-NAME 替换为您的群组名称*/
> 
> .topic-post.group-GROUP-NAME .topic-body .cooked { 
> background-color: #ffffd0; /*在此处更改颜色*/
> }
> 
> .topic-post.group-GROUP-NAME .names span { 
> background-color: #ffffd0; /*在此处更改颜色*/
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/1/b/1b6488ca709f2032404fba742ed82ae9f0aa4863.png)

> **自动更改所有工作人员用户的帖子字体颜色和字体族**
>
> ```css
> /*将 GROUPNAME 替换为您的群组名称*/
> .topic-post.group-GROUPNAME .topic-body .cooked { 
> color: #fec601; /*在此处更改字体颜色*/
> font-family: ......; /* 在此处更改字体族 */
> }
> 
> ```

> **自动仅更改工作人员回复的背景，而不更改他们的首帖**
>
> 主题中的每篇帖子都有一个 ID，格式为：`post_number`。主题中的首帖 ID 为 `post_1`，回复的 ID 类似 `post_2`、`post_3` 等。
> 
> 如果您想为所有工作人员帖子添加背景，但不包括首帖：
> 
> ```css
> /*将 GROUP-NAME 替换为您的群组名称*/
> .topic-post.group-GROUPNAME .onscreen-post:not(#post_1) .topic-body .cooked { 
> background-color: #ffffd0; /*在此处更改颜色*/
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/a/2/a25eb467cdcb37656bfe104038b1133730588574.jpeg)

#### 在工作人员帖子中添加额外内容

> **简单的签名**
>
> ```css
> .topic-post.group-GROUP-NAME .topic-body .cooked::after {
> content: "来自您友好的工作人员";
> font-size: small;
> color: #d29400;
> float:right;
> font-style: italic;
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/e/c/ec5a6820a3471b20e10e7d0575a7362c45cc5496.png)

> **一个简单的标志**
>
> ```css
> .topic-post.group-GROUP-NAME .topic-body .cooked::after {
> background-image: url("IMAGE-URL");
> background-repeat: no-repeat;
> background-size: 138px 36px; /*根据图片大小更改这些值*/
> width: 138px; /*根据图片大小更改此值*/
> height: 36px; /*根据图片大小更改此值*/
> display: block;
> float: right;
> content: "";
> }
> 
> ```
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/c/9/c978c4d791dc92008991c05e81cdd14f456cfbfa.png)

## 自定义提及颜色

请参阅：[Customize mention colors](https://meta.discourse.org/t/simple-mention-colors/219023)

---

_[View the full topic](https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794)._