更加精通网络的 Guide 管理者可直接使用页面代码来为帮助中心建立自定义主题。此代码包含在定义每个页面类型布局的可编辑模板中，以及帮助中心的全局页首和页脚。您也可以使用一种称为 Curlybars 的功能全面的模板化语言来访问帮助中心数据并处理页面模板中的内容。特定的模板可让您添加 JavaScript 或自定义 CSS。
这篇文章介绍了以下主题：
相关文章：
使用 HTML 和 Curlybars 自定义页面模板
帮助中心的 HTML 包含在定义每个页面类型布局的可编辑模板中，以及帮助中心的全局页首和页脚。您也可以使用一种称为 Curlybars 的功能全面的模板化语言来访问帮助中心数据并处理页面模板中的内容。
您可以自定义以下任意页面类型或元素的模板：
- 文章页面（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）
要编辑页面模板
- 在 Guide 中，单击侧栏中的自定义设计图标。
- 单击您要编辑的主题以打开。
- 单击编辑代码。
- 在模板部分，单击您要修改的模板。
页面将在代码编辑器中打开。
- 使用代码视图以编辑模板。
您可以对以下任意项目进行添加、移除或重新排序：
- 单击右上角的保存，以保存您的更改。
该更改将应用到您主题中基于您已修改的模板的每个页面。
- 要预览您的更改，单击预览（请参阅《预览您帮助中心中的主题》）。
- 按需进行其它代码更改，然而单击保存。
当您完成页面模板的编辑后，您可以关闭它。
自定义 CSS 或 JavaScript
您可以添加 JavaScript 代码或自定义网站的 CSS。如需了解您可以在帮助中心通过编码进行的操作，请查阅以下资源：
自定义 CSS 或 JavaScript
- 在 Guide 中，单击侧栏中的自定义设计图标。
- 单击您要编辑的主题以打开。
- 单击编辑代码。
- 单击 script.js 以修改 JavaScript 或 style.css 以修改 CSS。
文件将在代码编辑器中打开。
- 在代码视图中添加或修改 JavaScript 或 CSS。
- 单击右上角的保存，以保存您的更改。
该更改将应用到您的主题。
- 要预览您的更改，单击预览（请参阅《预览您帮助中心中的主题》）。
- 按需进行其它代码更改，然而单击保存。
当您完成后，可以关闭文件。
在 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 中使用变量的范例
您设置用于颜色、字体和主题图像的属性储存在变量中，您可在主题的 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}}