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

开发
1

Hello Discourse Fam! I’m hoping that there’s an easy solution for this! I feel like the answer is that I need to use some Javascript.

We have 4 buttons in the “after header” section of our admin CSS/HTML settings.

image
image1189×397 98 KB

We would like to have some buttons only visible to members of specific groups, with the rest of the buttons visible to all users.

e.g. Let’s say we want those main 4 buttons for everyone, but we want another button to only be visible to the members of a particular GROUP.

I don’t know JS so if it’s really simple and someone could help provide a snippet or something, that would be so helpful :pray:

4 个赞
2

I found this article which seems very similar, for the Zendesk platform, but I think that’s the type of functionality we’re looking for!

1 个赞
3 
<div id="after-header">Stuff</div>

<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>

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

It also seems to work if you replace
api.onPageChange(() => {
with
$( document ).ready(function() {
and then the script won’t load on every page, but I never know for sure where I need api.onPageChange(() => { .

5 个赞
4

If you install this component, all groups of the current user will be added as classes in the page body, making it easy for CSS only further changes.

https://github.com/discourse/discourse-groups-css-classes-in-body

7 个赞
5

haha, that was going to be the next thing I tried to figure out

1 个赞
7

你好，

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

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

以下是您如何在主题或组件的 部分实现此目的的示例：

<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() 替换为您需要运行的任何脚本。如果您需要任何进一步的调整，请告诉我！

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