帮助中心模板化指南

What's my plan?

All Suites

Growth, Professional, Enterprise, or Enterprise Plus

Support with

Guide Professional or Enterprise

每个帮助中心主题都包含一系列可编辑的页面模板和自定义页面。您可以使用帮助中心模板化语言 Curlybars 访问帮助中心数据并操作页面中的内容。

本文章提供了一个配方列表，其中包含您可以使用的代码片段。请记住，您的帮助中心可能已有这些配方中的部分功能，这取决于您使用的是标准主题还是自定义主题，以及您启用帮助中心的日期。

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

注意：本文仅供说明之用。Zendesk 客户支持对自定义代码不提供支持，也不保证代码质量。

本文章涵盖以下主题：

关于 Curlybars 模板化语言
自定义特定类别、组别或文章的页面模板
在语言选择器中自定义语言名称
在语言选择器中隐藏一种或多种语言
让用户按日期或投票数对文章评论进行排序
添加格式工具栏到文章评论编辑器
允许用户对文章评论投票
将即时搜索（自动完成）结果添加到帮助中心
添加联合搜索以在帮助中心搜索中包含外部内容
将生成式搜索结果添加到自定义主题
在“我的活动 > 关注”页面上添加订阅类型排序
为“我的活动”中的请求添加排序选项“创建于”和“更新于”
为共享组织中的用户添加关注/取消关注
添加功能以便用户将支持请求抄送给其他用户
添加跟进请求的链接到父请求
在客户门户上对已解决工单启用 CSAT
为文章添加投票按钮
为文章和帖子添加内容标签
为自定义帮助中心主题添加徽章
允许用户在帮助中心查看用户个人资料
在帮助中心主题中启用次组别
将多个帮助中心的侧栏筛选和结果添加到搜索结果页面
将垃圾信息过滤器添加到帮助中心
添加批准到帮助中心
添加服务目录到帮助中心

关于 Curlybars 模板化语言

帮助中心建立在主题框架上，该框架包含用于高级自定义的自有模板化语言。每个帮助中心主题都包含一系列可编辑的模板和可选自定义页面。

可编辑的页面模板定义了每个页面的布局，包含用于知识库文章的模板、用于请求列表的模板等。模板是文本文件，会在用户查看时转换为 HTML 页面。每个模板都包含可通过双花括号识别的 HTML 标记和表达式，例如 {{post.title}}。

自定义页面内置于帮助中心主题的代码库中，并有一个可从帮助中心任何地方链接的特定 URL。您可根据个人需求使用自定义页面从头开始创建页面。例如，您可以使用自定义页面为帮助中心创建特别登录页面，甚至可以创建新页面以嵌入 Zendesk 以外来源的内容。

模板化语言名为 Curlybars，实现了大部分 Handlebars 语言。但 Handlebars 在客户端呈现，而 Curlybars 则在服务器端呈现。

您可以使用帮助中心模板化语言访问帮助中心数据并操作页面中的内容。在以下示例中，帮助中心将呈现所有在页面上留下评论的人员的姓名和头像列表：

