- 可定义每个页面布局的可编辑模板（例如文章页面、类别页面或社区主题页面）
- 可从头开始创建并放置在帮助中心任何位置的自定义页面
- 帮助中心的全局页首和页脚
您也可以使用 Curlybars 完整功能模板化语言访问帮助中心数据，并处理页面模板和自定义页面的内容。您还可以使用主题附带的 JavaScript 和 CSS 文件，在整个站点范围内更改主题的外观和行为。如果您在考虑使用自己的 HTML 代码编辑帮助中心主题，请阅读允许帮助中心文章中使用不安全的 HTML。
提示：如需帮助中心品牌打造和自定义方面的帮助，请参阅 Diziana。其中有数百个现成主题和模板供出售，可帮助您快速上手。
注意：试用用户可获得 Professional 服务模式（包含代码编辑选项），但他们购买 Suite Team 后无法再访问该功能。
本文章涵盖以下主题：
相关文章：
使用 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)
编辑页面模板
- 在 Guide，单击侧栏中的自定义设计图标 (
)。 - 单击您要编辑的主题上的自定义。
- 单击编辑代码。
4. 在模板部分，单击您要修改的模板或自定义页面。
页面将在代码编辑器中打开。
5. 使用代码视图编辑模板或页面。
您可以添加或移除以下任何内容或对其重新排序：
- 模板表达式：可显示和处理页面内容
例如，痕迹模板帮助程序
{{breadcrumbs}}可在页面上显示痕迹导航元素。有关模板表达式的详细指南，请参阅帮助中心模板。 - 动态内容占位符（请参阅添加已翻译的文本）
- 由第三方创建的可嵌入小组件（例如 Twitter 搜索小组件）
- HTML 标记
6. 单击右上角的保存以保存更改。
如果您编辑了模板，更改将应用于基于所修改模板的主题中每个页面。
7. 要预览更改，单击预览（请参阅在帮助中心预览主题）。
8. 根据需要更改其他代码，然后单击保存。
对页面模板或自定义页面完成编辑后，可以将其关闭。
自定义 CSS 或 JavaScript
您可以添加 JavaScript 代码或自定义网站的 CSS。欲了解通过编写代码可在帮助中心完成哪些任务，请参阅以下资源：
注意：当您使用主题编辑器编辑标准主题的页面模板、CSS 或 JavaScript 时，或者当您开发自己的主题时，文件将另存为自定义主题。自定义主题不受 Zendesk 支持， 并不会在新功能发布时自动更新。请参阅帮助中心的关于标准主题和自定义主题。
自定义 CSS 或 JavaScript
- 在 Guide，单击侧栏中的自定义设计图标 ()。
- 单击您要编辑的主题上的自定义。
- 单击编辑代码。
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 中使用 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}}
评论
0 条评论
请登录写评论。