What's my plan?
Suite Growth, Professional, Enterprise, or Enterprise Plus
Support with Guide, any plan

标准 Copenhagen 主题允许终端用户对帮助中心文章进行投票。在本配方中，您将编辑主题代码，以在用户踩文章时显示跟进消息。

被踩消息包含一个指向新请求页面的链接，该页面含有一张工单表格。用户可以填写工单表格，留下文章反馈。该表格使用自定义工单字段捕获文章 URL，提交后将在 Zendesk Support 中创建一张工单。

关于本配方

只有 Zendesk Support 管理员才能完成本配方。本配方涉及以下任务：
  • 任务 1：启用匿名投票
  • 任务 2：为文章 URL 创建自定义工单字段
  • 任务 3：添加自定义 CSS
  • 任务 4：更新文章页面模板
  • 任务 5：添加自定义 JavaScript
  • 任务 6：测试更改

本配方假定您正在编辑标准 Copenhagen 主题。要编辑其他主题或对自定义 Copenhagen 主题进行类似更改，您可能需要更改代码示例。

本配方还使用预填工单表格。预填工单表格需要使用模板化 API 版本 2 的主题。要查看主题的版本，请参阅关于帮助中心模板化版本。

注意：本配方需要编辑 CSS、页面模板和 JavaScript。当您编辑标准主题时，它会另存为自定义主题。自定义主题不受 Zendesk 支持， 并不会在新功能发布时自动更新。请参阅关于帮助中心内的标准主题和自定义主题。

任务 1：启用匿名投票

如果帮助中心对匿名访问者可见，您可以启用匿名投票作为可选步骤。通过匿名投票，终端用户无需登录即可对帮助中心文章进行投票。

要启用匿名投票，请按照允许用户在不登录的情况下对知识库文章投票中的说明操作，然后返回本文章。

任务 2：为文章 URL 创建自定义工单字段

首先，创建一个自定义工单字段以捕获帮助中心文章 URL。

为文章 URL 创建自定义工单字段
  1. 在管理中心，单击侧栏中的对象和规则 ()，然后选择工单 > 字段。
  2. 单击添加字段。
  3. 选择文本字段类型。

  4. 输入帮助文章 URL 作为显示名称。
  5. 在权限下，选择客户可编辑。
  6. 在客户下，输入帮助文章 URL 作为向客户显示的标题。

  7. 单击保存。

    如果您的帐户只使用一张工单表格，新字段将自动显示在该工单表格中。如果您使用多张工单表格，则必须手动将新字段添加到所有要包含它的工单表格中。

  8. 在字段页面上，复制帮助文章 URL 字段的字段 ID。该 ID 会在本配方的后面部分用到。

任务 3：添加自定义 CSS

接下来，将被踩消息的自定义 CSS 添加到主题中。

将自定义 CSS 添加到主题中
  1. 在知识管理中，打开主题的代码编辑器。有关说明，请参阅编辑帮助中心主题。
  2. 单击 style.css。
  3. 将以下代码粘贴到文件底部：
    /* ---- Downvote message ----------- */
