# 在头部显示特定组成员的自定义HTML

**URL:** https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974
**Category:** Development
**Created:** [2020年二月29日 17:39 UTC](https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974 "2020-02-29T17:39:46Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [2020年二月29日 17:39 UTC](https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974/1 "2020-02-29T17:39:46Z")

</div>

大家好，Discourse 社区的朋友们！希望这个问题有简单的解决方案！我觉得答案可能是需要用到一些 JavaScript。

我们在管理 CSS/HTML 设置的“标题之后”部分有 4 个按钮。

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

我们希望某些按钮仅对特定组的成员可见，而其余按钮对所有用户可见。

例如：假设我们希望那 4 个主按钮对所有人都可见，但希望另一个按钮仅对某个特定 GROUP 的成员可见。

我不懂 JavaScript，如果这很简单，并且有人能提供一段代码示例或其他帮助，那将非常感激 🙏

---

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [2020年二月29日 17:46 UTC](https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974/2 "2020-02-29T17:46:41Z")

</div>

我找到了[这篇文章](https://support.zendesk.com/hc/en-us/articles/203661316-How-can-I-hide-or-show-HTML-based-on-user-s-role-or-group-)，它针对 Zendesk 平台，内容看起来非常相似。不过我认为这正是我们所需的功能类型！

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2020年三月2日 22:47 UTC](https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974/3 "2020-03-02T22:47:30Z")

</div>

```
<div id="after-header">内容</div>

```

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        const isInGroup1 = groups.some(g => g.name === 'group1');
        const isInGroup2 = groups.some(g => g.name === 'group2');
        const isInGroup3 = groups.some(g => g.name === 'group3');
        if (isInGroup1) { 
            $("#after-header").addClass("group1");
         }
        if (isInGroup2) { 
            $("#after-header").addClass("group2");
         }
        if (isInGroup3) { 
            $("#after-header").addClass("group3");
         }         
    });
</script>

```

```plaintext
.button-a,
.button-b {
    display: none;
}
#after-header.group1 .button-a {
    display: block
}
#after-header.group2 .button-b {
    display: block
}

```

如果你将  
`api.onPageChange(() => {`  
替换为  
` $( document ).ready(function() {`  
它似乎也能正常工作，这样脚本就不会在每页加载，但我始终不确定在哪些地方需要使用 `api.onPageChange(() => {`。

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2020年三月3日 01:19 UTC](https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974/4 "2020-03-03T01:19:45Z")

</div>

如果您安装此组件，当前用户的所有群组将被添加为页面主体的类名，从而仅通过 CSS 即可轻松进行后续修改。

> **[GitHub - discourse/discourse-groups-css-classes-in-body](https://github.com/discourse/discourse-groups-css-classes-in-body)**
>
> Contribute to discourse/discourse-groups-css-classes-in-body development by creating an account on GitHub.

---

<div class="post-metadata">

### Author: ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [2020年三月3日 02:35 UTC](https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974/5 "2020-03-03T02:35:34Z")

</div>

哈哈，那本来就是我接下来要弄明白的事情。

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2024年二月14日 23:41 UTC](https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974/6 "2024-02-14T23:41:26Z")

</div>



---

<div class="post-metadata">

### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [2024年十月24日 17:28 UTC](https://meta.discourse.org/t/show-custom-html-in-header-to-member-of-a-specific-group/142974/7 "2024-10-24T17:28:08Z")

</div>

你好，

我一直在寻找类似的东西，但要排除一些群组，所以我尝试了 ChatGPT，答案是：

> 要在 Discourse 中创建一个 HTML 主题，该主题会触发一个排除特定群组的脚本，您需要使用 Discourse 的主题自定义选项以及 JavaScript 来处理群组排除。Discourse 提供 `api.getCurrentUser()` 来检索用户详细信息，包括他们的群组，这对于有条件地触发您的脚本很有用。
> 
> 以下是您如何在主题或组件的 ` ` 部分实现此目的的示例：

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Retrieve current user details
        const currentUser = api.getCurrentUser();

        if (currentUser) {
            // List of group names you want to exclude from script execution
            const excludedGroups = ['group1', 'group2'];

            // Get the user's groups
            const userGroups = currentUser.groups.map(group => group.name);

            // Check if the user belongs to any excluded group
            const isExcluded = excludedGroups.some(group => userGroups.includes(group));

            if (!isExcluded) {
                // Your custom script logic here
                console.log('Script is executed for this user.');
                // Example: trigger any custom logic for non-excluded users
                // customScriptFunction();
            } else {
                console.log('User is in an excluded group, script not executed.');
            }
        }
    });
</script>

```

> 说明：
> 
> 1. api.onPageChange()：每当页面更改时运行脚本。
> 2. api.getCurrentUser()：获取当前登录用户的详细信息。
> 3. excludedGroups：列出您要排除的群组。
> 4. userGroups.includes(group)：检查用户是否属于任何排除的群组。
> 5. 条件脚本执行：脚本仅在用户不属于任何排除的群组时运行。
> 
> 您可以将 customScriptFunction() 替换为您需要运行的任何脚本。如果您需要任何进一步的调整，请告诉我！

我的意思是，这让我大吃一惊 🤯。我还没有尝试过，但是 ChatGPT 的代码是正确的吗？