### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [2021年二月5日 20:13 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/3 "2021-02-05T20:13:32Z")
谢谢你的帮助。这并非我要查找的实际论坛标题，但我希望在这个仅管理员可见的小皇冠图标上悬停时显示标题：
顺便提一下，对应的 CSS 代码如下：
```
.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;
```
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年二月5日 20:22 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/4 "2021-02-05T20:22:55Z")
不错。
听起来你可能需要考虑使用小部件（widget）方案。
另外，还可以考虑这个 API 方法：
```plaintext
api.reopenWidget("poster-name", {
html() {
<>
}
}
```
我建议你参考：[A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347)
在 Discourse 中实现这类功能需要付出更多的精力，因为它是一个自动化的 Web 应用；但一旦正确实现，解决方案将非常稳健。
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [2021年二月5日 20:33 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/5 "2021-02-05T20:33:40Z")
太棒了，非常感谢。我会仔细查看，如果成功了就发布解决方案。乍一看，Discourse 在定制方面显得非常吓人，我还以为 WordPress 很难呢。不过，一旦我熟悉了这些插件和模板，我相信一切都会变得容易起来。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年二月5日 20:35 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/6 "2021-02-05T20:35:57Z")
实际上， boom，也许还有一个更简单的解决方案：
考虑使用这个 API 方法来替换普通的版主盾牌图标：
```plaintext
api.replaceIcon('shield-alt', 'crown');
```
然后修改这里的工具提示文本：
到了这一步，你原来的 CSS 可能就多余了（不过你仍然可以重新给图标上色）。
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [2021年二月5日 20:44 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/7 "2021-02-05T20:44:05Z")
但这会移除版主旁边的盾牌图标，对吧？因为我不希望这样。我需要只为管理员添加皇冠图标和悬停文本，因为在帖子页面上他们目前没有任何图标。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年二月5日 20:48 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/8 "2021-02-05T20:48:30Z")
啊，是的，我已经习惯了那些我既是版主又是管理员的网站。如果将这些角色分开（即管理员永远不是版主），那就不行了。你需要赋予管理员版主权限。
所以，请探索其他选项。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年二月5日 21:00 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/9 "2021-02-05T21:00:53Z")
试试这个：
```javascript
api.reopenWidget("poster-name", {
posterGlyph(attrs) {
if (attrs.moderator || attrs.groupModerator) {
return iconNode("shield-alt", {
title: I18n.t("user.moderator_tooltip"),
});
}
if (attrs.admin) {
return iconNode("crown", {
title: I18n.t("user.admin_tooltip"),
});
}
}
})
```
以及
对我有效：
在这种情况下，第一个用户既是管理员又是版主，第二个用户只是管理员。你可以完善这个逻辑；通过调整 if 语句的顺序，让皇冠图标优先显示。
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [2021年二月5日 21:25 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/10 "2021-02-05T21:25:41Z")
听起来是个解决方案，但正如我所说的，我对自定义 Discourse 还很陌生……能否请您具体说明一下，我应该把您的代码粘贴到哪里？因为我到目前为止还没有尝试过任何 API 方法。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年二月5日 21:27 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/11 "2021-02-05T21:27:50Z")
请稍等，我会为您妥善构建这个。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年二月5日 22:25 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/12 "2021-02-05T22:25:41Z")
好的，这现在是一个主题组件：
> **[GitHub - merefield/discourse-tc-staff-icons: A simple Theme Component that places a crown icon...](https://github.com/merefield/discourse-tc-staff-icons)**
>
> A simple Theme Component that places a crown icon by admins name in Post stream
（[https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682）](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682%EF%BC%89)
管理员角色具有优先权——默认情况下，同时拥有管理员和版主角色的用户将显示皇冠图标。
你现在可以根据人员类型配置图标。
只需确保将图标名称添加到 SVG 图标子集设置中（否则不会显示）：
在此处自定义你的标题文本：
版主同理。
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [2021年二月5日 22:34 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/13 "2021-02-05T22:34:48Z")
太棒了🙂。非常感谢您的帮助！
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年二月5日 22:35 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/14 "2021-02-05T22:35:24Z")
很高兴（那个真的很有趣！）
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2021年二月6日 01:47 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/15 "2021-02-06T01:47:51Z")
我已更新了主题组件（TC），现在它也会更改用户卡片上的员工图标（可能还有其他地方，因为我修改了辅助函数）。
现在管理员和版主都可以配置图标，管理员的默认图标是皇冠，而版主的默认图标是原版盾牌。
我已重命名了该主题组件。
肯定还有一些地方图标尚未转换，也许我将来会找到更多。
---
### Author:  [@AEW745](https://meta.discourse.org/u/AEW745)
#### Post date: [2022年五月7日 00:22 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/16 "2022-05-07T00:22:45Z")
非常感谢！这对我论坛的帖子很有帮助！我认为您的评论应该被置顶，以方便其他遇到用户名旁图标显示问题的用户。我使用了您的功能，在管理员的个人资料中显示了公开显示给版主的盾牌图标。现在，即使我只有管理员权限，我也可以拥有盾牌图标，并且它会显示正确的管理员工具提示。非常感谢您花费时间为人们的论坛创建这个很棒的组件！
编辑：它不会公开显示在他们的个人资料上。目前它只在帖子中显示。
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2022年五月7日 07:13 UTC](https://meta.discourse.org/t/cant-add-new-class-to-topic-page-elements-using-jquery/178568/17 "2022-05-07T07:13:59Z")
不客气。欢迎 fork、扩展和提交 PR！