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

自定义设置面板

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

套件增长，专业，企业和企业+专业的计划

当你导出主题时，导出的文件中包含一个名为manifest.json．该文件在指南中定义了主题的设置面板:

本指南描述清单文件以及您可以使用它做什么。它还提供了其规范的参考。例如，导出您的主题并打开manifest.json文件在文本编辑器。

主题:

了解舱单。json文件

导出主题时，导出的文件包括一个名为manifest.json．您可以使用清单文件来定义主题的设置面板在指南。

您可以在面板中修改现有设置或创建新设置。在下面的示例中，清单文件将默认值“#30aabc”分配给color_brand_text设置:

"设置":[{"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"属性指定:

在manifest中使用设置。Json作为变量

设置也叫做变量因为您可以在主题文件中使用设置的标识符作为变量。在“设置”面板中更改值将更新使用该变量的所有文件中的值。

你可以在主题中插入一个变量style.css文件使用美元的标识符语法，或在页面模板中使用settings.identifier在Curlybars的帮手。例子:

style.css

输入:焦点{边框:1px solid $color_brand_text;｝

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

max-width: # {$ search_width} px;

页面模板

background - color < div风格= ":{{settings.color_brand_text}} " >

修改清单。json文件

的manifest.json“帮助中心”中的“编辑代码”页中的文件列表中不包含该文件。编辑manifest.json文件，您必须将主题导出到文件，对系统上的清单文件进行更改，然后在指南中导入主题。

导出主题

  • 在主题页面，单击主题窗格右下角的齿轮图标，并选择出口．

导入修改后的主题

  • 在“主题”页面，单击进口在右上角。

清单对象

清单的文档根对象具有以下属性:

的名字 类型 评论
的名字 字符串 主题名称
作者 字符串 创造主题的人
版本 字符串 的主题版本语义版本2.0.0标准
api_version 字符串 模板API版本
设置 数组 设置对象列表。看到设置对象

例子

{“名称”:“我的第二个主题”,“作者”:“简”,“版本”:“1.0.1”,“api_version”:1、“设置”:[…]}

设置对象

的设置清单根对象指南中的设置面板被组织成不同的组，如颜色或字体。属性在清单文件中定义了每个设置组设置对象．每个对象由一个标签和一个或多个设置组成，如品牌颜色和文本颜色。

您可以修改设置对象或创建自己的设置对象。当您在指南中导入主题时，对象会反映在主题的设置面板中。

每个设置对象具有以下属性:

的名字 类型 评论
标签 字符串 翻译属性名。看到翻译．显示一组设置的标题
变量 数组 组中的设置列表。也称为变量。看到变量对象

例子

“设置”:[{“标签”:“colors_group_label”、“变量”:[{…},……]}，｛“标签”: "fonts_group_label", "variables": [{...}, ...] }, { "label": "brand_group_label", "variables": [{...}, ...] }, { "label": "banners_group_label", "variables": [{...}, ...] } ]

请注意的值“标签”属性是翻译属性名。看到翻译．

这个例子在Settings面板中创建了以下类别:

变量对象

每一个设置对象有一个变量数组，该数组列出实际设置。它们之所以被称为变量，是因为可以将它们作为变量插入帮助中心模板或CSS中。

你可以定义任何你想要的变量。但是，清单文件必须包含两个具有以下标识符的文件变量:“logo”和“favicon”。看到需要的变量．

每个变量具有以下属性:

的名字 类型 评论
标识符 字符串 可以在CSS或Curlybars表达式中使用的变量名。必须是30个字符或更少
类型 字符串 UI控件的“指南”中的“设置”面板中获取用户的值。之一文本，列表，复选框，颜色，文件,或范围．看到类型属性
标签 字符串 翻译属性名。看到翻译．显示“设置”面板中UI控件旁边的翻译值
描述 字符串 翻译属性名。看到翻译．将翻译值显示为设置的简要说明
价值 字符串 设置的默认值
选项 数组 为列表只有类型。列表项的数组。看到选择对象
最小值 整数 为范围只有类型。范围的最小值
马克斯 整数 为范围只有类型。范围的最大值

例子

变量:[{"identifier": "color_brand"， "type": "color"， "label": "color_brand_label"， "description": "color_brand_description"， "value": "#0072EF"}，…］

这个例子在Settings面板中创建了以下标签和控件:

需要的变量

您必须在清单文件中指定以下两个变量，否则文件将在导入时被拒绝:

  • 标志-标识符一定是“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_fonts "， "type": "list"， "label": "Heading"， "description": " fonts for Heading"， "value": "Arial， 'Helvetica Neue'， Helvetica, sans-serif"， "options": [{"label": "Arial"， "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"}]}

复选框类型

如果类型变量对象的值为“复选框”时，使用该对象的价值属性指定用户选择复选框时设置的值。必须为布尔值。

的名字 类型 评论
价值 布尔 真正的或假

例子

{"identifier": "scoped_hc_search"， "type": "checkbox"， "description": "scoped_help_center_search_description"， "label": "scoped_help_center_search_label"， "value": true}

文件类型

的变量对象类型的"file"在设置面板中添加了一个文件上传器控件。这种类型的变量没有价值财产。例子:

{"identifier": "community_image"， "type": "file"， "description": "community_image_description"， "label": "community_image_label"}

取值为系统决定的文件URL。

您必须提供主题使用的默认文件，直到用户上传不同的文件。默认文件的名称必须与变量的标识符匹配。将文件放在设置文件夹在您的主题文件。例子:

在主题文件中需要url的地方使用文件变量。例子:

style.css

.community_banner {background-image: url($community_image);｝

页面模板

< img src = " {{settings.community_image}} " >

范围类型

类型为“range”的变量对象会在设置面板中添加一个滑块控件。例子:

范围变量包括最小值和一个马克斯属性指定用户在移动滑块时可以设置的值范围。取值必须为整数。

例子

{"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 - es。Json - fr.json -…

每个文件由一个JSON对象和一个翻译列表组成:

en-us.json

{"brand_color_description": "主要导航元素的品牌颜色"，"brand_color_label": "品牌颜色"，…｝

转换用于在“设置”面板中指定标签和描述。

为标签和描述指定字符串

  1. 在翻译文件夹中，找到帮助中心的默认语言的JSON文件。例子:en-us.json．

  2. 更新现有属性的值或添加新属性。例子:

    {"text_color_label": "文本颜色"，"text_color_description": "正文和标题元素的文本颜色"，…｝

  3. 在变量中，使用翻译属性名作为的值“标签”或“描述”属性。

    变量:[{"identifier": "color_text"， "type": "color"， "label": "text_color_label"， "description": "text_color_description"， "value": "#0072EF"}，…］

    看到变量对象．如果创建属性或更改属性名称，请确保更新变量。

您可以在“设置”面板中本地化标签和描述。您需要自己提供本地化的字符串。

本地化标签和描述

  1. 在翻译文件夹，找到你想要支持的每一种额外语言的JSON文件。

  2. 复制默认翻译文件中定义的属性名。例子:

    {text_color_label“text_color_description”:“。 ": "", ...｝

  3. 为每个属性指定一个本地化字符串。例子:

    fr.json

    {"text_color_description": " texleur du texte pour les éléments du titre et du corps"， "text_color_label": " texleur du texte"，…｝
    回到顶端

    11日评论

    • 马克·皮卡德

      是否会支持清单中的多行文本区域。json设置?目前我的代码是:

      ｛

      “标识符”:“top_tips_1_heading”,

      “类型”:“文本”,

      “描述”:“标题”,

      "label": "Top Tip 1 Heading"，

      “value”:“我如何将我的银行账户与应用程序关联?”

      }，

      ｛

      “标识符”:“top_tips_1_body”,

      “类型”:“多行”,

      “描述”:“答案”,

      "label": "Top Tip 1 Answer"，

      “价值”:“测试”

      }，

      我看到一些文章提到“type”“multiline”，所以当导入主题时，编辑器可以输入多行值，而不是将一个句子全部放在文本字段的一行中。

      然而，“多行”似乎不支持，我得到以下错误导入:

      如果它不匹配任何必需的模式，我如何让它匹配?我们真的需要一个多行文本区域的设置，以便我们的编辑可以添加多行答案，我们的主题设置。你能告诉我怎么做到吗?请看下面的例子，我们在一个字段中输入…

      1
    • 奥古斯托。席尔瓦
      亚博Zendesk工程

      嘿@……，

      你发布的类型截图是针对应用程序的。主题现在不支持多行。在本文中，您可以找到可用于主题的设置类型。

      对于您的用例，我们建议使用动态内容相反，因为这也支持翻译到多种语言。：）

      0
    • 迈克尔Eugster

      在这篇帮助文章中，我找到了向帮助中心添加文本变量的选项。我如何在我的html模板中使用它?https://support.亚博zendesk.com/hc/en-us/articles/115012547687-Customizing-the-Settings-panel-Guide-Professional-and-Enterprise-#variable-object

      0
    • Jupete Manitas
      亚博Zendesk客户服务

      嗨,迈克尔,

      谢谢你的来信!你可能想看看这篇文章使用CSS和HTML中的变量．它将为您提供关于如何使用CSS变量和HTML中的Curlybars变量的指导。谢谢你！

      0
    • 迈克尔Eugster

      谢谢你！@……．我已经知道这个指南，但我正在寻找一个选项，我可以在设置中定义一个文本变量，然后在我的模板中使用这个变量。

      我通过使用动态内容来解决这个问题——像这样，它也是可翻译的。但也许有更好的解决办法?

      0
    • Jupete Manitas
      亚博Zendesk客户服务

      嗨,迈克尔,

      恐怕没有别的办法了。我们的文档建议使用导出主题或使用style.css文件，并在HTML中使用curlybars表达式。谢谢你！

      1
    • 奥古斯托。席尔瓦
      亚博Zendesk工程

      嗨@……，

      如果您将设置添加到manifest。Json通过导出主题并在本地进行更改，然后您可以通过{{settings.setting_identifier}}

      我们有更多的信息https://developer.亚博zendesk.com/documentation/help_center/help-center-templates/objects/#settings-object

      1
    • 迈克尔Eugster

      @……谢谢你的回答——变量是我案例中缺失的部分。即使我不太确定这是否是最好的解决方案(因为没有办法翻译它)，这应该可以工作(尚未测试)。

      0
    • 内森珀塞尔

      永远无用的“对象类型的属性‘#/settings/X/variables/X’不匹配任何所需的模式”消息仍然可以进行更新。

      甚至在本文或类似的说明中提醒用户索引从0开始，以便他们可以缩小问题的原因。

      并给出JSON文件中字段需求的适当细节。

      例如，我遇到了上面的错误，因为我在变量的描述中有一个空字符串。

      1
    • 代表团队
      • 编辑

      我只是想发布一些我刚刚意识到的关于模糊错误消息的东西

      这个错误:

      object类型的属性“#/settings/X/variables/X”不匹配任何所需的模式

      确实能告诉我们错误在哪里

      settings/X表示包含错误的“组”，从0开始为1。变量数是对应于该变量的数，也是从0开始的1。
      所以:

      # /设置/ 2 /变量/ 7”

      意味着第三组和第8个变量有问题。它可能是错误的变量类型、错误的值、缺少属性或字符太多(或无效字符)。

      所以在这种情况下，这是“品牌”组的问题，因为品牌是第三个设置。然后从0数到8找出问题中的变量。

      0
    • 哈米什

      我们是否可以在这篇文章中添加更多关于以下限制的信息:

      -选项数组中值的总数(文章说最小值为1，但我不确定最大值)

      -标签和描述的字符限制

      文本框的字符限制(我想应该是999)

      -可变对象的最大数量(我知道这是200个，但将所有这些信息集中会有帮助)

      非常感谢

      0

    请登录留下评论。

    相关文章

    提供:Zendesk亚博