当你导出主题,导出的文件名为manifest.json.该文件定义了指南中主题的设置面板:
本指南描述清单文件以及您可以使用它做什么。它还提供了其规范的参考。例如,导出主题并打开manifest.json文件中的文本编辑器。
主题:
理解舱单。json文件
导出主题时,导出的文件包括一个名为manifest.json.您可以使用清单文件来定义主题设置面板在指南。
您可以修改面板中的现有设置或创建新设置。在下面的示例中,清单文件将默认值“#30aabc”分配给color_brand_text设置:
"settings": [{"label": "Colors", "variables": [{"identifier": "color_brand_text", "type": "color", "description": "color_brand_text_description", "label": "color_brand_text_label", "value": "#30aabc"},…},…]
后导入主题在指南中color_brand_text设置显示在带有标签的设置面板中品牌文字颜色,由manifest文件中的“label”属性指定,颜色选择器的默认十六进制值是#30aabc,由“value”属性指定:
使用清单中的设置。Json作为变量
设置也称为变量因为您可以将设置的标识符用作主题文件中的变量。在设置面板中更改一个值会更新使用该变量的所有文件中的值。
您可以在主题的style.css文件使用美元的标识符
语法,或在页面模板中使用settings.identifier
帮助在卷曲栏。例子:
style.css
输入:focus {border: 1px solid $color_brand_text;}
你也可以使用单花括号将helper嵌入到CSS表达式中,如下所示:
max-width: # {$ search_width} px;
页面模板
background - color < div风格= ":{{settings.color_brand_text}} " >
修改清单。json文件
的manifest.json文件未包含在帮助中心的“编辑代码”页中的文件列表中。要编辑manifest.json文件中,您必须将主题导出到files,对系统上的清单文件进行更改,然后在Guide中导入主题。
导出主题
- 在“主题”页面上,单击主题窗格右下角的齿轮图标,然后选择出口.
导入修改后的主题
- 在“主题”页上,单击进口在右上方。
清单对象
清单的文档根对象具有以下属性:
名字 | 类型 | 评论 |
---|---|---|
名字 | 字符串 | 主题名称 |
作者 | 字符串 | 创造主题的人 |
版本 | 字符串 | 的主题版本语义版本控制2.0.0标准 |
api_version | 字符串 | 模板API版本 |
设置 | 数组 | 设置对象列表。看到设置对象 |
例子
{“名称”:“我的第二个主题”,“作者”:“简”,“版本”:“1.0.1”,“api_version”:1、“设置”:[…]}
设置对象
的设置Manifest根对象和指南中的设置面板被组织成颜色或字体等组。在清单文件中定义每个设置组设置对象.每个对象由一个标签和一个或多个设置(如“品牌颜色”和“文本颜色”)组成。
您可以修改设置对象或创建自己的设置对象。当您在Guide中导入主题时,对象将反映在主题的设置面板中。
每个设置对象具有以下属性:
名字 | 类型 | 评论 |
---|---|---|
标签 | 字符串 | 翻译属性名。看到翻译.显示一组设置的标题 |
变量 | 数组 | 组中的设置列表。也叫变量。看到变量对象 |
例子
“设置”:[{“标签”:“colors_group_label”、“变量”:[{…},……]},{“标签”: "fonts_group_label", "variables": [{...}, ...] }, { "label": "brand_group_label", "variables": [{...}, ...] }, { "label": "banners_group_label", "variables": [{...}, ...] } ]
请注意:的值“标签”
属性是转换属性名。看到翻译.
该示例在设置面板中创建以下类别:
变量对象
每一个设置对象有一个变量
列出实际设置的数组。它们被称为变量是因为你可以将它们作为变量插入到帮助中心模板或CSS中。
你可以定义任何你想要的变量。但是,清单文件必须包含两个具有以下标识符的文件变量:"logo"和"favicon"。看到需要的变量.
每个变量都有以下属性:
名字 | 类型 | 评论 |
---|---|---|
标识符 | 字符串 | 可以在CSS或Curlybars表达式中使用的变量名。长度不超过30个字符,只能包含字母、数字和_(下划线)。 |
类型 | 字符串 | UI控件,从用户处获取该值。之一文本 ,列表 ,复选框 ,颜色 ,文件 ,或范围 .看到类型属性 |
标签 | 字符串 | 翻译属性名。看到翻译.在设置面板中显示UI控件旁边的转换值 |
描述 | 字符串 | 翻译属性名。看到翻译.将转换值显示为设置的简要描述 |
价值 | 字符串 | 设置的默认值 |
选项 | 数组 | 为列表 只有类型。列表项的数组。看到选择对象 |
最小值 | 整数 | 为范围 只有类型。范围的最小值 |
马克斯 | 整数 | 为范围 只有类型。范围的最大值 |
例子
"variables": [{"identifier": "color_brand", "type": "color", "label": "color_brand_label", "description": "color_brand_description", "value": "#0072EF"},…]
该示例在设置面板中创建了以下标签和控件:
需要的变量
您必须在清单文件中指定以下两个变量,否则该文件将在导入时被拒绝:
- 标志- the
标识符
必须是“logo”和类型
必须是“file” - Favicon -
标识符
必须是“favicon”和类型
必须是“file”
例子
"variables": [{"identifier": "logo", "type": "file", "description": "logo_description", "label": "logo_label"}, {"identifier": "favicon", "type": "file", "description": "favicon_description", "label": "favicon_label"}]
类型属性
每一个变量对象有一个类型
属性,该属性指定用于设置指南中的设置面板中的设置值的UI控件。该属性可以有以下值之一:
例子
{“标识符”:“color_headings”、“类型”:“颜色”,…}
列表类型
如果类型变量对象的值为"list",则该对象包含一个选项
数组来填充下拉列表。列表中的每个选项都有以下属性:
名字 | 类型 | 评论 |
---|---|---|
标签 | 字符串 | 显示列表项的友好文本 |
价值 | 字符串 | 列表项的基础值 |
必须在数组中指定多个选项,否则导入主题将失败。
例子
{"identifier": "font_heading ", "type": "list", "label": "Heading", "description": "Font for Heading", "value": "Arial, 'Helvetica Neue', Helvetica, sans-serif", "options": [{"label": "Copperplate Light", "value": "Arial, 'Helvetica Neue', Helvetica, sans-serif"}, {"label": "Copperplate Light", "value": "'Copperplate Light', 'Copperplate Gothic Light', serif"}, {"label": "Baskerville", "value": "Baskerville, 'Times New Roman', Times, serif"}]}
复选框类型
如果类型变量对象为“checkbox”时,使用该对象的价值属性指定用户选择复选框时设置的值。该值必须为布尔值。
名字 | 类型 | 评论 |
---|---|---|
价值 | 布尔 | 真正的 或假 |
例子
{"identifier": "scoped_hc_search", "type": "checkbox", "description": "scoped_help_center_search_description", "label": "scoped_help_center_search_label", "value": true}
文件类型
的变量对象类型的“文件”在设置面板中增加了一个文件上传控制。这种类型的变量没有a价值财产。例子:
{"identifier": "community_image", "type": "file", "description": "community_image_description", "label": "community_image_label"}
系统确定的文件URL。
在用户上传不同的文件之前,必须提供一个默认文件供主题使用。默认文件的名称必须与变量的标识符匹配。将文件放入设置文件夹中的主题文件。例子:
在主题文件中需要url的地方使用文件变量。例子:
style.css
.community_banner{背景图像:url($community_image);}
页面模板
< img src = " {{settings.community_image}} " >
范围类型
一个类型为“range”的变量对象在设置面板中添加了一个滑块控件。例子:
范围变量包括A最小值和一个马克斯属性指定用户在移动滑块时可以设置的值范围。取值必须为整数。
例子
{"identifier": "font_size", "type": "range", "description": "font_size_description", "label": "font_size_label", "min": 70, "max": 150, "value": 100}
翻译
设置面板中可见的字符串都定义在翻译.翻译由属性名和值组成。例子:
"text_color_label": "文本颜色"
属性名是任意的。您可以指定任何您喜欢的名称。
中的特定于语言的JSON文件中存储翻译翻译主题根目录下的文件夹:
/ translations - en-us。Json -是的。Json - fr.json -…
每个文件由一个JSON对象和一个翻译列表组成:
en-us.json
{"brand_color_description": "主要导航元素的品牌颜色","brand_color_label": "品牌颜色",…}
翻译用于指定设置面板中的标签和描述。
为标签和描述指定字符串
在翻译文件夹,找到帮助中心默认语言的JSON文件。例子:en-us.json.
更新现有属性的值或添加新属性。例子:
{"text_color_label": "文本颜色","text_color_description": "正文和标题元素的文本颜色",…}
在变量中,使用转换属性名作为的值
“标签”
或“描述”
属性。"variables": [{"identifier": "color_text", "type": "color", "label": "text_color_label", "description": "text_color_description", "value": "#0072EF"},…]
看到变量对象.如果创建属性或更改属性名称,请确保更新变量。
您可以在设置面板中对标签和描述进行本地化。你需要自己提供本地化字符串。
对标签和描述进行本地化
在翻译文件夹,找到要支持的每种额外语言的JSON文件。
复制默认翻译文件中定义的属性名。例子:
{text_color_label“text_color_description”:“。 ": "", ...}
为每个属性指定一个本地化字符串。例子:
fr.json
{"text_color_description": "text_color_label": "text_color_label": "text_color_label", "text_color_label",…}
13个评论
清单中是否支持多行文本区域?json设置?目前我的代码是:
我看到一些文章提到“type”“multiline”,这样当导入主题时,编辑器就可以输入多行值,而不是将一个句子全部放在文本字段的一行中。
然而,“多行”似乎不支持我得到以下错误的导入:
如果它不匹配任何所需的模式,我如何使它匹配?我们真的需要一个多行文本区域的设置,所以我们的编辑可以添加多行答案的设置,我们的主题。你能告诉我如何做到这一点吗?请看下面的屏幕,作为我们在单个字段中输入的示例…
嘿@……,
你发布的类型的截图是应用程序。主题现在不支持多行。在本文中,您可以找到哪些类型的设置可用于主题。
特别针对您的用例,我们建议使用动态内容相反,因为它也支持多种语言的翻译。:)
在这篇帮助文章中,我找到了向帮助中心添加文本变量的选项。如何在我的html模板中使用它?https://support.亚博zendesk.com/hc/en-us/articles/115012547687-Customizing-the-Settings-panel-Guide-Professional-and-Enterprise-#variable-object
嗨,迈克尔,
谢谢你的来信!你可能想看看这篇文章使用CSS和HTML中的变量.它将为您提供如何在CSS中使用变量和在HTML中使用Curlybars变量的指导。谢谢你!
谢谢你!@…….我已经知道这个指南,但我正在寻找一个选项,我可以在设置中定义一个文本变量,然后在我的模板中使用这个变量。
我通过使用动态内容解决了这个问题——这样它也是可翻译的。但也许有更好的解决办法?
嗨,迈克尔,
恐怕没有别的办法了。我们的文档建议使用导出主题或使用style.css文件,并在HTML中使用卷曲栏表达式。谢谢你!
嗨@……,
如果你添加一个设置来显化。通过导出主题并在本地进行此更改,然后可以通过{{settings.setting_identifier}}
我们有更多的信息https://developer.亚博zendesk.com/documentation/help_center/help-center-templates/objects/#settings-object
@……谢谢你的回答-变量是缺失的一块在我的情况下。尽管我不太确定这是否是最好的解决方案(因为没有办法翻译它),但这应该是可行的(尚未测试)。
无用的“类型对象的属性'#/settings/X/variables/X'不匹配任何所需的模式”消息仍然可以进行更新。
甚至在本文或类似的文章中都有注释,提醒用户索引从0开始,以便他们可以缩小问题的原因。
并给出JSON文件中字段需求的适当细节。
例如,我遇到了上面的错误,因为我在变量的描述中有一个空字符串。
我只是想发布一些我刚刚意识到的模糊的错误信息
这个错误:
能让我们知道错误在哪里
settings/X指的是哪个“group”包含错误,从0开始为1。变量数是对应于这个变量的数,也是从0开始。
所以:
# /设置/ 2 /变量/ 7”
说明第三组和第八个变量有问题。它可能是错误的变量类型、错误的值、缺少属性或字符太多(或无效字符)。
所以在这种情况下,“品牌”组出现了问题,因为品牌是第三种设置。然后从0数到8,找到有问题的变量。
我们是否可以在这篇文章中添加更多关于以下限制的信息:
-选项数组中值的总数(文章规定最小值为1,但我不确定最大值)
-标签和描述的字符限制
-文本字段内的字符限制(我认为是999)
-可变对象的最大数量(我意识到这是200,但将所有这些信息集中会有所帮助)。
非常感谢
为了回应Hamish,是否可以在清单文件中添加更多关于限制的详细信息?
接收到“对象类型的属性'#/settings/0/variables/X'不匹配任何所需的模式”这样的无用消息,并没有给我们提供太多的信息。
你会知道这个限制,所以添加文档只需要几分钟,而不是几个月。
编辑添加,描述,标签等的长度没有被ZAT标记,所以我希望你能理解限制只在最后一步被强加的挫折感。
嘿哈米什朗和内森珀塞尔!感谢您指出,本文中没有详细说明这些限制。我们的指南团队目前正在更新这篇文章,以获得更多信息。同时,我可以向您提供以下信息:
请登录留下评论。