Deutsch

自定义您的帮助中心主题（Guide Professional 和 Enterprise）

Jennifer Rowe
Zendesk Documentation Team

Professional Enterprise 服务模式

快速路径：Guide 管理员 > 自定义设计 > 查看主题 > 编辑代码

更加精通网络的 Guide 管理者可直接使用页面代码来为帮助中心建立自定义主题。此代码包含在定义每个页面类型布局的可编辑模板中，以及帮助中心的全局页首和页脚。您也可以使用一种称为 Curlybars 的功能全面的模板化语言来访问帮助中心数据并处理页面模板中的内容。特定的模板可让您添加 JavaScript 或自定义 CSS。

您必须使用 Guide Professional 或 Enterprise 才能访问帮助中心主题的页面代码。
提示：如果您需要关于帮助中心品牌打造和自定义的帮助，请查阅 Diziana。他们有几百个随即可用的主题和模板可供购买，可以帮助您快速入门。
注释：如果您使用的是试用版本，您将使用 Guide Professional 服务模式，其中包括主题代码编辑功能。试用期过后，如果您不购买 Guide Professional 或 Enterprise，就无法访问主题代码。

这篇文章介绍了以下主题：

相关文章：

使用 HTML 和 Curlybars 自定义页面模板

帮助中心的 HTML 包含在定义每个页面类型布局的可编辑模板中，以及帮助中心的全局页首和页脚。您也可以使用一种称为 Curlybars 的功能全面的模板化语言来访问帮助中心数据并处理页面模板中的内容。

注释：使用 Guide Enterprise 时，如果您需要多个版本的文章、组别和类别模板，您可以创建额外的页面模板。

您可以自定义以下任意页面类型或元素的模板：

  • 文章页面（article_page.hbs）：知识库中的单独文章页面
  • 类别页面（category_page.hbs）：登陆页面
  • 社区帖子列表页面（community_post_list_page.hbs）
  • 社区帖子页面（community_post_page.hbs）
  • 社区主题列表页面（community_topic_list_page.hbs）
  • 社区主题页面（community_topic_page.hbs）
  • 贡献页面（contributions_page.hbs）：终端用户的帖子、社区评论和文章评论列表
  • 文档标头（document_head.hbs）：文档的标头标签
  • 出错页面（error_page.hbs）：当用户登陆到不存在的页面上时所显示的消息
  • 页脚（footer.hbs）：所有帮助中心页面底部出现的条形图
  • 页首（header.hbs）：所有帮助中心页面顶部出现的条形图
  • 主页（home_page.hbs）：您帮助中心的顶层登陆页面
  • 新建社区帖子页面（new_community_post_page.hbs）
  • 新请求页面（new_request_page.hbs）：请求或工单提交表格
  • 请求页面（request_page.hbs）：单独的请求或工单页面
  • 请求页面（requests_page.hbs）：已分配给用户或抄送给用户的请求或工单列表
  • 搜索结果（search_results.hbs）：搜索结果显示格式
  • 组别页面（section_page.hbs）：登陆页面
  • 关注页面（subscriptions_page.hbs）：用户关注的类别、组别和文章列表
  • 用户个人资料页面（user_profile_page.hbs）
注释：当您使用主题编辑器来编辑标准主题的页面模板、CSS 或 JavaScript 时，或者当您开发您自己的主题时，其都将保存为自定义主题。自定义主题不受 Zendesk 支持，并且当新功能发布时，不会自动更新。请参阅《关于帮助中心中的标准主题和自定义主题》。

 

要编辑页面模板

  1. 在 Guide 中，单击侧栏中的自定义设计图标。
  2. 单击您要编辑的主题以打开。
  3. 单击编辑代码。

  4. 在模板部分，单击您要修改的模板。

    页面将在代码编辑器中打开。

  5. 使用代码视图以编辑模板。

    您可以对以下任意项目进行添加、移除或重新排序：

    • 模板表达式用于显示和处理您页面中的内容

      例如，痕迹导航模板帮助文本 {{breadcrumbs}} 将在页面上显示一个痕迹导航的导航元素。如需模板表达式的详细指南，请查阅帮助中心模板。

    • 动态内容占位符（请参阅《添加已翻译文本》）
    • 可嵌入小组件，由第三方创建（例如 Twitter 搜索小组件）
    • HTML 标记
  6. 单击右上角的保存，以保存您的更改。

    该更改将应用到您主题中基于您已修改的模板的每个页面。

  7. 要预览您的更改，单击预览（请参阅《预览您帮助中心中的主题》）。

  8. 按需进行其它代码更改，然而单击保存。

    当您完成页面模板的编辑后，您可以关闭它。

