帮助中心 JavaScript 指南

Suite

Growth、Professional、Enterprise 或 Enterprise Plus

Support 以及

Guide 所有服务模式

您可以使用 JavaScript 和 jQuery 轻松自定义帮助中心的外观和风格。本指南旨在帮助您根据需要打造帮助中心。

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

注意：试用用户可获得 Professional 服务模式（包含代码编辑选项），但他们购买 Team 服务模式后无法再访问该功能。

要在帮助中心访问和编辑 JavaScript，请参阅自定义 CSS 或 JavaScript。

您还可以使用帮助中心模板化语言或 CSS 自定义帮助中心：

• 帮助中心模板参考
• 帮助中心模板化指南
• 帮助中心 CSS 指南

配方列表

我们会逐渐添加更多配方，但不可能面面俱到。您可以随心所欲使用 JavaScript 完成许多操作。请将您的配方发表在评论部分，以便我们将其添加到此指南中。

• 更改“我的活动”链接文本
• 隐藏“我的活动”的工单侧栏中的自定义字段
• 重命名请求表格上的“标题”和“描述”标签
• 预填充自定义工单表格的字段
• 更改请求表格中自定义字段的顺序
• 为请求表格添加标题
• 隐藏语言下拉菜单中的语言
• 将语言选择器中的文本字符串替换为旗帜图标
• 根据所选语言隐藏社区
• 阻止文章被搜索引擎编入索引

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

更改“我的活动”链接文本

将“我的活动”类添加到 header.hbs 模板：

{{link "my_activities" role="menuitem" class='my-activities'}}

将以下 jQuery 语句添加到 JavaScript 模板中的 $(document).ready(function() 函数：

$(' .my-activities').html(' See my requests');

隐藏“我的活动”的工单侧栏中的自定义字段

您可以使用 JavaScript 隐藏“我的活动”页面工单侧栏中的自定义字段。您可以根据标签选择自定义字段。例如，如果自定义字段的标签是“会员奖励”，而其标签中包含“会员”或“奖励”或“会员奖励”，则可以隐藏该字段。

在 script.js 文件中添加以下 jQuery 函数：

$(document).ready(function() {
  if (window.location.href.indexOf('/requests') > -1) {
    setTimeout(function() {
      $('dt:contains("Member rewards")').hide().next('dd').hide(); 
      // add more selectors as necessary
    }, 1000); // adjust the timeout duration as needed
}});

重命名请求表格上的“标题”和“描述”标签

将以下 jQuery 语句添加到 JavaScript 模板中的 $(document).ready(function() 函数：

$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");

预填充自定义工单表格的字段

注意：只有部分服务模式支持多个工单表格。有关工单表格列表和工单表格工作方式的一般信息，请参阅创建工单表格以支持多种请求类型。

假设您在帮助中心使用自定义工单表格来允许用户注册产品。当用户在帮助中心打开表格时，您可以检测表格并预填充其中字段。

您将需要工单表格 ID（参见帮助中心中表格的 URL）。请参阅此示例。

以下 jQuery 示例将在标题字段中预填充“产品注册”，在描述字段中预填充“这是新产品注册”。将语句添加到 JavaScript 模板中的 $(document).ready(function() 函数：

var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 18570) {
  $('section.main-column h1').html('Product Registration');
  $('#request_subject').val('Product Registration');
  $('#request_description').val('There is a new product registration.');
  $('#request_subject').parent('.request_subject').hide(); // Hide subject
  $('#request_description').parent('.request_description').hide(); 
  $("<p>Please upload your product receipt here.<p>").insertAfter('label:contains("Attachments")'); // Adds text below "Attachments"
}

更改请求表格中自定义字段的顺序

您需要自定义字段的 ID（参见 Zendesk Support 界面）。请参阅此示例。

var firstName = $('input#request_custom_fields_22231170').parent();
var lastName = $('input#request_custom_fields_22231180').parent();
firstName.insertBefore($('input#request_subject').parent());
lastName.insertBefore($('input#request_subject').parent());

为请求表格添加标题

将以下 jQuery 语句添加到 JavaScript 模板中的 $(document).ready(function() 函数：

 $('.form-field.request_anonymous_requester_email').prepend('<h2>Your personal information</h2>')
 $('.form-field.request_subject').prepend('<h2>Your issue</h2>');
 $('.form-field.request_custom_fields_21875914').prepend('<h2>Your device information</h2>');
 $('.form-field.request_custom_fields_22033620').prepend('<h2>Your purchase information</h2>');
 $('.form-field > label:contains("Attachments")').prepend('<h2>Support attachments</h2>');

隐藏语言下拉菜单中的语言

如果某种语言内容尚未准备好发布，则在语言选择器中隐藏该语言可能会有用。将以下 jQuery 语句添加到 JavaScript 模板中的 $(document).ready(function() 函数：

$("ul.dropdown-panel li a:contains('Français')").hide();

将语言选择器中的文本字符串替换为旗帜图标

例如，如果帮助中心提供美国英语和德语内容，则可以显示国旗，而不是语言选择器中的“美国英语”和“德语”。将以下 jQuery 语句添加到 JavaScript 模板中的 $(document).ready(function() 函数：

$(function(){
$('a.dropdown-toggle:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a.dropdown-toggle:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
$('a:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
});

根据所选语言隐藏社区

将以下 jQuery 语句添加到 JavaScript 模板中的 $(document).ready(function() 函数：

if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
  $('.community').hide();
}

阻止文章被搜索引擎编入索引

noindex 元标签会告诉搜索引擎不要在其索引中包含特定页面。要将 noindex 元标签动态添加到特定文章，请在 script.js 文件中添加以下函数：

(function () {
  // Get the current page URL  
  const url = window.location.href;

  // Check if the URL is an article page
  if (url.indexOf("/articles/") == -1) {
    return;
  }

  //List the ids of articles to be excluded from indexing
  const articles = [5555300573850, 5500012959342]; //Example article ids
  for (let i = 0; i < articles.length; i++) {
    if (url.indexOf(articles[i]) !== -1) {
      //Create a new meta tag element
      var meta_tag = document.createElement("meta");
      meta_tag.setAttribute("name", "robots");
      meta_tag.setAttribute("content", "noindex");

      //Append the meta tag to the head of the document
      document.head.appendChild(meta_tag);
    }
  }
})();