您可以使用 JavaScript 和 jQuery 轻松自定义帮助中心的外观和风格。本指南旨在帮助您根据需要打造帮助中心。
默认不提供 jQuery。要在主题中使用 jQuery 语句代替普通的 JavaScript,请务必导入 jQuery 库。有关更多信息,请参阅导入或升级 jQuery。
您还可以使用帮助中心模板化语言或 CSS 自定义帮助中心:
配方列表
我们会逐渐添加更多配方,但不可能面面俱到。您可以随心所欲使用 JavaScript 完成许多操作。请将您的配方发表在评论部分,以便我们将其添加到此指南中。
更改“我的活动”链接文本
将“我的活动”类添加到 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();
}