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

文档 网站管理
, ,
1

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

显示版主徽章

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

image
image444×209 12.3 KB

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

更改徽章颜色的 CSS

更改所有工作人员用户的徽章颜色 
/*更改所有工作人员用户的徽章颜色*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

image
image428×285 16.8 KB

若要更改徽章在所有出现位置的颜色（不仅限于主题中）：

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;
}
区分管理员用户和版主用户的徽章颜色 
/*区分管理员用户和版主用户的徽章颜色*/
span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: green;
  }

  &.admin .d-icon.d-icon-shield-halved {
    color: red;
  }
}

image
image425×253 15 KB

隐藏徽章的 CSS

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

添加头衔

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

image
image930×124 9.34 KB

示例如下：

image
image679×572 41.1 KB

自定义现有头衔的 CSS

自定义工作人员成员的头衔 
.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

image
image707×573 41.3 KB

区分管理员和版主用户的头衔颜色 
.names {
  .moderator ~ .user-title {
    background: green;
    color: white;
    padding: 3px 5px;
  }

  .admin ~ .user-title {
    background: red;
    color: white;
    padding: 3px 5px;
  }
}

image
image466×311 16.8 KB

:left_speech_bubble: 提示：您组织的工作人员用户不必是实际站点管理员或版主，他们可以是没有任何特殊权限的普通成员。若要自定义他们的头衔，只需创建一个新自定义群组，将其设置为主要群组 并添加必要的用户即可。可以设置一个自动头衔，默认分配给所有成员。

自定义属于主要自定义群组的非管理员和非版主用户的头衔

将 YOUR-CUSTOM-GROUP 替换为群组名称，在下面的示例中是 .group--community ~ .user-title 等。

image
image284×262 3.11 KB

.group--YOUR-CUSTOM-GROUP ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
  }

image
image480×526 27.8 KB

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

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

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

示例：

image

在用户名后添加头衔的提示 
/*在所有工作人员用户后显示自定义头衔
如果站点设置“在 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

/*在用户名后显示自定义头衔，区分管理员用户和版主用户
如果站点设置“在 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
image518×308 18.6 KB

在姓名后添加头衔的提示 
/*在所有工作人员成员后显示自定义头衔*/
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

/*在姓名后显示自定义头衔，区分管理员用户和版主用户*/
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
image518×295 18.4 KB

问题：我可以同时添加两个自定义头衔吗？

可以，尽管这样会有些冗余。请参见以下示例：

.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
image587×326 19.7 KB

添加头像装饰

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

image
image395×293 16 KB

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

如果您想添加自定义图片而不是图标，可以将其上传到您的网站，并按照 在远程主题和组件中包含资源 指南中描述的方式使用 URL。在主题的上传部分添加图片后，将出现图片的变量及其直接链接。右键单击直接链接并复制链接，然后将其粘贴到“头像装饰图片”字段中。

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

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

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

更改用户名颜色

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

更改所有工作人员用户的用户名颜色 
span.username.staff a {
      color: #00A9DB;
}

image
image391×250 14.8 KB
区分管理员和版主用户的用户名颜色 
span.username {
  &.moderator {
    a {
      color: green;
    }
  }

  &.admin {
    a {
      color: red;
    }
  }
}

image
image391×254 14.9 KB

此变体使用了（几乎）与自定义头衔相同的 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
image400×248 15 KB

更改姓名颜色

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

更改所有工作人员用户的姓名颜色 
.names span.staff a {
   color: #00A9DB;
}

image
image397×252 15.3 KB

此变体使用了（几乎）与自定义头衔相同的 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
image416×265 16.1 KB

区分管理员和版主用户的姓名颜色 
.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

  &.admin {
    a, i {
      color: red;
    }
  }
}

image
image408×251 14.9 KB

此变体使用了（几乎）与自定义头衔相同的 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
image406×259 15.9 KB

:left_speech_bubble: 提示：出于某种原因，您可能希望自定义单个工作人员成员——也许是站点创始人或特别受重视的成员。以下是如何针对单个用户的示例——是的，同样的方法可用于任何用户，即使是非工作人员用户。

用户名 
/*将 USERNAME 替换为用户的用户名*/
.topic-meta-data .names span.username a[data-user-card=USERNAME] {
  color: blue;
}

image

姓名 
/*将 USERNAME 替换为用户的姓名*/
.topic-meta-data .full-name a[data-user-card=USERNAME] {
  color: blue;
}

image

姓名和用户名 
.topic-meta-data .names span a[data-user-card=USERNAME] {
    color: blue;
}

image

自定义工作人员帖子背景

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

image
image179×302 4.04 KB

结果如下：

image
image793×208 10.5 KB

为整个帖子添加背景颜色

添加几行 CSS 代码后，当点击 添加工作人员颜色 按钮时，背景颜色将应用于整个帖子。

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*在此处更改颜色*/
  }
}

image
image802×300 15.5 KB

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

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

自动更改所有工作人员用户的帖子背景 

/*将 GROUP-NAME 替换为您的群组名称*/
.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*在此处更改颜色*/
}

image
image776×298 20.7 KB

或

.topic-post.group-GROUP-NAME .topic-body { 
    background-color: #ffffd0; /*在此处更改颜色*/
}

image
image781×253 14 KB

甚至

/*将 GROUP-NAME 替换为您的群组名称*/

.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*在此处更改颜色*/
}

.topic-post.group-GROUP-NAME .names span { 
    background-color: #ffffd0; /*在此处更改颜色*/
}

image
image783×215 13.7 KB

自动更改所有工作人员用户的帖子字体颜色和字体族 
/*将 GROUPNAME 替换为您的群组名称*/
.topic-post.group-GROUPNAME .topic-body .cooked { 
    color: #fec601; /*在此处更改字体颜色*/
    font-family: ......; /* 在此处更改字体族 */
}
自动仅更改工作人员回复的背景，而不更改他们的首帖

主题中的每篇帖子都有一个 ID，格式为：post_number。主题中的首帖 ID 为 post_1，回复的 ID 类似 post_2、post_3 等。

如果您想为所有工作人员帖子添加背景，但不包括首帖：

/*将 GROUP-NAME 替换为您的群组名称*/
.topic-post.group-GROUPNAME .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*在此处更改颜色*/
}

image
image1270×1000 95.2 KB

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

简单的签名 
.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    content: "来自您友好的工作人员";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

image
image802×173 13.2 KB

一个简单的标志 
.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
image785×196 17.3 KB

自定义提及颜色

请参阅：Customize mention colors

58 个赞
How to make it obvious who is staff?
How to add a symbol next to someone’s name
Can I display a Font Awesome class icon next to a user Title?
Make Staff Responses More Visible
Help "sorting" my users
Admin / Mod post in different color
Nick or name customize, colorful and icon, how to do it?
Staff color by default for group members
Using CSS to hide specific elements based on user role
Customize mention colors
Adjust user titles to look like “team” or “Tester” above
CSS username colors only working for admin/moderators?
Create custom badges for admin moderator or employee group
The /about page does not display moderators that are also administrators
Update our admins and moderator shields
Flair image and Admin Icon next to my username not visible
Trust Level Permissions Reference
Icons and text next to the user info
Resources for using Discourse in the classroom
Please update 'Understanding Discourse Trust Levels' — or is there a different doc?
As admin I want to be able to change usernames, regardless of filters
Custom Icons for admins and moderators (and other groups)
Avatar flair image not visible for 'Staff' Group
Shield icon for Admins (in discussion threads)
Post Logo doesn't show up
How to display the shield icon on topics and on the admin profile to all members