我的服务模式是什么？

在 Suite Growth 及更高服务模式可用在所有 Guide 服务模式中可用

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

精通网络的 Guide 管理员可直接使用页面代码自定义帮助中心主题。自定义主题可包括：

  • 可定义每个页面布局的可编辑模板（例如文章页面、类别页面或社区主题页面）
  • 可从头开始创建并放置在帮助中心任何位置的自定义页面
  • 帮助中心的全局页首和页脚

您也可以使用 Curlybars 完整功能模板化语言访问帮助中心数据，并处理页面模板和自定义页面的内容。您还可以使用主题附带的 JavaScript 和 CSS 文件，在整个站点范围内更改主题的外观和行为。如果您在考虑使用自己的 HTML 代码编辑帮助中心主题，请参阅编辑帮助中心文章的源代码。

当您修改主题的代码（例如，其模板、JavaScript 或 CSS）时，主题预览将显示 > 图标，表示主题代码已修改，不再接收新功能和更新。

提示：如果您在帮助中心品牌打造和自定义方面需要帮助，可以访问 Zendesk 市场，购买由 Zendesk 和第三方开发者创建的新主题。
注意：试用用户可获得 Professional 服务模式（包含代码编辑选项），但他们购买 Suite Team 后无法再访问该功能。

本文章涵盖以下主题：

  • 使用 HTML 和 Curlybars 自定义页面模板
  • 自定义 CSS 或 JavaScript
  • 在 CSS 和 HTML 中使用变量

相关文章：

  • 帮助中心品牌打造
  • Guide 主题限制
  • 帮助中心模板化指南
  • 在帮助中心创建自定义页面
  • 向主题添加多个文章、组别和类别模板

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

可编辑模板包含帮助中心的 HTML，可定义页面布局类型、自定义页面及全局页首和页脚。您还可以使用 Curlybars 完整功能模板化语言创建或处理这些元素的内容。

注意：在 Enterprise 服务模式中，您可以创建自定义页面，并根据需要创建多个版本的其他文章、组别和类别页面模板。

您可以自定义以下任何页面类型或元素的模板，也可以创建自己的自定义页面。

  • 自定义页面 (custom_page.hbs)：可从头开始创建并从帮助中心任何地方链接的自定义页面
  • 文章页面 (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)：文档的 head 标签
  • 错误页面 (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}} 可在页面上显示痕迹导航元素。有关模板表达式的详细指南，请参阅帮助中心模板。

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

    如果您编辑了模板，更改将应用于基于所修改模板的主题中每个页面。

  7. 要预览更改，单击预览。请参阅在帮助中心预览主题。

    注意：预览主题时，部分功能可能无法正常工作。预览功能旨在显示外观的更改，但不适用于交互式主题功能的端到端测试。建议您使用沙盒环境进行端到端测试。

  8. 根据需要更改其他代码，然后单击保存。

    对页面模板或自定义页面完成编辑后，可以将其关闭。

提示：请阅读此 Zendesk 博客文章，了解关于知识库文章模板的更多建议。

自定义 CSS 或 JavaScript

您可以添加 JavaScript 代码或自定义网站的 CSS。欲了解通过编写代码可在帮助中心完成哪些任务，请参阅以下资源：

  • 帮助中心社区提示
  • 帮助中心 CSS 指南
  • 帮助中心 JavaScript 指南
注意：当您使用主题编辑器编辑标准主题的页面模板、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 中使用变量示例
  • 在 HTML 中使用 Curlybar 变量示例

在 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 中使用 Curlybar 变量示例

您为颜色、字体和主题图像设置的属性存储于可在 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}}
由 Zendesk 提供技术支持