Configuration de module

Last updated:

Lorsque vous créez un module, vous disposez d'un certain nombre d'options qui ont un impact sur l'endroit où le module est visible, la façon dont il est identifié et la façon dont il est modifié. Les modules apparaissent localement comme des dossiers avec un suffixe .module. Ce dossier contient les fichiers qui constituent les paramètres du module et le code utilisé pour le restituer. La configuration est conservée dans le fichier meta.json. Les champs sont configurés séparément dans un fichier fields.json. La plupart des configurations peuvent également être modifiées à l'aide de l'éditeur de module dans le gestionnaire de conception

Structure du dossier du module affichée localement

Ajout d'une icône

Les modules peuvent avoir une icône qui est utilisée dans le gestionnaire de conception ainsi que dans les éditeurs de page et d'e-mail. Pour les fournisseurs de marketplace, ces icônes sont obligatoires. L'objectif de l'icône est de fournir au créateur de contenu un contexte visuel sur l'objectif du module. Il est donc préférable d'avoir des icônes différentes pour les types de modules dans votre thème. Il y a deux façons d'ajouter une icône : via le gestionnaire de conception ou l'ILC CMS.

Add an icon using the design manager

  1. Ouvrez le module dans le gestionnaire de conception.
  2. Lorsque vous êtes dans l'éditeur de module, l'icône qui apparaît à côté du titre et du type de module est un bouton. En sélectionnant ce bouton, vous obtenez un champ de téléchargement d'icône.
  3. Téléchargez/sélectionnez votre icône et vous pourrez désormais la voir dans l'éditeur de page et le gestionnaire de conception.
Change Icon

Ajout d'une icône à l'aide de l'ILC

Pour ajouter une icône lors du développement local, ouvrez le fichier meta.json du module et ajoutez ou modifiez la valeur du paramètre icon pour qu'il soit au format SVG à partir du gestionnaire de fichiers.

// meta.json { "global": false, "host_template_types": ["PAGE"], "icon": "http://example.com/hubfs/code.svg", "label": "Code block", "smart_type": "NOT_SMART", "is_available_for_new_content": true, "inline_help_text": "This module is for code snippets." }

Création d'une icône de module

Les icônes de module doivent être des fichiers .svg et leur taille ne doit pas dépasser 10 ko. Pour de meilleurs résultats, votre icône doit être assez simple et n'utiliser qu'une seule couleur. Si votre icône utilise plus d'une couleur, elle sera automatiquement convertie pour vous. L'icône du module qui s'affiche par défaut est une icône de clé à molette et de pinceau.

Modification du libellé

Le libellé utilisé lorsque les modules sont affichés dans l'éditeur peut être modifié séparément du nom du module. Cela est utile lors du développement local, car vous pouvez avoir un nom qui a du sens pour vous tout en ayant un nom différent pour les créateurs de contenu. Localement, vous modifiez le paramètre label pour définir le libellé. Dans le gestionnaire de conception, un champ dans l'éditeur de module est présent en dessous du nom du module.

Éditeur de module – Champ de libellé

Transformer en module global

Pour les modules normaux, le contenu de chaque instance d'un module dans une page, un e-mail ou un modèle est indépendant. Pour certains cas d'utilisation, il est utile de pouvoir faire en sorte que toutes les instances d'un module partagent le même contenu. Cela est possible en paramétrant global sur true

Il est également possible de convertir les modules d'un modèle en glisser-déposer en modules globaux via l'interface utilisateur.

Contrôle de l'endroit où un module peut être utilisé

Les modules peuvent être limités à certains types de contenu avec la configuration de hostTemplateTypesis. Il est également possible de masquer les modules afin qu'ils ne puissent pas être ajoutés directement aux pages en définissant la valeur false pour is_available_for_new_content. Les modules conçus pour les menus de navigation et la recherche sont de bons choix pour le masquage via is_available_for_new_content.

Ces deux éléments peuvent également être gérés par l'éditeur de module.

Ajout de dépendances CSS et JavaScript

En plus de l'utilisation de module.css et module.js pour ajouter des éléments CSS et JavaScript qui seront ajoutés à toutes les pages qui incluent une instance de module, les dépendances qui sont partagées entre les modules peuvent être jointes à l'aide de css_assets et js_assets. Les chemins peuvent être absolus ou relatifs au fichier meta.json.

// meta.json { "css_assets": [{ "path": "../path/to/file.css" }], "js_assets": [{ "path": "../path/to/file.js" }] }

Avertissement : Lorsque vous utilisez des chemins relatifs pour référencer les dépendances, l'exécution de hs fetch --overwrite pour mettre à jour le module pour le développement local remplacera les chemins relatifs par des chemins absolus.

meta.json

Vous pouvez ajouter les paramètres du tableau ci-dessous au fichier mea.json d'un module.

ParameterTypeDescription Default
icon
String

URL d'une image à utiliser comme icône pour un module.

null
label
String

Label utilisé lorsque les modules sont affichés dans les éditeurs de contenu.

module_id
Number

Identifiant unique pour le module qui est indépendant du chemin.

is_available_for_new_content
Boolean

La valeur du bouton à bascule dans l'angle supérieur droit de l'éditeur de module dans HubSpot. Détermine si le module peut être utilisé dans le contenu.

true
global
Boolean

Indique si le module est global ou non.

false
host_template_types
Array

Un tableau array des types de contenu dans lesquels le module peut être utilisé. Un ou plusieurs des éléments [ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ].

["PAGE", "BLOG_POST", "BLOG_LISTING"]
css_assets
Array

Un tableau array des fichiers CSS dont dépend le module. Les chemins relatifs sont pris en charge.

Par exemple : "css_assets" : [{ "path" : "../path/to/file.css" }].

[]
css_render_options
Object

Définissez si le module CSS est restitué de manière asynchrone avec async : true ou false

{"async": false}
js_assets
Array

Un tableau array des fichiers JavaScript dont dépend le module. Les chemins relatifs sont pris en charge.

Par exemple : "js_assets" : [{ "path" : "../path/to/file.js" }].

[]
js_render_options
Object

Modifie la balise JavaScript du module ajoutée à la page restituée. Les options comprennent :

  • position : head/footer
  • async : true/false 
  • defer : true/false 
  • type : string

 

{"position":"footer"}
inline_help_text
String

Texte d'aide qui sera affiché en haut du module dans une boîte d'information bleue (limite de 300 caractères).

À utiliser de préférence pour fournir les informations nécessaires à l'utilisation du module. Si vous avez des informations à transmettre sous forme de texte d'aide spécifique à un champ, veuillez vous reporter à notre documentation sur le texte d'aide pour les champs.

null
master_language
String

Le code de la langue dans laquelle les champs du module ont été écrits à l'origine.

Par exemple, en.

placeholder
Object

Définit le contenu de variable pour le module. Comprend les propriétés suivantes :

  • show_module_icon : indique si l'icône du module s'affiche (true/false).
  • title : le titre qui apparaît sur le module dans l'éditeur. Chaîne.
  • description : la description qui apparaît sur le module dans l'éditeur. Chaîne.
False

Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.