使用 jQuery 无法为主题页面元素添加新类吗?

我在学习 Discourse 的工作原理时遇到了困难,即使阅读了这篇文章后仍然感到困惑。我试图使用 jQuery 在帖子页面为管理员用户名添加动态标题,但无法生效。

不过,如果我将选择器改为 body 标签并添加一个类,它就能正常工作。
那么,能否有人解释一下为什么上面的代码无法工作?
顺便提一下,这段代码是插入在 header 选项卡中的。

<script>
  $(".names span.admin a").attr('title', 'Community Admin');
</script>

我是否需要将其注入到插件出口(plugin outlet)或其他地方?

很可能是因为在这种情况下,jQuery 与 Ember 和 Widget 渲染管道之间存在兼容性问题。

你看,在这个脚本中,你无法控制它何时触发,也无法控制它在 JavaScript 应用绘制屏幕时处于哪个阶段。

不过,有一个 JavaScript API 方法可以解决这个问题,详情请点击这里:

decorateWidget()

以及这个特定的 Widget:

不过,在深入这个复杂问题之前,我们先退一步,你只是想要显示一个头衔吗?

例如,在 Jeff 的帖子中:

他的头衔是:“联合创始人”。

只需创建一个新群组,添加管理员,然后前往“管理” => “成员资格”,编辑“默认头衔”。

现在,他们可以在账户设置的“偏好设置”中选择此头衔(或者你也可以为他们设置)。

你也可以用这种方法来显示特殊的头像标识(上述截图也演示了这一点)。

显然,如果你不希望这样“固定”显示,那就只能走代码定制的路子了。但毫无疑问,你也会同意,当前的方法要省力得多。

5 个赞

谢谢你的帮助。这并非我要查找的实际论坛标题,但我希望在这个仅管理员可见的小皇冠图标上悬停时显示标题:

顺便提一下,对应的 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;

不错。

听起来你可能需要考虑使用小部件(widget)方案。

另外,还可以考虑这个 API 方法:

api.reopenWidget("poster-name", {

      html() {
          <<your-code-here-but-consider-using-the-original-as-template>>
      }
}

我建议你参考:A tour of how the Widget (Virtual DOM) code in Discourse works

在 Discourse 中实现这类功能需要付出更多的精力,因为它是一个自动化的 Web 应用;但一旦正确实现,解决方案将非常稳健。

5 个赞

太棒了,非常感谢。我会仔细查看,如果成功了就发布解决方案。乍一看,Discourse 在定制方面显得非常吓人,我还以为 WordPress 很难呢。不过,一旦我熟悉了这些插件和模板,我相信一切都会变得容易起来。

实际上, boom,也许还有一个更简单的解决方案:

考虑使用这个 API 方法来替换普通的版主盾牌图标:

api.replaceIcon('shield-alt', 'crown');

然后修改这里的工具提示文本:

到了这一步,你原来的 CSS 可能就多余了(不过你仍然可以重新给图标上色)。

3 个赞

但这会移除版主旁边的盾牌图标,对吧?因为我不希望这样。我需要只为管理员添加皇冠图标和悬停文本,因为在帖子页面上他们目前没有任何图标。

1 个赞

啊,是的,我已经习惯了那些我既是版主又是管理员的网站。如果将这些角色分开(即管理员永远不是版主),那就不行了。你需要赋予管理员版主权限。

所以,请探索其他选项。

1 个赞

试试这个:

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 语句的顺序,让皇冠图标优先显示。

1 个赞

听起来是个解决方案,但正如我所说的,我对自定义 Discourse 还很陌生……能否请您具体说明一下,我应该把您的代码粘贴到哪里?因为我到目前为止还没有尝试过任何 API 方法。

请稍等,我会为您妥善构建这个。

好的,这现在是一个主题组件:

https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)

管理员角色具有优先权——默认情况下,同时拥有管理员和版主角色的用户将显示皇冠图标。

你现在可以根据人员类型配置图标。

只需确保将图标名称添加到 SVG 图标子集设置中(否则不会显示):

在此处自定义你的标题文本:

版主同理。

5 个赞

太棒了🙂。非常感谢您的帮助!

很高兴(那个真的很有趣!)

2 个赞

我已更新了主题组件(TC),现在它也会更改用户卡片上的员工图标(可能还有其他地方,因为我修改了辅助函数)。

现在管理员和版主都可以配置图标,管理员的默认图标是皇冠,而版主的默认图标是原版盾牌。

我已重命名了该主题组件。

肯定还有一些地方图标尚未转换,也许我将来会找到更多。

3 个赞

非常感谢!这对我论坛的帖子很有帮助!我认为您的评论应该被置顶,以方便其他遇到用户名旁图标显示问题的用户。我使用了您的功能,在管理员的个人资料中显示了公开显示给版主的盾牌图标。现在,即使我只有管理员权限,我也可以拥有盾牌图标,并且它会显示正确的管理员工具提示。非常感谢您花费时间为人们的论坛创建这个很棒的组件!

编辑:它不会公开显示在他们的个人资料上。目前它只在帖子中显示。

1 个赞

不客气。欢迎 fork、扩展和提交 PR!

2 个赞