自定义 CSS 或 JavaScript

您可以添加 JavaScript 代码或自定义网站的 CSS。如需了解您可以在帮助中心通过编码进行的操作，请查阅以下资源：

注释：当您使用主题编辑器来编辑标准主题的页面模板、CSS 或 JavaScript 时，或者当您开发您自己的主题时，其都将保存为自定义主题。自定义主题不受 Zendesk 支持，并且当新功能发布时，不会自动更新。请参阅《关于帮助中心中的标准主题和自定义主题》。

自定义 CSS 或 JavaScript

  1. 在 Guide 中，单击侧栏中的自定义设计图标。
  2. 单击您要编辑的主题以打开。
  3. 单击编辑代码。

  4. 单击 script.js 以修改 JavaScript 或 style.css 以修改 CSS。

    文件将在代码编辑器中打开。

  5. 在代码视图中添加或修改 JavaScript 或 CSS。
  6. 单击右上角的保存，以保存您的更改。

    该更改将应用到您的主题。

  7. 要预览您的更改，单击预览（请参阅《预览您帮助中心中的主题》）。

  8. 按需进行其它代码更改，然而单击保存。

    当您完成后，可以关闭文件。

在 CSS 和 HTML 中使用变量

您在“设置”面板中选择的属性，或您在清单文件中设置的用于颜色、字体和主题图像的属性储存在变量中。您可以在主题的 style.css 文件中使用这些变量。您也可以在 HTML 页面模板中使用 Curlybars 表达式引用变量。

如果您要在不同的位置指定相同的值，并快速更新，则变量将非常有用。更新属性后，它会在使用变量的所有地方进行更新。默认的 Copenhagen 主题包括一些颜色和字体变量。您可以更改名称和标签，删除变量，或添加您自己的（请参阅《设置清单参考》）。

在标准的 Copenhagen 主题中，您默认有以下变量：

  • brand_color 是主要导航元素的品牌颜色
  • brand_text_color 是悬停和活动状态的品牌颜色
  • text_color 是正文和标题元素的文本颜色
  • link_color 是链接元素的文本颜色
  • background_color 是您帮助中心的背景颜色
  • heading_font 是标题的字体
  • text_font 是正文的字体
  • logo 是公司徽标
  • favicon 是您的浏览器地址栏中显示的图标
  • homepage_background_image 是主页上的主页横幅图像
  • community_background_image 是社区主题页面上的主页横幅图像
  • community_image 是主页上的社区图像
要在 CSS 和 HTML 中使用变量，请查阅：

在 CSS 中使用变量的范例

您设置用于颜色、字体和主题图像的属性储存在变量中，您可在主题的 style.css 文件中使用。

例如，您可以在 CSS 中使用某些默认变量，语法如下：

  • $brand_color
  • $brand_tex_color
  • $heading_font
  • $text_font

在 CSS 文件中，您可以分配普通值的相同方式分配一个变量到 CSS 属性。例如：

.button {
  label-color: $text_font;
}

您也可以使用单花括号将帮助文本嵌入 CSS 表达式，如下所示：

max-width: #{$search_width}px

在 HTML 中以 Curlybars 使用变量的范例

您设置用于颜色、字体和主题图像的属性储存在变量中，您可通过 HTML 页面模板中的 Curlybars 表达式引用。

这些变量成为 Curlybars 中的 settings 对象的属性。如同任何 Curlybars 对象一样，您可以使用双花括号和点标记在页面模板中插入属性。

例如：

  • {{settings.color_1}} 是一种颜色的 HEX 值。例如：#FF00FF
  • {{{settings.font_1}} 是字体堆叠。例如，系统定义为：'-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
  • {{settings.homepage_background_image}} 是储存在此字段中的文件路径。例如：p8.zdassets.com/theme_assets/...
  • {{settings.range_input}} 是范围输入的值。

设置对象可用作任何帮助文本的输入。例如：

{{is settings.enabled}} ... {{/is}}

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Sie haben nicht gefunden, wonach Sie suchten?

Neuer Post
Powered by Zendesk