您可以使用JavaScript和jQuery轻松自定义帮助中心的外观和感觉。此库克书旨在帮助您使帮助中心看起来是您想要的方式。
jQuery默认未提供。如果您想在范JavaScript的地方使用主题中的jQuery语句,请确保您导入jQuery库。请查阅 导入或升级jQuery 了解更多信息。
您也可以使用帮助中心模板化语言或CSS自定义帮助中心:
食谱列表
随着时间的推移,我们将添加更多食谱,但我们永远不能希望成为一个限制。您可以对JavaScript进行的操作数量仅受到想象的限制。请在评论部分发布您的食谱,我们将将其添加到此食谱中。
更改“我的活动”链接文本
将我的活动类添加到页首.hbs 模板:
{{link "my_activities" role="menuitem" class='my-activities'}}
将以下jQuery语句 $(document).ready(function()
添加到JavaScript模板中的函数中:
$(' .my-activities').html(' See my requests');
重命名请求表格上的“标题”和“描述”标签
将以下jQuery语句添加到 $(document).ready(function()
JavaScript模板中的函数中:
$('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语句添加到 $(document).ready(function()
JavaScript模板中的函数中:
$('.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语句 $(document).ready(function()
添加到JavaScript模板中的函数中:
$("ul.dropdown-panel li a:contains('Français')").hide();
用标记图标替换语言选择器中的文本字符串
例如,如果您的帮助中心在美国提供内容英语和德语,您可以显示国旗而不是“美国”。英语“和”德舒“的语言选择器。将以下jQuery语句 $(document).ready(function()
添加到JavaScript模板中的函数中:
$(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语句 $(document).ready(function()
添加到JavaScript模板中的函数中:
if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
$('.community').hide();
}
翻译免责声明:本文章使用自动翻译软件翻译,以便您了解基本内容。 我们已采取合理措施提供准确翻译,但不保证翻译准确性
如对翻译准确性有任何疑问,请以文章的英语版本为准。