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

开发
1

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

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

image
image1189×397 98 KB

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

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

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

2

我找到了这篇文章，它针对 Zendesk 平台，内容看起来非常相似。不过我认为这正是我们所需的功能类型！

3 
<div id="after-header">内容</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
}

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

4

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

5

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

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 的代码是正确的吗？