{{#each comments}}
  <li>
    <div class="comment-avatar">
      <img src="{{author.avatar_url}}" alt="Avatar" />
    </div>
    <div class="comment-author">
      {{author.name}}
    </div>
  </li>
{{/each}}

以前您可以使用组件自定义帮助中心，但无法自定义组件本身，除非使用 Javascript 对其进行操作。而有了 Curlybars，您就可以访问和编辑以前隐藏在组件中的 HTML。

如需更多信息，请参阅：

自定义特定类别、组别或文章的页面模板

您可以分别为特定类别、组别和文章自定义模板。

适用模板

类别
组别
文章

配方

指定 is 块中的类别、组别或文章 ID：
```
{{#is id 200646205}}
  ...
{{/is}}
```

例如

在组别模板中插入以下块可自定义组别 200646205 和 203133596 的模板：

{{#is section.id 200646205}}
  <p><strong>This is important security information! Pay attention!</strong></p>
{{/is}}
{{#is section.id 203133596}}
  <p>Videos available at <a href="https://www.somelink.com">Learning to fly</a></p>
{{/is}}

参考

是助手

在语言选择器中自定义语言名称

您可以在帮助中心每个页面的语言选择器中自定义语言名称。如果您想使用一种语言变量（例如英语（美国））来表示所有语言变量（例如英语），这将非常有用。

适用模板

页首

适用表达式

{{#if alternative_locales}}...{{/if}}

配方

将表达式 {{current_locale.name}} 替换为以下条件表达式：

{{#is current_locale.name 'English (US)'}}
  English
{{else}}
  {{current_locale.name}}
{{/is}}

并将备用区域设置表达式 {{name}} 替换为以下条件表达式：

{{#is name 'English (US)'}}
  English
{{else}}
  {{name}}
{{/is}}

例如

{{#if alternative_locales}}
  <div class="dropdown language-selector" aria-haspopup="true">
  <a class="dropdown-toggle">
  {{#is current_locale.name 'English (US)'}}
    English
  {{else}}
    {{current_locale.name}}
  {{/is}}
  </a>
  <span class="dropdown-menu dropdown-menu-end" role="menu">
  {{#each alternative_locales}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
    {{#is name 'English (US)'}}
      English
    {{else}}
      {{name}}
    {{/is}}
    </a>
  {{/each}}
  </span>
  </div>
{{/if}}

参考

是助手

在语言选择器中隐藏一种或多种语言

如果某种语言内容尚未准备好发布，则在语言选择器中隐藏该语言可能会有用。

适用模板

页首

适用表达式

{{#each alternative_locales}}...{{/each}}

配方

将表达式

<a href="{{url}}" dir="{{direction}}" rel="nofollow"
              role="menuitem"> {{name}} </a>

替换为以下条件表达式：

{{#is name 'Français'}}
  {{! do nothing }}
{{else}}
  <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
  {{name}}
  </a>
{{/is}}

例如

{{#each alternative_locales}}
  {{#is name 'Français'}}
    {{! do nothing }}
  {{else}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
      {{name}}
    </a>
  {{/is}}
{{/each}}

参考

是助手

让用户按日期或投票数对文章评论进行排序

文章评论默认按日期倒序排序。您可添加日期和投票链接，以便用户按日期或投票数对评论进行排序。

注意：日期和投票数排序链接默认可用于标准主题和 2015 年 11 月 30 日新社区发布之后的自定义主题。

适用模板

文章

适用 HTML 元素

<section class="article-comments">...</section>

配方

在评论部分的标题标签 <h2>{{t 'comments'}}</h2> 后，且最好是在表达式 {{#if comments}}（如有）后，插入以下 div 标签，确保在无人评论的情况下不会出现排序器：
```
<div class="comment-sorter">
  Sort by: 
  {{#each comment_sorters}}
    <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
  {{/each}}
</div> 
```

例如

<section class="article-comments">
  <h2>{{t 'comments'}}</h2>
    {{#if comments}}

    <div class="comment-sorter">
      Sort by: 
      {{#each comment_sorters}}
        <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
     {{/each}}
    </div> 
     
    <ul class="comment-list">
      {{#each comments}}
      ...

参考

comment_sorters 属性

添加格式工具栏到文章评论编辑器

您可以添加格式工具栏到文章评论编辑器。用户可以添加粗体和斜体、无序或有序列表、图像和链接。

注意：格式工具栏默认可用于标准主题和 2015 年 11 月 30 日新社区发布之后的自定义主题。

适用模板

文章

适用对象

{{#form 'comment'}}...{{/form}}

配方

查找表格对象中的表达式 {{textarea 'body'}}，并将其替换为 {{wysiwyg 'body'}}

例如

{{#form 'comment' class='comment-form'}}
  <div class="comment-avatar">
    {{user_avatar class='user-avatar'}}
  </div>

  <div class="comment-container">
     {{wysiwyg 'body'}}
     <div class="comment-form-controls">
       {{input type='submit'}}
     </div>
  </div>
{{/form}}

参考

所见即所得助手

允许用户对文章评论投票

用户默认可以对文章投票。您也可以让他们对文章评论投票。

注意：投票链接默认可用于标准主题和 2015 年 11 月 30 日新社区发布之后的自定义主题。

适用模板

文章

适用表达式

{{#each comments}}...{{/each}}

配方

在 <li id="{{anchor}}"> 标签后插入以下 div 标签：

<div class="comment-vote vote">
  {{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
  {{vote 'sum' class="article-vote-sum"}}
  {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
</div>

以上投票助手借用文章投票的 CSS 类来设置评论投票链接的样式。您可以定义自己的类来设置评论投票的样式。

例如

{{#each comments}}
  <li id="{{anchor}}" class="comment">

  <div class="comment-vote vote">
    {{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
    {{vote 'sum' class="article-vote-sum"}}
    {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
  </div>
  
  <div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">
    <img src="{{author.avatar_url}}" alt="Avatar">
  </div>
  ...

参考

投票助手

将生成式搜索结果添加到自定义主题

生成式搜索为您在帮助中心内的搜索查询提供由人工智能生成的答案。生成式搜索为在帮助中心搜索的用户提供问题解答，无需他们单击多个搜索结果。

注意：生成式搜索默认适用于 2025 年 3 月 26 日之后推出的标准主题。如果您的帮助中心是在 2025 年 3 月 26 日之前创建的，并且使用自定义主题，则必须更新自定义主题才能添加生成式搜索。生成式搜索适用于所有模板 API 版本。如果需要，您可以在搜索设置中取消激活生成式搜索以禁用它。

生成式搜索激活后，可评估用户在帮助中心搜索中输入的问题。最匹配的文章和帖子将由生成式人工智能进行评估，然后生成答案。在已配置联合搜索的 Enterprise 服务模式中，生成式人工智能还会评估外部内容，并可将其包含在答案中。生成的答案默认发布在搜索结果的顶部。请参阅使用生成式搜索对搜索查询提供人工智能答案。

适用模板

搜索结果页面 (search_results.hbs)

配方

将 {{generative_answers}} 助手添加到您要显示生成式答案的主题的 search_results.hbs 模板中。

示例

<section id="main-content" class="search-results-column">
{{generative_answers}}
<h1 class="search-results-subheading">

参考

更新自定义主题（Guide 管理员）

在知识管理中，单击侧栏中的自定义设计 ()。
“主题”页面随即打开。
单击您要编辑的主题上的自定义。
单击编辑代码。
在模板下，单击 search_results.hbs。
将 {{generative_answers}} 助手代码添加到您要显示生成式答案的主题的 search_results.hbs 模板中。
单击保存。
激活后，如果您发现快速回答框 UI 与您自定义主题的字体和颜色不匹配，可能是因为以下原因之一：
- 您已在主题设置界面中进行所需的设置。但是，设置值不匹配您的主题，因为主题外观和风格硬编码在 CSS 文件中。要更新颜色和字体设置，请参阅帮助中心品牌打造。
- 主题设置界面中没有部分或全部设置。在这种情况下，您需要添加设置并设置其值，以匹配主题的其余部分。为此，您可使用来自 Github 的以下标识符更新 manifest.json 文件，并将每个标识符的值替换为与您的主题匹配的字体或颜色代码：
  - 颜色设置标识符：
    - text_color
    - link_color
    - hover_link_color
    - visited_link_color
  - 字体设置标识符
    - heading_font
    - text_font

将即时搜索（自动完成搜索）结果添加到自定义帮助中心主题

您可以将即时搜索添加到自定义主题，以便在用户在搜索框中输入搜索词时显示推荐文章的链接。

注意：即时搜索默认可用于标准主题和 2016 年 7 月 5 日即时搜索发布之后的自定义主题。如有必要，您可以从主题中移除即时搜索将其禁用。

启用即时搜索后，当用户在搜索框中输入搜索词时，最多会显示 6 篇推荐文章。即时搜索仅根据文章标题对文章进行匹配。用户可直接从搜索框中选择匹配的文章，而无需先转到搜索结果页面。

适用模板

包含您的搜索表达式的任何模板（通常是页首或主页模板）

适用表达式

{{search}}

配方

添加 instant=true 到搜索表达式。
```
{{search instant=true}}
```

例如

<div class="search-box">
  <h1 class="help-center-name">{{help_center.name}}</h1>
  {{search instant=true}}
</div>

添加联合搜索以在帮助中心搜索中包含外部内容

在帮助中心搜索结果模板中启用联合搜索分为两部分：

添加侧栏筛选
循环查看结果

添加侧栏筛选

您需要更新侧栏筛选中所用属性才能更新搜索结果模板。

在

<div
          class="search-results">

中更新以下代码。

<section class="search-results-sidebar">
{{#if source_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each source_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      <buttonclass="see-all-filters"aria-hidden="true"aria-label="{{t'show_more_sources'}}">{{t'show_more_sources'}}</button>    </ul>
  </section>
{{/if}}
{{#if type_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each type_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
    </ul>
  </section>
{{/if}}
{{#if subfilters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    {{#is current_filter.identifier 'knowledge_base'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
    {{/is}}
    {{#is current_filter.identifier 'community'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
    {{/is}}
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each subfilters}}
        <li>
          {{#if selected}}
            <a href="{{url}}" class="sidenav-item current" aria-current="page">
          {{else}}
            <a href="{{url}}" class="sidenav-item">
          {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      {{#is current_filter.identifier 'knowledge_base'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
      {{/is}}
      {{#is current_filter.identifier 'community'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
      {{/is}}
    </ul>
  </section>
{{/if}}
</section>

循环查看结果

此代码段演示了如何使用 {{results}} 助手循环查看联合搜索结果：

{{#if results}}
<ul class="search-results-list">
  {{#each results}}
	<li class="search-result-list-item result-{{type}}">
	  <h2 class="search-result-title">
		<a href="{{url}}" class="results-list-item-link"{{#if is_external}}
               target=”_blank” {{/if}}>
                     {{title}}
                     {{#if is_external}}
                       <svg viewBox="0 0 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"><path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/></svg>
                     {{/if}}

</a>
	  </h2>
	  <article>
		<div class="search-result-icons">
		  {{#if vote_sum}}
			<span class="search-result-votes">{{vote_sum}}</span>
		  {{/if}}
		  {{#if comment_count}}
			<span class="search-result-meta-count">
			  {{comment_count}}
			</span>
		  {{/if}}
		</div>
		<ul class="meta-group">
		  <li>
			<ol class="breadcrumbs search-result-breadcrumbs">
			  {{#each path_steps}}
				<li title="{{name}}"><a href="{{url}}" target="{{target}}">{{name}}</a></li>
			  {{/each}}
			</ol>
		  </li>
		  <li class="meta-data">{{author.name}}</li>
		  <li class="meta-data">{{date created_at}}</li>
		</ul>
		<div class="search-results-description">{{text}}</div>
	  </article>
	</li>
  {{/each}}
</ul>
{{else}}
<p>
  {{t 'no_results_unified'}}
  {{#link 'help_center'}}
	{{t 'browse_help_center'}}
  {{/link}}
</p>
{{/if}}

在“我的活动 > 关注”页面上添加订阅类型排序

您可以在“我的活动 > 关注”页面上允许用户对订阅进行排序，以便其查看订阅。

适用模板

关注页面

配方

在 <nav> 标签下，插入以下代码：

<div class="my-activities-following-header">
  <span class="dropdown">
    <span class="dropdown-toggle">
      {{current_filter.label}}
    </span>
    <span class="dropdown-menu" role="menu">
      {{#each filters}}
        <a href="{{url}}" aria-selected="{{selected}}" role="menuitem">
          {{name}}
        </a>
      {{/each}}
    </span>
  </span>
</div>

为“我的活动”中的请求添加排序选项“创建于”和“更新于”

您可以在“我的活动”中的请求页面上为终端用户添加排序选项“创建于”和“更新于”。

注意：排序选项“创建于”和“更新于”默认可用于标准主题和 2016 年 8 月之后的自定义主题。

适用模板

请求列表页面

配方

将 {{t 'created'}} 替换为：

{{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}}

将 {{t 'last_activity'}} 替换为：

{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}

参考

请求链接助手

为共享组织中的用户添加关注/取消关注

您可以允许用户在其共享组织中接收请求的电邮通知。{{subscribe}} 助手可插入关注按钮，如果用户想在其共享组织中创建或更新请求时接收电邮通知，则可以单击该按钮。如果用户不想再接收更新，也可以选择取消关注。

注意：共享组织的关注按钮默认可用于标准主题和 2016 年 1 月 23 日之后的自定义主题。

适用模板

请求列表页面

适用对象

{{#form 'requests_filter'}}...{{/form}}

配方

添加 {{subscribe}} 助手到表格对象。

例如

{{#form 'requests_filter' class='request-table-toolbar'}}
  {{input 'query' id='quick-search' type='search' class='requests-search'}}
  <div class="request-table-filters">
    {{label 'organization' for='request-organization-select' class='request-filter'}}
    {{select 'organization' id='request-organization-select' class='request-filter'}}
    {{subscribe}}
    {{label 'status' for='request-status-select' class='request-filter'}}
    {{select 'status' id='request-status-select' class='request-filter'}}
  </div>
{{/form}}

参考

订阅助手

添加功能以便已登录用户将支持请求抄送给其他用户

您可以在帮助中心添加功能，以便已登录用户为新旧支持请求添加抄送。为支持请求添加抄送后，被抄送的用户将收到工单更新的电邮通知。

注意：抄送选项默认可用于标准主题和 2015 年 12 月 14 日后自定义主题中的支持请求。

将代码添加到自定义主题后，必须启用该功能（请参阅设置抄送权限）。

适用模板

请求页面

适用对象

{{#form 'comment' class='comment-form'}}...{{/form}}

配方

将以下代码段插入评论表格中。

{{#if help_center.request_ccs_enabled}}  
  <div class="comment-ccs">
     {{token_field 'ccs'
        class="ccs-input"}}
  </div>
 {{/if}}

添加跟进请求的链接到父请求

您可以在跟进请求中显示父请求链接（如有）。

注意：跟进请求中父请求链接默认可用于标准主题和 2016 年 8 月之后的自定义主题。

适用模板

请求页面

配方

将以下代码段添加到您要显示父工单链接（如有）的请求页面模板中：

{{#if request.followup_source_id}}
  <dl class="request-details">
    <dt>{{t 'followup'}}</dt>
    <dd>{{link 'request' id=request.followup_source_id}}
</dd>
  </dl>
{{/if}}

参考

新请求页面

在客户门户上对已解决工单启用 CSAT

您可以使用 CSAT 通过客户门户收集终端用户的反馈。

注意：启用 CSAT 后，客户门户中的 CSAT 选项默认可用于标准主题和基于模板化 API v3.2.0（2024 年 2 月 8 日发布）或更高版本的自定义主题。

适用模板

请求页面

配方

添加 {{#with satisfaction_response}}...{{/with}} 块到 request_page.hbs 模板。

示例

请参阅 GitHub 上的 Copenhagen theme request page.hbs。

添加以下模板代码：

{{#with satisfaction_response}}
  {{#with rating}}
	<dl class="request-details">
	  <dt>{{t 'rating'}}</dt>
	  <dd>
		<div>
		  {{#is scale_type 'numeric'}}
			{{t 'numerical_rating' value=value max_value=max_value}}
		  {{else}}
			{{scale_value}}
		  {{/is}}
		</div>

		{{#link 'survey_response' id=../id}}
		  {{#if ../editable}}
			{{t 'edit_feedback'}}
		  {{else}}
			{{t 'view_feedback'}}
		  {{/if}}
		{{/link}}
	  </dd>
	</dl>
  {{else}}
	{{#if editable}}
	  <dl class="request-details">
		<dt>{{t 'rating'}}</dt>
		<dd>
		  {{#link 'survey_response' id=id}}
			{{t 'add_feedback'}}
		  {{/link}}
		</dd>
	  </dl>
	{{/if}}
  {{/with}}
{{/with}}

参考

satisfaction_response

为文章添加投票按钮

文章上的投票按钮是标准 Copenhagen 主题的一部分。但是，如果您没有看到为文章投票的选项，则可能您已从主题中移除了这些按钮。

用于添加投票按钮的代码可能因主题而异，但这是标准 Copenhagen 主题的代码，以备您不时之需。

适用模板

文章

配方

将以下代码添加到文章页面模板中：

{{#with article}}
  <div class="article-votes">
    <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span>
    <div class="article-votes-controls" role='radiogroup'>
      {{vote 'up' role='radio' class='button article-vote article-vote-up'}}
      {{vote 'down' role='radio' class='button article-vote article-vote-down'}}
    </div>
    <small class="article-votes-count">
      {{vote 'label' class='article-vote-label'}}
    </small>
  </div>
{{/with}}

为文章和帖子添加内容标签

标准 Copenhagen 主题默认在文章、社区帖子和搜索页面上显示内容标签。如果您在使用自定义或市场主题，可能需要更新您的主题，以便在这些页面上显示内容标签。首先，您可以使用以下 Copenhagen 主题的模板文件作为指南：

等熟悉后，您就可以添加内容标签到其它页面。例如，以下代码段可将内容标签列表添加到社区主题页面模板。

{{#each posts}}
  ...

  {{#if (compare content_tags.length ">" 0)}}
    <ul class="content-tag-list">
      {{#each content_tags}}
        <li class="content-tag-item">
          {{#link "search_result" content_tag_id=id}}
            {{name}}
          {{/link}}
        </li>
      {{/each}}
    </ul>
  {{/if}}

  ...

{{/each}}

为自定义帮助中心主题添加徽章

注意：徽章默认自 2020 年 9 月 1 日起可用。

如果您不想使用标准 Copenhagen 主题，可以创建自定义主题。然而，徽章需要使用主题模板化 API v2。如果您仍在使用 v1，请按照升级说明操作。您也可以参考 GitHub 上的 Zendesk 范例主题。

本主题包括：

添加新的用户个人资料操作助手
在帖子列表页面上显示职位徽章
在帖子和评论页面上显示职位徽章
在用户个人资料页面上显示职位和成就徽章

添加新的用户个人资料操作助手

如果您想为专员颁发徽章，则必须添加“授予徽章”选项。然而，在此之前，您必须添加新的操作助手。

添加操作助手声明

打开主题在线代码编辑器，前往专员的用户个人资料页面。
```
Page filename: user_profile_page.hbs
```
找到编辑助手声明。
```
{{edit}}
```
将编辑助手声明替换为新的操作助手声明。
```
{{actions}}
```

现在专员就可以颁发徽章了。新按钮将根据您的首选设置使用 CSS 设置样式。有关更多参考，请参阅 Zendesk 范例主题。

在帖子列表页面上显示职位徽章

您可以将职位徽章添加为帖子列表页面中作者姓名旁边的标签。为简便起见，重复使用了样式类，使这看起来类似于帖子状态标签。

在帖子列表页面显示职位徽章

打开主题在线代码编辑器，前往
```
Page filename: community_topic_page.hbs
```
查找作者姓名声明。在 Copenhagen 主题中，该行如下所示：
```
<li class="meta-data">{{author.name}}</li>
```

将此代码段添加到其后的行中：

{{#each author.badges}}
<li class="meta-data">
   {{#is category_slug "titles"}}
       <span class="status-label">{{name}}</span>
   {{/is}}
</li>
{{/each}}

对于高级用户 - 请勿将 CSS 类 status-label（重复）用于此场景，而要专门创建一个可独立于状态标签样式修改的新 CSS 类。

社区成员职位徽章示例如下：

Gather 徽章职位徽章示例。

在帖子和评论页面上显示职位徽章

在帖子列表页面显示职位徽章

打开主题在线代码编辑器，前往
```
Page filename: community_post_page.hbs
```
查找作者姓名声明。在 Copenhagen 主题中，该行如下所示：
```
<li class="meta-data">{{author.name}}</li>
```

将此代码段添加到其后的行中：

{{#each author.badges}}
<li class="meta-data">
   {{#is category_slug "titles"}}
       <span class="status-label">{{name}}</span>
   {{/is}}
</li>
{{/each}}

在用户个人资料页面上显示职位和成就徽章

在用户个人资料页面上，您可能不仅要添加职位徽章。例如，您也可以添加用户成就。以下示例假定每个成就徽章都有一个图形图标。根据 Copenhagen 主题，您的成就徽章可能如下所示：

收集职位和成就徽章。

在用户个人资料页面上显示职位和成就徽章

打开主题在线代码编辑器，前往
```
Page filename: user_profile_page.hbs
```

查找文件中显示用户名的行，例如：

<h1 class="name">
  {{#if user.url}}
    <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
  {{else}}
    {{user.name}}
  {{/if}}
</h1>

将该代码段替换为以下内容：

<h1 class="name">
  {{#if user.url}}
    <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
  {{else}}
    {{user.name}}
  {{/if}}
  {{#each user.badges}}    {{#is category_slug "titles"}}
      <span class="status-label">{{name}}</span>
    {{/is}}  {{/each}}
</h1>
<div style="margin-top: 1em;">
  {{#each user.badges}}    {{#is category_slug "achievements"}}
      <div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;">
        <img src="{{icon_url}}" height="40"><br>
        <span style="font-size: 0.8em;">{{name}}</span>
      </div>
    {{/is}}  {{/each}}
</div>

本例中，所有 CSS 样式都已内联，确保示例简单易懂。如需最佳实践，可参考这些示例，但要确保样式适合您的主题。

允许用户在帮助中心查看用户个人资料

本节介绍了如何更新必要模板，以便帮助中心用户单击作者姓名或头像查看用户个人资料。

注意：用户个人资料默认可用于标准主题和 2016 年 6 月 20 日之后的自定义主题。

本节讨论的解决方案包括使用 link 助手（帮助中心模板化语言）。请参阅模板化文档中的链接助手以更新以下模板：

文章
社区帖子
搜索结果页面

文章

对文章页面模板进行以下更新。

更新文章作者姓名

将以下 if 块：

{{#if article.author.url}}
  <a href="{{article.author.url}}" target="_zendesk_lotus">
    {{article.author.name}}
  </a>
{{else}}
  {{article.author.name}}
{{/if}}

替换为以下 link 助手：

{{#link "user_profile" id=article.author.id class="user-profile"}}
  {{article.author.name}}
{{/link}}

更新评论作者姓名

将以下 if 块：

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

替换为以下 link 助手：

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}

更新文章和评论作者头像

将以下图像标签：

<img src="{{article.author.avatar_url}}" alt="Avatar"/>

替换为以下 link 助手：

{{#link "user_profile" id=article.author.id class="user-profile"}}
  <img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}

社区帖子

对社区帖子页面模板进行以下更新。

更新帖子作者姓名

将以下 if 块：

{{#if post.author.url}}
  <a href="{{post.author.url}}" target="_zendesk_lotus">
    {{post.author.name}}
  </a>
  {{else}}
    {{post.author.name}}
{{/if}}

替换为以下 link 助手：

{{#link "user_profile" id=post.author.id class="user-profile"}}
  {{post.author.name}}
{{/link}}

更新评论作者姓名

将以下 if 块：

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

替换为以下 link 助手：

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}

更新帖子作者头像

将以下图像标签：

<img src="{{post.author.avatar_url}}" alt="Avatar"/>

替换为以下 link 助手：

{{#link "user_profile" id=post.author.id class="user-profile"}}
  <img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}

更新评论作者头像

将以下图像标签：

<img src="{{author.avatar_url}}" alt="Avatar"/>

替换为以下 link 助手：

{{#link "user_profile" id=author.id class="user-profile"}}
  <img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}

搜索结果

对搜索结果模板进行以下更新。

更新结果中文章的作者姓名

在 {{#each article_results}} 块中，将以下 if 块：

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

替换为以下 link 助手：

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}

更新结果中帖子的作者姓名

在 {{#each post_results}} 块中，将以下 if 块：

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

替换为以下 link 助手：

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}

更新较早主题的搜索结果

如果您有较早主题，搜索结果可能会使用 {{meta}} 帮手。在这种情况下，您可以使用本节所述代码将作者姓名链接到帮助中心的个人资料页面。

您可能需要更新 CSS 样式，使搜索结果页面外观统一。

更新结果中文章的作者姓名

将以下 div 标签：

<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>

替换为以下内容：

<ol
 class="breadcrumbs">
  {{#each path_steps}}
    <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
  {{/each}}
</ol>
<div class="search-result-description">
  {{text}}
</div>
<div class="search-result-meta">
  <span dir="auto" class="search-result-meta-name">
    {{#link "user_profile" id=author.id class="user-profile"}}
      {{author.name}}
    {{/link}}
  </span>
  <span class="search-result-meta-time">{{date created_at}}</span>
</div>

对于最终结果：

{{#each article_results}}
  <li class="search-result">
    <a href="{{url}}" class="search-result-link">{{title}}</a>
    {{#if vote_sum}}
      <span class="search-result-votes">{{vote_sum}}</span>
    {{/if}}
    <ol class="breadcrumbs">
      {{#each path_steps}}
        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ol>
    <div class="search-result-description">
      {{text}}
    </div>
    <div class="search-result-meta">
      <span dir="auto" class="search-result-meta-name">
        {{#link "user_profile" id=author.id class="user-profile"}}
          {{author.name}}
        {{/link}}
      </span>
      <span class="search-result-meta-time">{{date created_at}}</span>
    </div>
  </li>
{{/each}}

更新结果中帖子的作者姓名

添加：

<ol class="breadcrumbs">
  {{#each path_steps}}
    <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
  {{/each}}
</ol>

对于最终结果：

{{#each post_results}}
  <li class="search-result">
    <a href="{{url}}" class="search-result-link">{{title}}</a>
    <ol class="breadcrumbs">
      {{#each path_steps}}
        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ol>
    <div class="search-result-description">
      {{text}}
    </div>
    <div class="search-result-meta">
      <span dir="auto" class="search-result-meta-name">
        {{#link "user_profile" id=author.id class="user-profile"}}
          {{author.name}}
        {{/link}}
      </span>
      <span class="search-result-meta-time">{{date created_at}}</span>
      <span class="search-result-meta-count">
        {{t 'comments_count' count=comment_count}}
      </span>
    </div>
  </li>
{{/each}}

在帮助中心主题中启用次组别

您可以添加次组别到帮助中心知识库，以便在内容层次结构中创建更多级别。如果您使用的是 2019 年 3 月 29 日之前的自定义主题，则必须添加代码到帮助中心自定义主题以启用次组别。Copenhagen 主题的更高版本带有以下代码。

注意：次组别默认可用于 Guide Enterprise 标准主题和 2019 年 3 月 29 日之后的自定义主题。

适用模板

组别

适用对象

section.sections

配方

在 Zendesk 组别页面模板 section_page.hbs 中页首标签 (

<header
              class="page-header">...</header>

) 之后和分页标签 ({{pagination}}) 之前插入以下代码段：

{{#if section.sections}}
  <ul class="section-list section-list--collapsed">
    {{#each section.sections}}
    <li class="section-list-item">
      <a href="{{url}}">
        <span>{{name}}</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
        </svg>
      </a>
    </li>
    {{/each}}
    <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a>
  </ul>
{{/if}}

{{#if section.articles}}
  <ul class="article-list">
    {{#each section.articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
	{{#if promoted}}<span data-title="{{t 'promoted'}}" class="icon-star"></span>{{/if}}
	<a href="{{url}}" class="article-list-link">{{title}}</a>
    </li>
    {{/each}}
  </ul>
{{else}}
  <i class="section-empty">
    <a href="{{section.url}}">{{t 'empty'}}</a>
  </i>
{{/if}}

将多个帮助中心的侧栏筛选和结果添加到搜索结果页面

帮助中心搜索支持用户跨帮助中心进行搜索（如有多个帮助中心），并在搜索结果页面上带有筛选的单个统一信息源中显示来自帮助中心、知识库和社区的搜索结果。

如果您使用的是 2019 年 3 月 29 日之前的自定义主题，则必须添加代码到帮助中心自定义主题以支持统一搜索结果和跨帮助中心搜索。如果您有多个帮助中心，则需要为每个帮助中心更新主题。

注意：标准主题和 2019 年 9 月 25 日之后的自定义主题默认支持统一搜索结果和跨帮助中心搜索。

将所需更改导入主题的最快方法是导入支持统一搜索结果的最新版 Copenhagen 主题。要进行此操作，请参阅添加帮助中心主题到 Guide。

如果您想更新现有自定义主题，可参阅本节，其中概述了您需要进行的所有更改。本节所述解决方案涉及使用 Curlybars 模板化语言中的 help_center_filters、filters 和 subfilters 助手更新以下文件：

搜索结果
CSS
JavaScript

更新搜索结果模板以添加侧栏筛选

您需要更新搜索结果模板以添加侧栏筛选并循环查看结果。

添加侧栏筛选

此代码段演示了如何使用新的筛选助手在搜索结果页面侧栏中实现分面搜索。

将以下代码插入搜索结果模板中的 <div class="search-results">：


<section class="search-results-sidebar">
     {{#if help_center.community_enabled}}
        <section class="filters-in-section collapsible-sidebar">
          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3>
          <ul>
            {{#each filters}}
              <li>
                <a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
      {{#if subfilters}}
        <section class="filters-in-section collapsible-sidebar">
          {{#is current_filter.identifier 'knowledge_base'}}
            <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
          {{/is}}
          {{#is current_filter.identifier 'community'}}
            <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
          {{/is}}
          <ul>
            {{#each subfilters}}
              <li>
                <a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
    </section>

循环查看结果

此代码段演示了如何使用 {{results}} 助手循环查看统一搜索结果。

将搜索结果模板中的 {{article_results}} 和 {{post_results}} 助手及其副标题为 H3s 的相关搜索结果

替换为以下内容：

{{#if results}}
        <ul class="search-results-list">
          {{#each results}}
            <li class="search-result-list-item result-{{type}}">
              <h2 class="search-result-title">
                <a href="{{url}}" class="results-list-item-link">{{title}}</a>
              </h2>
              <article>
                <div class="search-result-icons">
                  {{#if vote_sum}}
                    <span class="search-result-votes">{{vote_sum}}</span>
                  {{/if}}
                  {{#if comment_count}}
                    <span class="search-result-meta-count">
                      {{comment_count}}
                    </span>
                  {{/if}}
                </div>
                <ul class="meta-group">
                  <li>
                    <ol class="breadcrumbs search-result-breadcrumbs">
                      {{#each path_steps}}
                        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
                      {{/each}}
                    </ol>
                  </li>
                  <li class="meta-data">{{author.name}}</li>
                  <li class="meta-data">{{date created_at}}</li>
                </ul>
                <div class="search-results-description">{{text}}</div>
              </article>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <p>
          {{t 'no_results_unified'}}
          {{#link 'help_center'}}
            {{t 'browse_help_center'}}
          {{/link}}
        </p>
      {{/if}}

更新搜索结果页面中侧栏筛选的 CSS 样式

您可以为侧栏筛选添加 CSS 样式。以下示例基于 Copenhagen 主题。

确保您的 style.css 文件中包含以下 CSS 规则：

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@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: 1 0 auto;
  margin-bottom: 20px;
  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。以下示例基于 Copenhagen 主题。

将自定义主题 script.js 文件中以下块：

// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});

替换为以下代码片段：

// Toggles expanded aria to collapsible elements
  var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar');

  Array.prototype.forEach.call(collapsible, function(el) {
    var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle');

    el.addEventListener('click', function(e) {
      toggleNavigation(toggle, this);
    });

    el.addEventListener('keyup', function(e) {
      if (e.keyCode === 27) { // Escape key
        closeNavigation(toggle, this);
      }
    });
  });

将垃圾信息过滤器添加到帮助中心

如果您使用的是 2014 年 4 月 1 日之前创建的自定义帮助中心主题，则需要在样式表中添加一些额外的样式，以支持垃圾信息过滤器。

添加了以下新的 HTML 元素：

文章页面
- "pending-comments-list" 类元素 section
- "pending-moderation-comment-badge" 类元素 span
问题页面
- "pending-answers-list" 类元素 section
- "pending-moderation-answer-badge" 类元素 span

将以下内容添加到您的自定义主题样式表：

.pending-moderation-comment-badge, .pending-moderation-answer-badge {
border-style: solid;
border-width: 1px;
border-color: #c7aa2b;
color: #c7aa2b;
padding: 3px5px;
margin-top: 10px;
font-size: 12px;
}

添加批准到帮助中心

批准请求功能处于打开状态时，标准 Copenhagen 主题默认显示批准。如果您使用的是自定义或市场主题，则必须更新主题，以便向终端用户显示批准请求。

重要提示：批准请求需要模板化 API v4。如果您使用的是 v3 或更低版本，请先升级到 v4，然后再更新您的自定义主题。

适用模板

approval_request_page.hbs
approval_request_list_page.hbs
以下资产：
- approval_requests_bundle.js
- approval_requests_translations_bundle.js

配方

单击每个模板和资产文件上的下载原始文件图标进行下载。
将模板文件 (.hbs) 添加到解压后当前主题的模板文件夹中。
将所有资产复制到解压后当前主题中的资产文件夹中。

将以下代码段添加到 document_head.hbs 模板，然后删除以

<script
            type="importmap">

开头的其他脚本。

<script type="importmap">
{
  "imports": {
    "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
    "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
    "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
    "approval-requests": "{{asset 'approval-requests-bundle.js'}}",
    "approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
    "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
    "service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
    "shared": "{{asset 'shared-bundle.js'}}",
    "ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
    "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
  }
}
</script>

如有必要，您可以自定义页面模板。
压缩主题并将其上传到您的帮助中心。

添加服务目录到帮助中心

批准请求功能处于打开状态时，标准 Copenhagen 主题默认显示服务目录。如果您使用的是自定义或市场主题，则必须更新主题，以便向终端用户显示服务目录。

您可以按照下述步骤从 Copenhagen 主题复制服务目录实施。或者，如果您想完全自定义 UI，您可以派生 Copenhagen 主题，更改 src/modules/service-catalog 文件夹中的实施。

重要提示：服务目录需要模板化 API v4。如果您使用的是 v3 或更低版本，请先升级到 v4，然后再更新自定义主题，或手动自定义较低的模板化 API 版本，以支持服务目录。

适用模板

配方

单击每个模板和资产文件上的下载原始文件图标进行下载。
将模板文件 (.hbs) 添加到解压后当前主题的模板文件夹中。
将所有资产复制到解压后当前主题中的资产文件夹中。

将以下代码段添加到 document_head.hbs 模板，然后删除以

<script
            type="importmap">

开头的其他脚本。

<script type="text/javascript">
  // Load ES module polyfill only for browsers that don't support ES modules
  if (!(HTMLScriptElement.supports && HTMLScriptElement.supports('importmap'))) {
    document.write('<script async src="{{asset 'es-module-shims.js'}}"><\/script>');
  }
</script>
<script type="importmap">
{
  "imports": {
    "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
    "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
    "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
    "approval-requests": "{{asset 'approval-requests-bundle.js'}}",
    "approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
    "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
    "service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
    "shared": "{{asset 'shared-bundle.js'}}",
    "ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
    "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
  }
}
</script>
<script type="module">
  import { renderFlashNotifications } from "flash-notifications";

  const settings = {{json settings}};
  const baseLocale = {{json help_center.base_locale}};

  renderFlashNotifications(settings, baseLocale);
</script>

使用链接助手在 header.js 模板中添加一个服务目录页面的链接。

将以下样式复制到您的 style.css 文件中：

.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: $link_color;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: $visited_link_color;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: $hover_link_color;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: darken($background_color, 5%);
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: darken($background_color, 3%);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: darken($background_color, 3%);
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: lighten($text_color, 20%);
  font-style: italic;
  padding: 0 15px;
}

如有必要，您可以自定义页面模板。
压缩主题并将其上传到您的帮助中心。

在低于 4 的模板化 API 版本中添加服务目录

模板化 API 版本 4 包含服务目录功能所需的 JSON helper。但是，如果您需要继续使用较低的模板化版本，可以采用不同的方式序列化数据。

将服务目录用于较低的模板化 API 版本

从布尔值和数字中移除 JSON helper。
使用 json_stringify helper 序列化字符串。
对于复杂对象，单独序列化每个属性。

以下示例演示了如何调整 service_page.hbs 模板。您也需要以类似的方式修改其他模板。

替换以下原始代码：

<script type="module">
  import { renderServiceCatalogItem } from "service-catalog";

  const settings = {{json settings}};
  const container = document.getElementById("service-catalog-item");

  // Extract the ID from the URL
  const id = window.location.pathname.split("/").pop()

  const props = {
    baseLocale: {{json help_center.base_locale}},
    hasAtMentions: {{json help_center.at_mentions_enabled}},
    userRole: {{json user.role}},
    userId: {{json user.id}},
    brandId: {{json brand.id}},
    organizations: {{json user.organizations}},
    serviceCatalogItemId: id,
    helpCenterPath: {{json (page_path 'help_center')}},
  }

  renderServiceCatalogItem(container, settings, props);
</script>

替换为以下内容：

<script type="module">
  import { renderServiceCatalogItem } from "service-catalog";

  const settings = {
    background_color: {{json_stringify settings.background_color}},
    text_color: {{json_stringify settings.text_color}},
    brand_color: {{json_stringify settings.brand_color}},
    brand_text_color: {{json_stringify settings.brand_text_color}},
    link_color: {{json_stringify settings.link_color}},
    hover_link_color: {{json_stringify settings.hover_link_color}},
    visited_link_color: {{json_stringify settings.visited_link_color}},
  };
  const container = document.getElementById("service-catalog-item");

  // Extract the ID from the URL
  const id = window.location.pathname.split("/").pop()

  const props = {
    baseLocale: {{json_stringify help_center.base_locale}},
    hasAtMentions: {{help_center.at_mentions_enabled}},
    userRole: {{json_stringify user.role}},
    userId: {{user.id}},
    brandId: {{brand.id}},
    organizations: [
     {{#each user.organizations}}
              {id: {{id}}},
     {{/each}}
    ],
    serviceCatalogItemId: id,
    helpCenterPath: {{json_stringify (page_path 'help_center')}},
  }

  renderServiceCatalogItem(container, settings, props);
</script>