Quand vousexportez un thème, les fichiers exportés incluent un fichier intitulémanifest.json.Ce fichier définit le volet Paramètres du thème dans Guide.
Cet article décrit le fichier de manifeste et à quoi il peut servir. Vous y trouverez aussi les spécifications. Par exemple, exportez votre thème et ouvrez le fichiermanifest.jsondans un éditeur de texte.
Sujets couverts :
- Le fichier manifest.json
- Utilisation des paramètres dans manifest.json comme variables
- Modification du fichier manifest.json
- Objet Manifest
- Objet Setting
- Objet Variable
- Propriété Type
- Type File
- Type List
- Type Range
- Traductions
Le fichier manifest.json
Quand vous exportez un thème, les fichiers exportés incluent un fichier intitulémanifest.json.Vous pouvez utiliser le fichier de manifeste pour définir levolet Paramètresdu thème dans Guide.
Vous pouvez modifier les paramètres existants ou en créer de nouveaux. Dans l’exemple suivant, le fichier de manifeste affecte une valeur par défaut de « #30aabc » au paramètrecolor_brand_text:
"settings": [ { "label": "Colors", "variables": [ { "identifier": "color_brand_text", "type": "color", "description": "color_brand_text_description", "label": "color_brand_text_label", "value": "#30aabc" }, ... ] }, ... ]
Après avoirimporté votre thèmedans Guide, le paramètrecolor_brand_texts’affiche dans le volet Paramètres avec le libelléBrand text color(Couleur du texte de la marque), comme spécifié dans la propriété label du fichier de manifeste et la valeur hexadécimale par défaut du sélecteur de couleur est #30aabc, comme spécifié par la propriété value :
Utilisation des paramètres dans manifest.json comme variables
Les paramètres sont aussi appelésvariables, car vous pouvez utiliser l’identifiant d’un paramètre comme variable dans les fichiers du thème. Si vous modifiez une valeur dans le volet Paramètres, la valeur est mise à jour dans tous les fichiers qui utilisent cette variable.
Vous pouvez insérer une variable dans le fichierstyle.cssdu thème en utilisant la syntaxe$identifier
ou dans un modèle de page en utilisant l’assistantsettings.identifier
dans Curlybars. Exemples :
style.css
input:focus { border: 1px solid $color_brand_text; }
Vous pouvez aussi utiliser des accolades simples pour incorporer l’assistant dans une expression CSS, comme suit :
max-width: #{$search_width}px;
Modèle de page
Modification du fichier manifest.json
Le fichiermanifest.jsonn’est pas inclus dans la liste des fichiers de la page de modification du code du Centre d’aide. Pour modifier le fichiermanifest.json, vous devez exporter le thème dans des fichiers, modifier le fichier de manifeste sur votre système, puis importer le thème dans Guide.
Pour exporter le thème
- À la page des thèmes, cliquez sur l’icône d’engrenage en bas à droite d’un volet de thème et sélectionnezExporter.
Pour importer le thème modifié
- À la page des thèmes, cliquez surImporteren haut à droite.
Objet Manifest
L’objet racine du document de manifeste a les propriétés suivantes :
Nom
Type
Commentaires
name
chaîne
Nom du thème
author
chaîne
La personne qui a créé le thème
version
chaîne
La version du thème qui suit la normeSemantic versioning 2.0.0
api_version
chaîne
Version de l’API de création de modèles
settings
tableau
La liste des objets Paramètres. ConsultezObjet Setting
Exemple
{ "name": "My second theme", "author": "Jane Doe", "version": "1.0.1", "api_version": 1, "settings": [ ... ] }
Objet Setting
Les paramètres dans l’objet racine du manifesteet dans le volet Paramètres de Guide sont organisés en groupes, par exemple Couleurs ou Polices. Chaque groupe de paramètre est défini dans le fichier de manifeste par unobjet Setting.Chaque objet se compose d’un libellé et d’un ou plusieurs paramètres, comme la couleur de la marque ou la couleur du texte.
Vous pouvez modifier les objets Setting ou en créer de nouveaux. Les objets sont reflétés dans le volet Paramètres du thème quand vous importez le thème dans Guide.
Chaque objet Setting a les propriétés suivantes :
Nom
Type
Commentaires
label
chaîne
Le nom de la propriété d’une traduction. ConsultezTraductions.Affiche un titre pour un groupe de paramètres. ConsultezLimites des produits Guide pour votre centre d’aide(Nombre total de paramètres dans manifest.json).
variables
tableau
La liste des paramètres du groupe. Aussi appelés variables. ConsultezObjet Variable.Le fichier de manifeste peut contenir un maximum de 200 objets de variable.
Exemple
"settings": [ { "label": "colors_group_label", "variables": [{...}, ...] }, { "label": "fonts_group_label", "variables": [{...}, ...] }, { "label": "brand_group_label", "variables": [{...}, ...] }, { "label": "banners_group_label", "variables": [{...}, ...] } ]
Remarque –Les valeurs des propriétés"label"
sont des noms de propriétés de traduction. ConsultezTraductions.
L’exemple crée les catégories suivantes dans le volet Paramètres :
![](https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_panel_modified.png)
Objet Variable
Chaqueobjet Settinga un tableauvariables
qui répertorie les paramètres. On les appelle variables, car vous pouvez les insérer sous la forme de variable dans les modèles du Centre d’aide ou dans le code CSS. ConsultezLimites des produits Guide pour votre centre d’aide(Nombre total de paramètres dans manifest.json).
Vous pouvez définir toutes les variables que vous souhaitez. Cependant, le fichier de manifeste doit contenir deux variables de fichier avec les identifiants suivants : logo et favicon. ConsultezVariables obligatoires.
Chaque variable a les propriétés suivantes :
Nom
Type
Commentaires
identifier
chaîne
Le nom de variable que vous pouvez utiliser dans les expressions CSS ou Curlybars. Ne doit pas dépasser 30 caractères et doit contenir uniquement des caractères alphanumériques et le trait de soulignement (_)
type
chaîne
Le contrôle de l’interface utilisateur dans le volet Paramètres pour obtenir la valeur de l’utilisateur. Au choix :text
,list
,checkbox
,color
,file
ourange
.ConsultezPropriété Type.
label
chaîne
Le nom de la propriété d’une traduction. ConsultezTraductions.公告de la traduction的数值à côté du contrôle de l’interface utilisateur dans le volet Paramètres.
Il n’y a pas de limite de caractères pour les libellés.
description
chaîne
Le nom de la propriété d’une traduction. ConsultezTraductions.公告的数值de la traduction苏印版d’une courte description du paramètre. Cette variable ne peut pas contenir une chaîne vide.
Il n’y a pas de limite de caractères pour les descriptions.
value
chaîne
La valeur par défaut du paramètre
options
tableau
Pour le typelist
uniquement . Un tableau d’éléments de liste. ConsultezObjet Option.
min
entier
Pour le typerange
uniquement . La valeur minimum de la plage.
max
entier
Pour le typerange
uniquement . La valeur maximum de la plage.
Exemple
"variables": [ { "identifier": "color_brand", "type": "color", "label": "color_brand_label", "description": "color_brand_description", "value": "#0072EF" }, ... ]
L’exemple crée le libellé et le contrôle suivants dans le volet Paramètres :
![](https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_panel_variable.png)
Variables obligatoires
Vous devez spécifier les deux variables suivantes dans le fichier de manifeste ou il sera rejeté à l’importation :
- logo -
identifier
doit être « logo » ettype
doit être « file »
- favicon -
identifier
doit être « favicon » ettype
doit être « file »
Exemple
“变量”:[{“标识符”:“标志”、“类型”:“file", "description": "logo_description", "label": "logo_label" }, { "identifier": "favicon", "type": "file", "description": "favicon_description", "label": "favicon_label" } ]
Propriété Type
Chaqueobjet Variablea une propriététype
qui spécifie un contrôle d’interface utilisateur pour définir la valeur de paramètre dans le volet Paramètres de Guide. La propriété peut avoir l’une des valeurs suivantes :
text
- Champ de saisie de texte. Chaque champ de texte a une limite de 1 000 caractères.
list
- Liste déroulante. Inclut une liste d’objets Option pour les éléments de liste. ConsultezType List.
checkbox
- Case à cocher. ConsultezType Checkbox.
color
- Sélecteur de couleur
file
- Outil de téléchargement de fichiers. ConsultezType File.
range
- Champ de saisie de plage. ConsultezType Range.
Exemple
{ "identifier": "color_headings", "type": "color", ... }
Type List
Si letyped’un objet Variable est « list , l’objet inclut un tableauoptions
pour remplir la liste déroulante. Chaque option dans la liste a les propriétés suivantes :
Nom
Type
Commentaires
label
chaîne
Le texte convivial affiché pour l’élément de liste.
Il n’y a pas de limite de caractères pour les libellés.
value
chaîne
La valeur sous-jacente de l’élément de liste.
Vous devez spécifier plus d’une option dans le tableau ou l’importation du thème échouera. Vous pouvez inclure un nombre illimité d’options.
Exemple
{ "identifier": "font_headings", "type": "list", "label": "Heading", "description": "Font for headings", "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" } ] }
Type Checkbox
Si letyped’un objet Variable est « checkbox », utilisez la propriétévaluede l’objet pour spécifier la valeur qui est définie quand l’utilisateur sélectionne la case à cocher. Il doit s’agir d’une valeur booléenne.
Nom
Type
Commentaires
value
booléen
true
oufalse
Exemple
{ "identifier": "scoped_hc_search", "type": "checkbox", "description": "scoped_help_center_search_description", "label": "scoped_help_center_search_label", "value": true }
Type File
Un objet Variable avec letype« file » ajoute un contrôle de téléchargement de fichiers dans le volet Paramètres. Ce type de variable n’a pas de propriétévalue.Exemple :
{ "identifier": "community_image", "type": "file", "description": "community_image_description", "label": "community_image_label" }
La valeur est une URL de fichier déterminée par le système.
Vous devez fournir un fichier par défaut que le thème utilisera jusqu’à ce qu’un utilisateur télécharge un autre fichier. Le nom du fichier par défaut doit correspondre à l’identifiant de la variable. Placez le fichier dans le dossiersettingsdans vos fichiers de thème. Exemple :
![](https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_default_file.png)
Utilisez des variables de fichiers quand des URL sont attendues dans les fichiers de thème. Exemples :
style.css
.community_banner { background-image: url($community_image); }
Modèle de page
![](//www.ying8.net/support/hc/fr/articles/{{settings.community_image}})
Type Range
Un objet Variable avec le type « range » ajoute un contrôle de curseur dans le volet Paramètres. Exemple :
![](https://zen-marketing-documentation.s3.amazonaws.com/docs/en/hc_settings_range_type.png)
Une variable de plage inclut des propriétésminetmaxpour spécifier la plage de valeurs que l’utilisateur peut définir quand il fait glisser le curseur. Les valeurs doivent être des nombres entiers.
Exemple
{ "identifier": "font_size", "type": "range", "description": "font_size_description", "label": "font_size_label", "min": 70, "max": 150, "value": 100 }
Traductions
Les chaînes visibles du volet Paramètres sont toutes définies dans lestraductions.Une traduction se compose d’un nom de propriété et d’une valeur. Exemple :
"text_color_label": "Text color"
Les noms de propriétés sont arbitraires. Vous pouvez spécifier le nom de votre choix.
Les traductions sont stockées dans des fichiers JSON spécifiques à la langue dans le dossiertranslationsdu dossier racine du thème :
/ translations - en-us.json - es.json - fr.json - ...
Chaque fichier se compose d’un objet JSON avec une liste de traductions :
en-us.json
{ "brand_color_description": "Brand color for major navigational elements", "brand_color_label": "Brand color", ... }
Les traductions servent à spécifier les libellés et les descriptions dans le volet Paramètres.
Pour spécifier des chaînes pour les libellés et les descriptions
Dans le dossiertranslations, cherchez le fichier JSON pour la langue par défaut de votre Centre d’aide. Exemple :en-us.json.
Mettez à jour les valeurs des propriétés existantes ou ajoutez de nouvelles propriétés. Exemple :
{ "text_color_label": "Text color", "text_color_description": "Text color for body and heading elements", ... }
Dans les variables, utilisez le nom de propriété de la traduction comme valeur des attributs"label"
ou"description"
.
"variables": [ { "identifier": "color_text", "type": "color", "label": "text_color_label", "description": "text_color_description", "value": "#0072EF" }, ... ]
ConsultezObjet Variable.Si vous créez une nouvelle propriété ou modifiez le nom d’une propriété existante, n’oubliez pas de mettre vos variables à jour.
Vous pouvez traduire les libellés et les descriptions du volet Paramètres. C’est à vous de fournir les chaînes traduites.
Pour traduire les libellés et les descriptions
Dans le dossiertranslations, cherchez le fichier JSON pour chaque langue supplémentaire que vous souhaitez prendre en charge.
Copiez les noms des propriétés définies dans votre fichier de traductions par défaut. Exemple :
{ "text_color_description": "", "text_color_label": "", ... }
Spécifiez une chaîne traduite pour chaque propriété. Exemples :
fr.json
{ "text_color_description": "Couleur du texte pour les éléments du titre et du corps", "text_color_label": "Couleur du texte", ... }
0 Commentaires
Vous devezvous connecterpour laisser un commentaire.