精通web的Guide管理员可以直接使用页面代码为您的帮助中心构建自定义主题。自定义主题包括:
- 定义每个页面布局的可编辑模板(例如,文章页面、类别页面或社区主题页面)李< / >
- 您可以从头开始创建自定义页面,并将其放置在帮助中心的任何位置李< / >
- 帮助中心的全局页眉和页脚李< / >
您还可以使用称为Curlybars的全功能模板语言来访问帮助中心数据并操作页面模板和自定义页面中的内容。您还可以使用主题中包含的JavaScript和CSS文件对主题的外观和行为进行全站范围的更改。如果您正在考虑使用自己的HTML代码来编辑帮助中心主题,请阅读允许在帮助中心文章中出现不安全的HTML< / >.
本文涵盖以下主题:
相关文章:
自定义页面模板和自定义页面的HTML和卷曲栏
帮助中心的HTML包含在可编辑的模板中,这些模板定义了页面类型、自定义页面以及全局页眉和页脚的布局。还可以使用称为Curlybars的全功能模板语言为这些元素创建或操作内容。
您可以自定义以下任何页面类型或元素的模板,或者创建您自己的自定义页面。
- 自定义页面(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)李< / >
编辑页面模板
- 在指南中,在侧边栏上单击自定义设计图标().李< / >
- 点击定制在要编辑的主题上。李< / >
- 点击编辑代码.
- 在模板节中,单击要修改的模板或自定义页面。
该页在代码编辑器中打开。
- 使用代码视图编辑模板或页面。
您可以添加、删除或重新排序以下任何内容:
- 模板表达式显示和操作页面中的内容
例如,breadcrumb模板帮助器
{{面包屑}}
在页面上显示面包屑导航元素。有关模板表达式的详细指南,请参见帮助中心模板< / >. - 动态内容占位符,(见添加翻译文本< / >)李< / >
- 可嵌入部件由第三方创建的(例如Twitter搜索小部件)李< / >
- HTML标记
- 模板表达式显示和操作页面中的内容
- 点击保存保存您的更改。
如果编辑了模板,则更改将应用于基于所修改模板的主题中的每个页面。
- 要预览更改,请单击预览,请参阅在帮助中心预览您的主题< / >.
- 根据需要更改其他代码,然后单击保存.
编辑完页面模板或自定义页面后,可以关闭它。
自定义CSS或JavaScript
您可以添加JavaScript代码或自定义站点的CSS。要了解在帮助中心使用少量代码可以做些什么,请查看以下资源:亚博电脑端
自定义CSS或JavaScript
- 在指南中,单击自定义设计图标()。李< / >
- 点击定制在要编辑的主题上。李< / >
- 点击编辑代码.
- 点击script.js修改JavaScript或style.css修改CSS。
该文件在代码编辑器中打开。
- 在代码视图中添加或修改JavaScript或CSS。李< / >
- 点击保存保存您的更改。
更改将应用于您的主题。
- 要预览更改,请单击预览,请参阅在帮助中心预览您的主题< / >.
- 根据需要更改其他代码,然后单击保存.
完成后,可以关闭文件。
使用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中使用变量的例子
为颜色、字体和主题图像设置的属性存储在可以在主题中使用的变量中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}}
是输入范围的值。李< / >
设置对象可以用作任何帮助器的输入。例如:
{{设置。启用}}…{{/}}
82条评论
嘿,伙计们,
我能从头开始吗?完全不同的布局,比如,修改一个基本的“模板”。Hbs”,而不仅仅是header。我想进入头部,整个身体和其他部位。这可能吗?
嘿,弗朗西斯,编辑标题是如此简单。转到页眉。hbs模板并开始编辑,或者如果我误解了你的观点,你可以在这里分享截图。
Ifra,
我正在考虑切换到哥本哈根主题并自定义它,但我担心必须将自定义迁移到主题的未来版本。是否有关于主题的修订历史记录,或者您能评论一下它的更新频率或预期更新频率吗?
谢谢
嘿肯计费< / >,
跟踪更新的最好方法是fork主题的github存储库< / >然后使用github集成< / >导入自定义主题。
谁能告诉我,我应该在哥本哈根主题的哪里编辑它说的地方客户连接和技巧和最佳实践在本页:
你好,
我猜这些要么是文章类别,要么是社区主题。如果你进入你的指南管理,你可以点击安排文章,你可以看到所有类别的列表。如果你点击“安排主题”,你可以看到你的社区主题。
希望这对你有帮助!
谢谢,
玛吉
你好,
我需要添加一个额外的页面与一些静态内容和页脚上的链接,以访问该页。在哥本哈根的模板下,这可能吗?
谢谢
你好,
我正试图在哥本哈根主题的页脚添加背景图片。
它是如何工作的?
嘿马吕斯Tendick< / >
如果您还没有定制缺省的哥本哈根主题,只需在style.css文件的底部添加下面的CSS
您需要在assets文件夹下上传图像,然后复制以下高亮显示的URL,并将其替换为URL()参数中的文本
如果它解决了你的问题,请告诉我
谢谢
Pulkit
团队Diziana< / >
嗨Pulkit,
谢谢你!效果很好
如何更改页脚图像的大小?
马吕斯
嘿马吕斯Tendick< / >
你可以用background-sizeCSS属性
如果它解决了你的问题,请告诉我
谢谢
Pulkit
大家好。我将在Javascript食谱文章中交叉发布这篇文章,因为我怀疑这与JS有关。我们的“社区”部分现在正在跟踪来自客户的“功能请求”,我想进一步定制帖子/想法的状态。有人知道如何或在哪里修改这个列表吗?它是主题编辑器的一部分还是在管理设置中的其他地方?
第三步编辑页面模板-没有编辑代码按钮。
发生什么事了?
你好,安东·休斯
你可以分享你所看到的截图。
谢谢
我已经添加了一个javascript文件到我的模板资产。该文件包含带参数的函数。
如何在模板中使用这些函数?
你好,普莱西斯先生
你能分享一下你想做的截图吗
谢谢
Pulkit
团队Diziana
在我的document_head。hbs,我补充了这一点: