工作流程：根据用户角色或用户组隐藏或显示 HTML

修改您的帮助中心主题，根据用户角色和组对用户隐藏 HTML。如果您要隐藏的信息是敏感信息，此解决方案可能不适合您，因为用户可以在其网络浏览器中使用查看页面来源功能查看完整的代码。

免责声明：本文仅供说明之用。Zendesk 对代码不提供支持，也不保证代码质量。

此工作流程包含以下部分：

• 选项 1：根据用户角色隐藏或显示 HTML
• 选项 2：根据用户组隐藏或显示 HTML

重要提示：要如期使用代码的功能，请使用 Guide 模板 V2 或更高版本。有关更多信息，请参阅：升级模板化 API v1。

选项 1：根据用户角色隐藏或显示 HTML

复制下面的代码段，并将其直接粘贴在 home_page.hbs 文件第一个

元素下方。

<div class="anonymous">
<h1>Welcome Anonymous User!</h1>
</div>
<div class="end_user">
<h1>Welcome End-User!</h1>
</div>
<div class="agent">
<h1>Welcome Agent!</h1>
</div>
<div class="manager">
<h1>Welcome Manager!</h1>
</div>

在 CSS 模板下插入以下代码。

div.anonymous, div.end_user, div.agent, div.manager {
width: 100%;
text-align: center;
display: none;
}

在 JS 模板下插入以下代码。

const anonymous = document.querySelector(".anonymous")
const end_user = document.querySelector(".end_user")
const agent = document.querySelector(".agent")
const manager = document.querySelector(".manager")

// Show div html based on role
if (HelpCenter.user.role=="anonymous"){
 anonymous.style.display = "block";
}

if (HelpCenter.user.role=="end_user"){
 end_user.style.display = "block";
}

if (HelpCenter.user.role=="agent"){
 agent.style.display = "block";
}

if (HelpCenter.user.role=="manager"){
 manager.style.display = "block";
}

选项 2：根据用户组隐藏或显示 HTML

复制下面的代码段，并将其直接粘贴在 home_page.hbs 文件第一个

元素下方。

const user_group = document.querySelector(".user_group")

<div class="user_group">
  <h1>Welcome to L2 Support!</h1>
</div>

在 CSS 模板下插入以下代码。

div.user_group {
  width: 100%;
  text-align: center;
  display: none;
}

在 JS 模板下插入以下代码。在本例中，将 'L2 Support' 替换为用户组。

const groups = HelpCenter.user.groups;

for (let i = 0; i < groups.length; i++) {
    if (groups[i].name == 'L2 Support' && groups[i].isActive == true) {
    user_group.style.display = "block";
  }
}

注意：默认不提供 jQuery。要在主题中使用 jQuery 语句代替普通的 JavaScript，请务必导入 jQuery 库。有关更多信息，请参阅文章：导入或升级 jQuery。

有关更多信息，请参阅文章：自定义帮助中心主题。