英语(美国)
  1. 亚博Zendesk帮助< / >李< / >
  2. 指南< / >李< / >
  3. 帮助中心使用指南< / >李< / >
  4. 使用主题和自定义帮助中心< / >李< / >

自定义帮助中心主题

查尔斯Nadeau< / >
  • 编辑
亚博Zendesk文档团队

我的计划是什么?< / >

套件成长，专业，企业和企业Plus专业企业规划

快速路径:指南admin >自定义设计>自定义>编辑代码

精通web的Guide管理员可以直接使用页面代码为您的帮助中心构建自定义主题。自定义主题包括:

  • 定义每个页面布局的可编辑模板(例如，文章页面、类别页面或社区主题页面)李< / >
  • 您可以从头开始创建自定义页面，并将其放置在帮助中心的任何位置李< / >
  • 帮助中心的全局页眉和页脚李< / >

您还可以使用称为Curlybars的全功能模板语言来访问帮助中心数据并操作页面模板和自定义页面中的内容。您还可以使用主题中包含的JavaScript和CSS文件对主题的外观和行为进行全站范围的更改。如果您正在考虑使用自己的HTML代码来编辑帮助中心主题，请阅读允许在帮助中心文章中出现不安全的HTML< / >。

提示:如果您在帮助中心品牌和定制方面需要帮助，请参见Diziana< / >。他们提供数百个可供购买的现成主题和模板，可以帮助您启动和运行。
注意:试用用户将获得专业版计划，其中包括代码编辑选项，但如果他们购买Suite Team，他们将无法再访问该功能。

本文涵盖以下主题:

相关文章:

自定义页面模板和自定义页面的HTML和卷曲栏

帮助中心的HTML包含在可编辑的模板中，这些模板定义了页面类型、自定义页面以及全局页眉和页脚的布局。还可以使用称为Curlybars的全功能模板语言为这些元素创建或操作内容。

注意:在Enterprise计划中，您可以创建自定义页面，如果需要多个版本的模板，还可以为文章、章节和类别创建额外的页面模板。

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

  • 自定义页面（custom_page.hbs):您从头开始创建的自定义页面，并从帮助中心的任何地方链接李< / >
  • 文章页面（article_page.hbs):知识库中的个别文章页面亚博官方app李< / >
  • 分类页面(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. 在指南中，在侧边栏上单击自定义设计图标()。李< / >
  2. 点击定制在要编辑的主题上。李< / >
  3. 点击编辑代码。

  4. 在模板节中，单击要修改的模板或自定义页面。

    该页在代码编辑器中打开。

  5. 使用代码视图编辑模板或页面。

    您可以添加、删除或重新排序以下任何内容:

  6. 点击保存保存您的更改。

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

  7. 要预览更改，请单击预览,请参阅在帮助中心预览您的主题< / >。

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

    编辑完页面模板或自定义页面后，可以关闭它。

提示: 阅读这篇Zendes亚博k博客文章< / >获取更多知识库文章亚博官方app模板思路。

使用CSS和HTML中的变量

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

如果您希望在多个位置指定相同的值并快速更新它，那么这些变量非常有用。更新属性会在所有使用该变量的地方更新它。默认的Copenhagen主题包含一些颜色和字体变量。您可以更改名称和标签、删除变量或添加自己的变量(参见设置清单参考< / >）。

在标准的哥本哈根主题中，默认情况下有以下变量:

  • brand_color主要导航元素的品牌颜色是什么李< / >
  • brand_text_color悬停和活动状态的品牌颜色是什么李< / >
  • text_color正文和标题元素的文本颜色是一样的吗李< / >
  • link_color链接元素的文本是颜色吗李< / >
  • background_color帮助中心的背景颜色是什么李< / >
  • heading_font标题的字体是什么李< / >
  • text_font字体是正文的吗李< / >
  • 标志是公司的标志李< / >
  • 的图标图标是否显示在浏览器的地址栏中李< / >
  • 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美元;}

你也可以使用单花括号将helper嵌入到CSS表达式中，如下所示::

max-width: #{$ search_width}px

在HTML的卷曲栏中使用变量的例子

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

变量变成了设置对象在Curlybars。与任何Curlybars对象一样，您可以使用双花括号和点表示法在页面模板中插入属性。

例如:

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

设置对象可以用作任何帮助器的输入。例如:

{{设置。启用}}…{{/}}
    回到顶端

    120条评论