每个帮助中心主题都由一组可编辑的页面模板和自定义页面组成。您可以使用帮助中心模板语言Curlybars来访问帮助中心数据并操作页面中的内容。
本文提供了一个菜谱列表,其中包含您可以使用的代码片段。请记住,这些食谱中的一些功能可能已经在您的帮助中心中,这取决于您是否正在使用标准主题或定制主题以及启用帮助中心的日期。
- 关于Curlybars模板语言
- 为特定类别、部分或文章定制页面模板
- 在语言选择器中自定义语言名称
- 在语言选择器中隐藏一种或多种语言
- 让用户根据日期或投票对文章评论进行排序
- 向文章评论编辑器添加格式化工具栏
- 允许用户对文章评论进行投票
- 向帮助中心添加即时搜索(自动完成)结果
- 添加联邦搜索以在帮助中心搜索中包括外部内容
- 在My Activities Following页面中添加订阅类型的排序
- 在我的活动中为请求添加排序选项“创建时间”和“更新时间”
- 为共享组织中的用户添加关注/取消关注
- 增加用户在支持请求时抄送其他用户的能力
- 为父请求添加后续请求的链接
- 为文章添加投票按钮
- 为文章和帖子添加内容标签
- 向自定义帮助中心主题添加徽章
- 允许用户查看帮助中心的用户配置文件
- 启用帮助中心主题中的子节
- 在搜索结果页面中添加多个帮助中心的侧边栏过滤器和结果
关于Curlybars模板语言
您的帮助中心构建在一个主题框架之上,该框架包含用于高级定制的自己的模板语言。每个帮助中心主题都由一组可编辑的模板和可选的自定义页面组成.
可编辑的页面模板定义每个页面的布局。例如,知识库文章有一个模板,请求列表有一个模板,等等。亚博官方app模板只是一个文本文件,当用户希望看到它时,它将被呈现为HTML页面。每个模板都由HTML标记和由双花括号识别的表达式混合组成,例如{{post.title}}
.
自定义页面内置于帮助中心主题的代码库中,并具有特定的URL,您可以从帮助中心的任何位置链接该URL。您可以使用自定义页面从头创建和编码满足您个人需求的页面。例如,您可以使用自定义页面为帮助中心创建特殊的登录页面,甚至可以创建新页面以嵌入来自Zendesk外部资源的内容。亚博
模板语言名为Curlybars,并实现了控件的一个大子集车把语言。但与Handlebars在客户端呈现不同,Curlybars在服务器端呈现。
您可以使用帮助中心模板语言来访问帮助中心数据并操作页面中的内容。在下面的例子中,帮助中心显示所有在页面上留言的人的姓名和头像列表:
{{#每个评论}} < / div > < div class = "评论作者" > {{author.name}} < / div > < /李>{{/每个}}
以前可以使用组件定制帮助中心,但不能定制组件本身,只能使用Javascript操作它们。使用Curlybars,您可以访问之前隐藏在组件中的HTML并编辑它。
有关更多信息,请参见:
为特定类别、部分或文章定制页面模板
您可以分别为特定的类别、部分和文章定制类别、部分和文章模板。
在语言选择器中自定义语言名称
您可以在帮助中心的每个页面上的语言选择器中自定义语言名称。如果您想使用一种语言变体(如“English (U.S.)”)来表示该语言的所有变体(如“English”),这是非常有用的。
- 头李< / >< / ul >适用的表达式
{{#如果alternative_locales}},{{/如果}}
- 取代
{{current_locale.name}}
用以下条件表达式表示:{{#is current_locale.name '英文(美国)'}}英文{{else}} {{current_locale.name}} {{/is}}
还要替换替代区域设置
{{名称}}
用以下条件表达式表示:{{#是“英语(美国)”名称}}英语{{其他}}{{名称}}{{/}}
例子
{{#if alternative_locale}} {{/if}}
参考
在语言选择器中隐藏一种或多种语言
如果语言的内容还没有准备好发布,那么在语言选择器中隐藏语言是很有用的。
- 头李< / >< / ul >适用的表达式
{{#每个alternative_locales}},{{/每个}}
- 取代
< a href = " {{url}}”dir = "{{方向}}" rel = =“菜单项”“nofollow”作用>{{名称}}< / >
用以下条件表达式表示:{{#是名称“Français”}}{{!其他什么都不做}}{{}}< a href = " {{url}} " dir = "{{方向}}" rel = =“菜单项”>“nofollow”角色{{名称}}< / > {{/}}
例子
{{#each alternative_locale}}{{#是名称“Français”}}{{!其他什么都不做}}{{}}< a href = " {{url}} " dir = "{{方向}}" rel = =“菜单项”>“nofollow”角色{{名称}}< / >{{/}}{{/每个}}
参考
让用户根据日期或投票对文章评论进行排序
默认情况下,文章评论按照日期从最近到最少进行排序。您可以添加日期和投票链接,用户可以单击这些链接按日期或投票数对评论进行排序。
- 文章李< / >< / ul >< / div >适用的HTML元素
<节课= "文章" >…> < /部分
配方- 在评论区标题标签之后插入下面的div标签,
< h2 > {{t‘评论’}}< / h2 >
,最好在{{#如果评论}}
表达式(如果有的话),以确保如果没有人留下评论,排序器不会出现:< div class = " comment-sorter”>排序:{{#每个comment_sorters}} < aria-selected = "{{选择}}" href = " {{url}} >{{名称}}< / >{{/每个}}< / div >
例子
{{t 'comments'}}
{{#if comments}}< div class = " comment-sorter”>排序:{{#每个comment_sorters}} < aria-selected = "{{选择}}" href = " {{url}} >{{名称}}< / >{{/每个}}< / div >- {{#each comments}}…
参考
向文章评论编辑器添加格式化工具栏
可以在编辑器中添加格式化工具栏,用于文章评论。用户可以添加粗体和斜体、无序或有序列表、图像和链接。
- 文章李< / >< / ul >< / div >适用的对象
{{#形式‘评论’}},{{/形式}}
配方- 查找并替换
{{textarea‘身体’}}
的形式对象中的表达式{{wysiwyg‘身体’}}
例子
{{#form 'comment' class='comment-form'}}
{{user_avatar class='user-avatar'}}.{{wysiwyg‘身体’}}< div class = " comment-form-controls”>{{输入type = '提交'}}< / div > < / div >{{/形式}}参考
允许用户对文章评论进行投票
默认情况下,用户可以对文章进行投票。你也可以让他们对文章评论进行投票。
- 文章李< / >< / ul >< / div >适用的表达式
{{#每个评论}},{{/每个}}
配方- 元素之后插入下面的div标记
<李id = "{{锚}}" >
标签:{{投票赞成class="article-vote-up" selected_class="vote-vote "}}{{投票赞成'sum' class="article-vote-sum"}}{投票赞成'down' class="article-vote-down" selected_class="vote- votes "}}上面的投票助手借用了文章投票的CSS类来样式化评论投票链接。您可以定义自己的类来设置评论投票的样式。
例子
{{#每个评论}}<李id = "{{锚}}"类= >“评论”
{{投票赞成class="article-vote-up" selected_class="vote-vote "}}{{投票赞成'sum' class="article-vote-sum"}}{投票赞成'down' class="article-vote-down" selected_class="vote- votes "}}…参考
向自定义帮助中心主题添加即时搜索(自动完成搜索)结果
通过向自定义主题添加即时搜索,可以在“搜索”框中显示用户键入的建议文章的链接。
启用即时搜索后,当用户在搜索框中输入搜索词时,最多会出现6篇建议文章。文章仅根据文章标题进行即时搜索匹配。用户可以直接从搜索框中选择匹配的文章,而不需要先进入搜索结果页面。
- 无论哪个模板包含您的搜索表达式,(最常见的是标题或主页模板)李< / >< / ul >< / div >
适用的表达式
- {{搜索}}李< / >< / ul >< / div >配方
- 添加
即时= true
到Search表达式。{{搜索即时= true}}
例子
{{help_center.name}}
{{搜索即时= true}} < / div > - 添加
添加联邦搜索以在帮助中心搜索中包括外部内容
添加侧栏过滤器
您需要通过更新边栏筛选器中使用的属性来更新搜索结果模板。
中更新以下代码< div class = "搜索结果”>
.. {{/if}}
循环遍历结果
属性的示例
{{结果}}
helper循环遍历联邦搜索结果:{{#如果结果}}< ul类=“search-results-list”>{{#每个结果}}<李类=“search-result-list-item结果——{{类型}}" > < h2类=“search-result-title”> < a href = " {{url}}”类=“results-list-item-link”目标={{#如果is_external}}“平等”{{/如果}}>{{标题}}{{#如果is_external}} < svg viewBox = " 0 0 12 12”高度= " 12 " id = " zd-svg-icon-12-new-window-fill " > <路径填=”没有“中风=“currentColor”stroke-linecap =:回合”d = 8.5 M10.5 v10c0陈霞-.22.5 -.5.5H2c-28 0台闲置.22闲置-.5V2c0 -.28.22 -.5.5 -.5h1.5M6614 - 4 " > < /路径> < / svg >{{/如果}}< / > < / h2 > <文> < div class = " search-result-icons " >{{#如果vote_sum}} <跨类=“search-result-votes”> {{vote_sum}} < / span >{{/如果}}{{#如果comment_count}} <跨类=“search-result-meta-count”> {{comment_count}} < / span >{{/如果}}< / div > < ul类= " meta group " > <李> < ol类=“面包屑search-result-breadcrumbs”>{{#每个path_steps}} <李title =“{{名称}}" > < a href = " {{url}} "目标= "{{目标}}>{{名称}}< / > < /李>{{/每个}}< / ol > < /李> <李类=“元数据”> {{author.name}} < /李> <李类=“元数据”>{{日期created_at}} < /李> < / ul > < div class = " search-results-description " >{{文本}}< / div > < /文章> < /李>{{/每个}}< / ul >{{其他}}< p > {{t ' no_results_unified}}{{#链接的help_center}} {{t ' browse_help_center}}{{/链接}}< / p >{{/如果}}
在My Activities Following页面中添加订阅类型的排序
通过在My Activities > Following页面中允许用户按类型对订阅进行排序,可以使用户更容易地查看他们的订阅。
适用的模板- 下面的页面李< / >< / ul >< / div >配方
- 下
<导航>
标签,插入以下代码:{{current_filter。标签}}< / span > <跨类= =“菜单”>“下拉菜单”角色{{#每个过滤器}}< a href = " {{url}} " aria-selected = "{{选择}}"角色= "菜单项" >{{名称}}< / >{{/每个}}< / span > < / span > < / div >
- 下
在我的活动中为请求添加排序选项“创建时间”和“更新时间”
您可以在My Activities中的请求页面上为最终用户添加排序选项“创建于”和“更新于”。
注意:中的“创建时间”和“更新时间”排序选项默认可用标准的主题以及2016年8月之后定制的主题。< / div >< / div >适用的模板- 请求列表页面李< / >< / ul >< / div >
配方
- 取代
{{t“创建”}}
:{{#链接“请求”sort_by = ' created_at '}} {{t“创建”}}{{/链接}}
- 取代
{{t ' last_activity}}
:{{#链接“请求”sort_by = ' updated_at}} {{t ' last_activity}}{{/链接}}
参考 - 取代
为共享组织中的用户添加关注/取消关注
您可以让用户接收其共享组织中的请求的电子邮件通知。{{subscribe}}助手插入了一个“follow”按钮,如果用户希望在共享组织中创建或更新请求时接收电子邮件通知,可以单击该按钮。如果用户不想再接收更新,他们还可以选择取消关注。
注意:默认情况下,共享组织的Follow按钮可用标准的主题以及2016年1月23日后定制的主题。< / div >< / div >适用的模板- 请求列表页面李< / >< / ul >适用的对象
{{#形式的requests_filter}}…{{/形式}}
配方- 添加
{{订阅}}
窗体对象的助手。李< / >< / ul >< / div >例子
{{#form 'requests_filter' class='request-table-toolbar'}} {{input 'query' id='quick-search' type='search' class='requests-search'}}
{{label 'organization' for='request-organization-select' class='request-filter'}} {{select 'status' for='request-status-select' class='request-filter'}} {{select 'status' id='request-status-select' class='request-filter'}}. {{input 'query' id='quick-search' type='search' class='requests- filter{{/形式}}参考
为已登录用户添加在支持请求时抄送其他用户的能力
您可以为登录用户添加向帮助中心中的新支持请求和现有支持请求添加cc的功能。当CC被添加到支持请求时,被复制的用户将收到关于票据更新的电子邮件通知。
为父请求添加后续请求的链接
您可以在后续请求中显示到父请求的链接(如果有的话)。
注意:在默认情况下,后续请求中的父请求链接可用标准的主题以及2016年8月之后定制的主题。< / div >< / div >适用的模板- 请求页面李< / >< / ul >< / div >
配方
- 将下面的代码片段添加到Request页面模板中,你想在其中显示到父票据的链接(如果存在的话):
{{#如果请求。Followup_source_id}}< dl class="request-details">
- {{t 'followup'}}
- {{link 'request' id=request。Followup_source_id}}
{{/if}}
参考 - 将下面的代码片段添加到Request页面模板中,你想在其中显示到父票据的链接(如果存在的话):
为文章添加投票按钮
文章上的投票按钮是哥本哈根会议标准主题的一部分。但是如果您没有看到为您的文章投票的选项,那么您可能已经从您的主题中删除了按钮。
添加投票按钮的代码因主题而异,但这是来自标准哥本哈根主题的代码,以防您需要它。
适用的模板- 文章李< / >< / ul >< / div >配方
- 在Article Page模板中添加以下代码:
{{#with article}}
{{t 'was_this_article_helpful'}}{{/with}}{{投票'up' role='radio' class='button article-vote article-vote-up'}}{{投票'down' role='radio' class='button article-vote article-vote-down'}}{{投票'label' class='article-vote-label'}}
- 在Article Page模板中添加以下代码:
为文章和帖子添加内容标签
默认情况下,标准的哥本哈根主题在文章、社区帖子和搜索页面上显示内容标签。如果使用自定义主题或市场主题,则可能需要更新主题以在这些页面上显示内容标记。首先,您可以使用以下哥本哈根主题的模板文件作为指南:
一旦适应了,就可以向其他页面添加内容标签。例如,下面的代码片段将内容标记列表添加到社区主题页面模板。
{{#每个帖子}}…{{#if(比较content_tags。长度”>“0)}}< ul类=“content-tag-list”>{{#每个content_tags}} <李类=“content-tag-item”>{{#链接“search_result”content_tag_id = id}}{{名称}}{{/链接}}< /李>{{/每个}}< / ul >{{/如果}}…{{/每个}}
向自定义帮助中心主题添加徽章
注意:2020年9月1日起默认提供徽章。< / div >如果不想使用标准的哥本哈根主题,可以创建自定义主题。但是,徽章要求您使用主题模板API v2.如果你仍然使用v1,使用升级说明这样做。你也可以在Zendesk中找到这样做的灵感亚博GitHub上的示例主题.< / div >本主题包括:
添加新的用户配置文件操作助手
如果您想为代理颁发徽章,则必须添加奖励徽章选项。但是,在执行此操作之前,必须添加新的操作帮助器。
添加操作助手声明
- 打开主题在线代码编辑器,转到代理的用户配置文件页面。
页面文件名:user_profile_page.hbs
- 找到编辑辅助声明。
{{编辑}}
- 用新的动作助手声明替换编辑助手声明。
{{行动}}
现在特工们可以颁发徽章了。新按钮将根据您的首选项使用CSS样式。要获得更多灵感,请参阅Zendesk亚博示例主题.
在帖子列表页面上显示标题徽章
您可以在文章列表页面中添加标题徽章作为位于作者名称旁边的标签。这看起来类似于post状态标签,因为为了简单起见,样式类是被重用的。
在帖子列表页面上显示标题徽章
- 打开主题在线代码编辑器,然后转到
页面文件名:community_topic_page.hbs
- 找到作者名字的声明。哥本哈根会议的主题是这样的:
<李类=“元数据”> {{author.name}} < /李>
- 将这个代码段添加到它后面的行中:
{{#每个author.badges}}<李类=“元数据”>{{#是category_slug "标题"}}< span class = "状态标签”>{{名称}}< / span >{{/}}李< / >{{/每个}}
对于高级用户-不要(重新)使用
状态标签
类,而是创建一个新的专门的CSS类,可以独立于状态标签的样式进行修改。这是一个社区成员的标题徽章的例子
在帖子和评论页面上显示标题徽章
在帖子列表页面上显示标题徽章
- 打开主题在线代码编辑器,然后转到
页面文件名:community_post_page.hbs
- 找到作者名字的声明。哥本哈根会议的主题是这样的:
<李类=“元数据”> {{author.name}} < /李>
- 将这个代码段添加到它后面的行中:
{{#每个author.badges}}<李类=“元数据”>{{#是category_slug "标题"}}< span class = "状态标签”>{{名称}}< / span >{{/}}李< / >{{/每个}}
在用户简介页面上显示头衔和成就徽章
在用户简介页面上,你可能想要添加的不仅仅是标题徽章,例如,你还可以添加用户的成就。下面的例子假设每个成就徽章都有一个图形图标。根据哥本哈根会议的主题,你们的成就徽章可能是这样的:
在用户的个人资料页面上显示头衔和成就徽章
- 打开主题在线代码编辑器,然后转到
页面文件名:user_profile_page.hbs
- 找到文件中显示用户名的行。例如:
{{#if用户。Url}} {{user.name}} < / >{{其他}}{{user.name}}{{/如果}}< / h1 >
- 将该代码段替换为以下代码段:
{{#if用户。Url}} {{user.name}} < / >{{其他}}{{user.name}}{{/如果}}{{#每个user.badges}}{{#是category_slug "标题"}}< span class = "状态标签”>{{名称}}< / span >{{/}}{{/每个}}
{{#每个user.badges}}{{#是category_slug“成就”< span style=" font - family:宋体;text-align:中心;填充:0.5 em;利润:0.5 em;背景:白色;border - radius: 0.2 em;" > < img src = " {{icon_url}}”=“40”高度> < br > <跨风格= "字体大小:0.8 em;“>{{名称}}< / span > < / div >{{/}}{{/每个}}< / div >在本例中,所有CSS样式都是内联的,以保持示例简单。对于最佳实践,可以使用这些例子来获得灵感,但要花时间确保样式适合您的主题
允许用户查看帮助中心的用户配置文件
本节描述如何更新必要的模板,以便帮助中心中的用户可以单击作者名称或头像并查看用户的配置文件。
注意:默认情况下,用户配置文件可用标准的主题以及2016年6月20日后定制的主题。< / div >< / div >本节讨论的解决方案涉及使用{{/each}}链接
在Curlybars模板语言中使用helper,请参见链接的助手在模板文档中更新以下模板: 文章对Article页面模板进行以下更新。
更新文章的作者名称替换以下内容
如果
布洛克:{{#如果article.author。Url}} {{article.author.name}} < / >{{其他}}{{article.author.name}}{{/如果}}
使用以下工具
链接
助手:{{#链接"user_profile" id=article.author。Id class="user-profile"}} {{article.author.name}} {{/link}}
更新注释作者名称替换以下内容
如果
布洛克:{{#如果作者。Url}} {{author.name}} < / >{{其他}}{{author.name}}{{/如果}}
使用以下工具
链接
helpfer:{{#链接"user_profile" id=author。类id =“用户配置文件”}}{{author.name}}{{/链接}}
更新文章和评论作者的头像替换如下图像标签:
< img src = " {{article.author。avatar_url}} " alt = "阿凡达" / >
使用以下工具
链接
助手:{{#链接"user_profile" id=article.author。Id class="user-profile"}} {{/link}}
社区的帖子对Community Post页面模板进行以下更新。
更新文章作者的名字替换以下内容
如果
布洛克:{{#如果post.author。Url}} {{post.author.name}} < / >{{其他}}{{post.author.name}}{{/如果}}
使用以下工具
链接
助手:{{#链接"user_profile" id=post.author。类id =“用户配置文件”}}{{post.author.name}}{{/链接}}
更新注释作者的名称替换以下内容
如果
布洛克:{{#如果作者。Url}} {{author.name}} < / >{{其他}}{{author.name}}{{/如果}}
使用以下工具
链接
助手:{{#链接"user_profile" id=author。类id =“用户配置文件”}}{{author.name}}{{/链接}}
更新帖子作者的头像替换如下图像标签:
< img src = " {{post.author。avatar_url}} " alt = "阿凡达" / >
使用以下工具
链接
助手:{{#链接"user_profile" id=post.author。Id class="user-profile"}} {{/link}}
更新评论作者的头像替换如下图像标签:
< img src = "{{作者。avatar_url}} " alt = "阿凡达" / >
使用以下工具
链接
助手:{{#链接"user_profile" id=author。Id class="user-profile"}} {{/link}}
搜索结果对搜索结果模板进行以下更新。
更新结果中文章的作者名称替换以下内容
如果
块{{#每个article_results}}
布洛克:{{#如果作者。Url}} {{author.name}} < / >{{其他}}{{author.name}}{{/如果}}
使用以下工具
链接
助手:{{#链接"user_profile" id=author。类id =“用户配置文件”}}{{author.name}}{{/链接}}
更新结果中帖子的作者名称替换以下内容
如果
块{{#每个post_results}}
布洛克:{{#如果作者。Url}} {{author.name}} < / >{{其他}}{{author.name}}{{/如果}}
使用以下工具
链接
助手:{{#链接"user_profile" id=author。类id =“用户配置文件”}}{{author.name}}{{/链接}}
更新旧主题中的搜索结果如果您的主题较旧,则搜索结果可能使用
{{元}}
助手。在这种情况下,您可以使用本节中描述的代码将作者名称链接到帮助中心中的配置文件页面。您可能需要更新搜索结果页面的CSS样式,使其看起来统一。
更新结果中文章的作者名称替换以下div标签:
{{text}}.与以下:
{{text}}对于最终结果:
{{#每个article_results}} <李类=“搜索结果”> < a href = " {{url}}”类=“search-result-link”>{{标题}}< / >{{#如果vote_sum}} <跨类=“search-result-votes”> {{vote_sum}} < / span >{{/如果}}< ol类=“面包屑”>{{#每个path_steps}} <李title =“{{名称}}" > < a href = " {{url}} >{{名称}}< / > < /李>{{/每个}}< / ol > < div class = " search-result-description >{{文本}}< / div > < div class = " search-result-meta " > < span dir =“自动”class =“search-result-meta-name”>“user_profile”id ={{#联系作者。类id =“用户配置文件”}}{{author.name}}{{/链接}}< / span > <跨类=“search-result-meta-time”>{{日期created_at}} < / span > < / div > < /李>{{/每个}}
更新结果中帖子的作者名称添加:
< ol类=“面包屑”>{{#每个path_steps}} <李title =“{{名称}}" > < a href = " {{url}} >{{名称}}< / > < /李>{{/每个}}< / ol >
对于最终结果:
{{#每个post_results}} <李类=“搜索结果”> < a href = " {{url}}”类=“search-result-link”>{{标题}}< / > < ol类=“面包屑”>{{#每个path_steps}} <李title =“{{名称}}" > < a href = " {{url}} >{{名称}}< / > < /李>{{/每个}}< / ol > < div class = " search-result-description >{{文本}}< / div > < div class = " search-result-meta " > < span dir =“自动”class =“search-result-meta-name”>“user_profile”id ={{#联系作者。Id class="user-profile"}} {{author.name}} {{/link}}
启用帮助中心主题中的子节
你可以添加部分帮助您集中知识库,以便在内容层次结构中创亚博官方app建更多级别。如果您使用的主题是在2019年3月29日之前定制的,则必须向帮助中心自定义主题添加代码以启用子节。以下代码来自哥本哈根主题的后续版本。
在搜索结果页面中添加多个帮助中心的侧边栏过滤器和结果
帮助中心搜索允许用户跨帮助中心进行搜索(如果您有多个帮助中心),并在搜索结果页面上带有过滤器的单一统一提要中显示来自帮助中心、知识库和社区的搜索结果。亚博官方app
如果您使用的主题是在2019年3月29日之前定制的,则必须向帮助中心自定义主题添加代码,以支持统一的搜索结果和跨多个帮助中心进行搜索。如果您有多个帮助中心,则需要为每个帮助中心更新主题。
注意:中默认支持统一的搜索结果和跨多个帮助中心的搜索标准的主题以及2019年9月25日之后定制的主题。< / div >< / div >在主题中进行所需更改的最快方法是导入支持统一搜索结果的哥本哈根主题的最新版本。这样做,看在指南中添加帮助中心主题.
如果您希望更新现有的自定义主题,本节将概述需要进行的所有更改。本节讨论的解决方案涉及使用help_center_filters
,过滤器
,subfilters
使用Curlybars模板语言中的helpers来更新以下文件:更新搜索结果模板以添加边栏过滤器
您需要更新搜索结果模板以添加边栏过滤器并循环遍历结果。
添加侧栏过滤器
这段代码示例演示了如何使用新的过滤器帮助程序在搜索结果页面侧栏中实现搜索facet。
插入下列代码
< div class = "搜索结果”>
在搜索结果模板中:循环遍历结果这段代码说明了如何使用{{results}}帮助器来循环遍历统一的搜索结果。
替换两个
{{article_results}}
而且{{post_results}}
helper及其关联的搜索结果-小标题H3s在搜索结果模板中输入以下内容:
{{#如果结果}}< ul类=“search-results-list”>{{#每个结果}}<李类=“search-result-list-item结果——{{类型}}" > < h2类=“search-result-title”> < a href = " {{url}}”类=“results-list-item-link”>{{标题}}< / > < / h2 > <文> < div class = " search-result-icons " >{{#如果vote_sum}} <跨类=“search-result-votes”> {{vote_sum}} < / span >{{/如果}}{{#如果comment_count}} <跨类=“search-result-meta-count”> {{comment_count}} < / span >{{/如果}}< / div > < ul类= " meta group " > <李> < ol class = "面包屑search-result-breadcrumbs”>{{#每个path_steps}} <李title =“{{名称}}" > < a href = " {{url}} >{{名称}}< / > < /李>{{/每个}}< / ol > < /李> <李类=“元数据”> {{author.name}} < /李> <李类=“元数据”>{{日期created_at}} < /李> < / ul > < div class = " search-results-description " >{{文本}}< / div > < /文章> < /李>{{/每个}}< / ul >{{其他}}< p > {{t ' no_results_unified}}{{#链接的help_center}} {{t ' browse_help_center}}{{/链接}}< / p >{{/如果}}
更新搜索结果页面中侧边栏过滤器的CSS样式
您可以为侧栏过滤器添加CSS样式。下面的例子是基于哥本哈根主题的。
确保以下CSS规则包含在你的style.css文件中:
/*****搜索结果*****/ .search-results {display: flex;flex-direction:列;flex-wrap:包装;justify-content:之间的空间;} @media (min-width: 1024px) {.search-results {flex-direction: row;}} .search-results-column {flex: 1;} @media (min-width: 1024px) {.search-results-column {flex: 0 0 75%;}} .search-results-sidebar {border-top: 1px solid #ddd;Flex: 10自动;margin-bottom: 20 px; padding: 0; } @media (min-width: 1024px) { .search-results-sidebar { border: 0; flex: 0 0 20%; height: auto; } } .search-results-sidebar .sidenav-item[aria-selected="true"] { background-color: $brand_color; color: $brand_text_color; text-decoration: none; } .search-results-subheading { font-size: 18px; font-weight: 600; } .search-results-list { margin-bottom: 25px; } .search-results-list > li { padding: 20px 0; } .search-results-list > li:first-child { border-top: 1px solid #ddd; } .search-results-list > li h2 { margin-bottom: 0; } .search-result-title { font-size: 16px; } .search-result-description { margin-top: 15px; word-break: break-word; } .search-result-votes, .search-result-meta-count { color: lighten($text_color, 20%); display: inline-block; font-size: 13px; font-weight: 300; padding: 4px 5px; position: relative; } .search-result-votes::before, .search-result-meta-count::before { color: $brand_color; } [dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count { margin-left: 5px; } [dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before { margin-right: 3px; } [dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count { margin-right: 5px; } [dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before { margin-left: 3px; } .search-result-votes::before { content: "\1F44D"; } .search-result-meta-count::before { content: "\1F4AC"; } .search-result .meta-group { align-items: center; } .search-result-breadcrumbs { margin: 0; } .search-result-breadcrumbs li:last-child::after { content: "·"; display: inline-block; margin: 0 5px; } /* Non-latin search results highlight */ /* Add a yellow background for Chinese */ html[lang|="zh"] .search-result-description em { font-style: normal; background: yellow; } /* Use bold to highlight for the rest of supported non-latin languages */ html[lang|="ar"] .search-result-description em, html[lang|="bg"] .search-result-description em, html[lang|="el"] .search-result-description em, html[lang|="he"] .search-result-description em, html[lang|="hi"] .search-result-description em, html[lang|="ko"] .search-result-description em, html[lang|="ja"] .search-result-description em, html[lang|="ru"] .search-result-description em, html[lang|="th"] .search-result-description em { font-style: bold; }
更新搜索结果页面中可折叠侧边栏的JavaScript
您可以为搜索结果页面中的可折叠侧边栏添加JavaScript。下面的例子是基于哥本哈根主题的。
在自定义主题中替换script.js文件中的以下块:
//将展开的aria切换到可折叠元素Array.prototype.forEach.call(document.querySelectorAll('。可折叠-nav, .可折叠-sidebar'),函数(el) {el。addEventListener('点击',函数(e) {e.s stoppropagation ();var isExpanded = this.getAttribute('aria-expanded') === 'true';这一点。setAttribute(“aria-expanded”!扩大);});});
使用以下代码片段:
//将展开的咏叹调切换到可折叠的元素var collapsible = document.querySelectorAll('。collapsible-nav .collapsible-sidebar ');Array.prototype.forEach。call(可折叠的,函数(el) {var toggle = el. queryselector('。collapsible-nav-toggle .collapsible-sidebar-toggle ');埃尔。addEventListener('点击',函数(e) {toggleNavigation(切换,这个);});埃尔。addEventListener('keyup', function(e) {if (e. keycode === 27){//退出键关闭导航(切换,这个);}});});
27日评论
-
你好,
有没有人可以帮助我添加子节到我的自定义HC代码?
我努力让小节的子部分显示,如果它没有一篇文章在它(即。子部分有文章,但直到在部分本身有一篇文章,它不会显示在分类页面上),并努力保持相同的布局与子部分级别的部分,因为它是在类别与部分级别。
蒂娅!
凯瑟琳
-
你好@……,
只是为了让我得到它的权利,你希望显示一个“空”部分?
我不确定这是可能的(至少我没有设法做到这一点),但我有一个建议的解决方案是:
- 在你想要显示的部分上创建一篇文章(如果通过搜索功能找到,可以找到)李< / >
- 创建一个自定义的section模板,在其中修改html,删除显示/列出文章的部分来自Zendesk的帮亚博助指南
- 编辑Section并分配新模板并发布Section和文章李< / >
我通常在模板中反复设计、测试,直到得到我想要的结果。您还可以在发布之前在“预览模式”中预览它。
我希望这能帮助你更接近你想要实现的目标,祝你好运!
/ / Emelie
-
Current_local.name技巧不起作用。
我正在使用这个列表:https://support.亚博zendesk.com/hc/en-us/articles/203761906-Zendesk-language-support-by-product
出于某种原因,“语言”的重命名是有用的英语(世界)被定义为“变体”,但所有其他国家都不起作用(爱沙尼亚、立陶宛、拉脱维亚、卢森堡……)
-
嘿@……
尝试这样做(语言名称可以更改):
{{#包含current_locale。url " / en - us "}}
真正的
{{其他}}
假
{{/包含}} -
我的活动有“{{请求}}”模板变量。首页没有。是否有一种简单的方法将“{{requests}}”公开到已登录用户的主页?
我想在主页上展示他们最近的5个请求,这样更容易看到。
如果不能做到这一点,自定义页面可以做到这一点吗?从本质上讲,我想从我们的产品的支持,有他们的请求,然后知识库显示在它的着陆页面。亚博官方app我的产品一站登陆页。我们使用SSO,所以我们的用户已经从应用程序到那里进行了身份验证。
-
你好,布莱克!我想了一会儿,看看我是否可以变得有创意,但没有任何方法可以让我想象这可以完成。正如您所注意到的,“{{requests}}”不存在于主页模板和自定义页面中不包含该助手.我希望我有更好的消息,如果我想到什么,我会在这里给你写信。
-
格雷格Katechis-谢谢你的考虑。我认为这需要用自定义javascript来调用我们托管的api端点,然后使用REST api并返回数据。这里的拦截器:1)简单的文档显示如何添加javascript调用web请求到第三方服务器2)任何提示,我们如何验证我们的服务器代码,用户帐户实际上已验证…比如如果我们有/api/getTickets?user=
我们需要验证用户实际上以某种方式登录到zendesk,这样他们就不能利用api来获得其他人的门票。亚博 -
1)为此,您可以从帮助中心的自定义代码中发出AJAX请求,以发起对服务器/中间件的调用。虽然这不是你想要完成的确切场景,这篇文章应该给出你需要的基本框架,然后你可以换出你的URL/端点。
2)这个给我带来了各种各样的问题……无论是从基本实现的角度,还是从安全的角度。我们在Guide中没有任何使用OAuth的方法,这将是实现这一目标的最简单的方法。您还可以使用signed_in助手来确认某人已登录,然后获取CSRF令牌来执行…一些聪明的吗?就像我提到的,我对此感到不舒服,但也许这个想法会激发其他人的一些功能解决方案!
-
谢谢格雷格。感谢链接和快速回复。也许我可以获得一个由登录设置的值,以唯一地标识会话或其他东西。我要四处打探。我可以在jwt流的return_to部分提供一个令牌。然后修改每个页面模板以将该标记存储在一个cookie中。并将其与服务器Ajax调用一起传递,当然还将相同的令牌存储在用户数据库中,以便进行检查。或者可能只是主入口点页面,并有它只工作,如果他们重定向到那里。我会考虑一下的。
-
哦,如果你使用JWT,这是个好主意!我不建议将令牌存储在数据库中,因为每次登录都会改变,但您可以使用Zendesk的共享密钥来验证服务器上的签名。亚博JTI可能会导致一个问题,不过如果您只是将其存储为一个cookie,而没有执行传统意义上的任何身份验证/授权,这可能会起作用。
如果你把它修好了,或者遇到了什么问题,请告诉我。对于其他正在寻找类似解决方案的用户来说,这可能是一个很好的提示!
-
看起来jwt令牌存储在“Session Storage.z2_sunco_widget_auth.jwt”中的对象中
因此,在发送到服务器的请求中,我们可以包括用户的电子邮件、jwt和JTI。服务器将接受JTI并重新分配有效负载。如果有效负载与请求提供的jwt匹配,那么我们可以假设用户实际上是提供给请求的电子邮件。
至于如何获得JTI,我认为有两种方法……
1.每次构建请求时将JTI存储在我们的用户表中…缺点是可能的同步问题。例如,我们计划在我们的产品中只包含jwt链接,以避免从最终用户的角度来看任何可感知的故障重定向行为。例如,要访问/hc/article/103,我们的链接将是https://subdomain.亚博zendesk.com/jwt?jwt= <标记> &return_to = https://subdomain.zendesk.com/hc/article/103
2.在return_to中传递JTI作为GET参数,并在每个页面模板中使用自定义Javascript代码将其存储到一个cookie中。CON这里是长url看起来恶心和添加潜在的用户书签链接与JTI在它…也许可以通过更新url来缓解这个问题。
3.让我们的帮助台在我们域的子域上工作。使用https://support.mydomain.com而不是https://.zendesk.亚博com,让我们的webapp设置一个cookie根域,zendesk代码也可以看到。可能是最好的选择。 有问题要问你…这个z2_sunco_widget_auth是JWT令牌的可靠密钥吗?太阳舞的部分让我很困惑。另外,我不是智威汤逊的安全专家,我不明白为什么暴露JTI会那么不安全…考虑到你不能在没有共享秘密的情况下签署有效载荷但也许我遗漏了一些东西。如果您愿意,请随意与我私信。
-
我需要禁用zendesk子域上的搜索索引。亚博
只允许它在我们公司的域。
我想在标题模板中添加以下一行
但前提是域名是helpcenter。模板中是否存在存储当前域的变量?
https://stackoverflow.com/q/71527073/7921383 -
是否可以通过标签过滤搜索结果?
如
第一条被标记为A
第二条的标签是B
第三条标示为A C我想为每个标签添加一个边栏过滤器。
如果我选择筛选器A,我将只看到文章1和3。 -
嗨,卡特里娜飓风,
目前还没有一种通过标签进行过滤的方法,尽管标签与搜索词匹配的文章将在搜索结果中排名靠前。如果您想向我们的产品团队建议这一点,请将您的用例发布到我们的反馈-帮助中心(指南)主题,使用这个模板.谢谢!
-
你好,我试图在我们的自定义模板(哥本哈根1.8.1)中添加内容标签功能,但面临一些问题。
我已经成功地在我们的知识库文章中添加了内容标签,但仍在研究如何将它们添加到搜索结果中。亚博官方app我只是看看而已search_results.hbs最近发布的。但如果我把这些行添加到我的旧模板中,它会说“content_tag_filters”不存在。不同版本的变量名是否不同?有没有办法在哥本哈根1.8.1上实现这个功能?
提前谢谢你:)
Taehyoung
-
我的问题和Taehyoung金以上。感谢任何帮助-谢谢!
-
对于我的模板content_tag_filters不存在相同的内容。能帮我把它放进去吗?
-
关于content_tag_filters也一样。任何帮助都将不胜感激!
-
blak3r你能解决在一个单独的/主页上安全地获得请求,而不暴露身份验证用户不应该访问的门票吗?
我们正在寻找有类似的东西(按钮的形式在顶部,[请求|文章列表]在一个伸缩框下面。如果没有"{{requests}}"帮助器,我们目前考虑的解决方案是iFrame / EMBED SRC=,然后用CSS样式。这是可行的,但并不像我们希望的那样安全。
-
你好,
哥本哈根的当前版本是Theme版本2.19.4。我已经尝试了content_tag_filterssearch_results.hbs而且没有任何问题。不幸的是,由于定制超出了我们的范围,最好的选择是使用哥本哈根主题的最新版本。
-
你好,
我们正在进行研究,以改善我们的帮助中心开发人员的体验,并很乐意与任何尝试编辑帮助中心主题代码的人交谈。
如果你感兴趣,请回答在这里注册回答3个调查问题。我会联系你安排一个30分钟的Zoom通话。
面试将是一个半结构化的面试,我们希望听到你向我们讲述你在定制方面做过或尝试过的例子,以及你使用工具、文档等的经验。
期待与你们所有人交谈。
Gorka Cardona-Lauridsen
Zendesk Guide高级产品经理亚博 -
你好!
我试图在分类页面的文章标题下面添加每篇文章的正文片段。
这是代码原样:
< ul类= "文章列表" >
{{#每个文章}}
{{#如果提升}}
< svg xmlns = "http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}"> .
< / svg >
{{/如果}}
< a href = " {{url}}”类=“article-list-link”>{{标题}}< / >
{{#如果内部}}
< svg xmlns = "http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}"> .
<矩形宽度= " 12 "高度=“9”x = y =“7”填“2”=“currentColor rx =“1”的国家= " 1 " / >.
< / svg >
{{/如果}}
李< / >
{{/每个}}
< / ul >
我想要的是在{{title}}下面添加{{body}},但我只能打印整篇文章的正文,这显然破坏了整个布局。
我尝试了很多东西,比如{{body。切片0 50}}和更多,但似乎没有工作。
郑重声明:我是一名开发人员,我看过Zendesk文档(加上论坛、堆栈溢出、您的支持等),但似乎什么都不管用。亚博
你能帮我完成这件事吗?
谢谢!
-
顺便说一下,你的控制台会显示“身体”之类的东西。Slice不能被访问”,或者类似于“body不接受这些参数”。
-
托马斯·m·帕拉,
我在我的section页面上使用{{摘录body characters=150}}来实现这一点。
希望这能有所帮助!
对 -
你好@Ryan !
这对我来说很有效。非常感谢! -
嘿,Ze亚博ndesk & Community!我试图在home_page上使用current_locale.name。HBS将根据所选语言更改内容。
我已经能够使用这个在两个头。HBS和footer。hbs没有问题,但得到以下错误时,我试图在home_page.hbs上使用它如果可能的话,我尽量避免使用动态内容功能(只是运气不好)。谢谢!
-
是否有一种方法可以为页面添加元数据?例如,在文章页面上,我想在页眉中添加一个
标记,这样页面爬虫就可以毫不费力地知道文章的标题。但是我找不到一种方法来添加该页面标签,无论是在article_page。HBS或document_head。哈佛商学院(添加 {{#如果article.title}}
<标题> {{article.title}} < /名称>
{{/如果}}只会导致一个错误。
请登录留下评论。
- {{搜索}}李< / >< / ul >< / div >