.downvote-message {
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

    该代码可添加 .downvote-message 类的 CSS 规则。您将使用该类隐藏被踩消息，直到用户踩文章为止。当该消息显示时，该类还会设置消息样式。

  4. 要更新帮助中心的当前主题，请单击发布。反之，请单击保存。

任务 4：更新文章页面模板

接下来，将被踩消息的 HTML 添加到主题的文章页面模板中。

更新文章页面模板
  1. 在知识管理中，打开主题的代码编辑器。
  2. 单击 article_page.hbs。
  3. 在 <div class="article-votes"> 的结尾标签前添加以下 HTML 代码段：
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_CUSTOM_FIELD_ID=HTTPS://SUBDOMAIN.ZENDESK.COM{{url}}">Please tell us
      why.</a></p>
</div>
    在该代码段中：
    • 将 CUSTOM_FIELD_ID 替换为您在为文章 URL 创建自定义工单字段中创建的帮助文章 URL 字段的字段 ID
    • 将 HTTPS://SUBDOMAIN.ZENDESK.COM 替换为帮助中心的基本 URL
    该 HTML 会在每篇文章的投票按钮下方添加一条被踩消息。消息的父级 div 使用您在为文章 URL 创建自定义工单字段中添加的类 downvote-message。该类的 CSS 将对所有用户隐藏消息。在本配方的后面部分，您将添加自定义 JavaScript，以在用户投反对票时显示消息。

    该消息包含一个指向新请求页面的链接，该页面含有一张工单表格。该链接通过 URL 参数使用当前文章 URL 预填充该表格的帮助文章 URL 字段。要了解更多关于预填工单表格的信息，请参阅创建预填工单表格。

  4. 如果您的帐户只使用一张工单表格，请跳到下一步。如果您的帐户有多张工单表格，请将 URL 参数 &ticket_form_id=FORM_ID 添加到 HTML 代码段的 href 值末尾。在该参数中，将 FORM_ID 替换为工单表格 ID。例如：
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_12345=https://example.zendesk.com{{url}}&ticket_form_id=67890">Please tell us
      why.</a></p>
</div>

    工单表格必须对终端用户可见。要检查或更改工单表格的可见度，请参阅创建多张工单表格以支持不同的请求类型。

  5. 审阅模板的元素 <div class="article-votes">。它应如下所示：
    <div class="article-votes">
  <span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span>
  <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label">
    {{vote 'up' role='radio' class='button article-vote article-vote-up' selected_class="button-primary"}}
    {{vote 'down' role='radio' class='button article-vote article-vote-down' selected_class="button-primary"}}
  </div>
  <small class="article-votes-count">
    {{vote 'label' class='article-vote-label'}}
  </small>
  <div class="downvote-message">
    <p>We're sorry to hear that.</p>
    <p><a href="{{page_path 'new_request'}}?tf_67890=https://example.zendesk.com{{url}}">Please tell us
        why.</a></p>
  </div>
</div>
  6. 要更新帮助中心的当前主题，请单击发布。反之，请单击保存。

任务 5：添加自定义 JavaScript

添加一些 JavaScript 以在用户踩文章时显示被踩消息。

将自定义 JavaScript 添加到主题中
  1. 在知识管理中，打开主题的代码编辑器。
  2. 单击 script.js。
  3. 将以下代码粘贴到文件底部：
    // Display message for article downvotes
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".article-votes-controls")) {
    const voteButtons = document.querySelectorAll(".article-vote");
    const voteMessage = document.querySelector(".downvote-message");

    voteButtons.forEach((button) => {
      button.addEventListener("click", () => {
        let isDownButton = button.matches(".article-vote-down");
        let isPressed = button.matches(".button-primary");

        if (isDownButton && !isPressed) {
          voteMessage.style.display = "block";
        } else {
          voteMessage.style.display = "none";
        }
      });
    });
  }
});

    如果用户单击否投票按钮，JavaScript 将显示您在更新文章页面模板中添加的被踩消息。如果用户重置投票或将投票更改为是，JavaScript 将重新隐藏该消息。

  4. 要更新帮助中心的当前主题，请单击发布。反之，请单击保存。

任务 6：测试更改

测试新投票功能，确保其如期工作。

测试更改
  1. 在知识管理中，打开主题的代码编辑器。
  2. 单击预览。
  3. 在“预览”窗口中，选择终端用户的预览用户角色和文章页面的模板。
  4. 导航到帮助中心中的一篇文章。在该文章底部，单击这篇文章有帮助吗？下的否投票按钮。

    随即显示一条包含请告诉我们原因链接的简短消息。

  5. 单击请告诉我们原因链接。

    随即打开一个包含工单表格的新请求页面。工单表格的帮助文章 URL 字段应包含相关帮助中心文章的 URL。

    如果需要，您可以提交表格以创建测试工单。

  6. 导航到帮助中心的另一篇文章，然后单击否投票按钮。
  7. 显示被踩消息后，单击是投票按钮。被踩消息随即消失。
  8. 如果您未更改并已准备推出帮助中心的当前主题，可以将自定义主题设置为当前主题。请参阅更改帮助中心的当前主题。
由 Zendesk 提供技术支持