Configurer un module

À un niveau élevé, vous configurez les options de module localement dans le fichier meta.json, qui peut inclure les propriétés suivantes :

Parameter	Type	Description	Default
`icon`	Chaîne	URL d’une image à utiliser comme icône pour un module.
`label`	Chaîne	Label utilisé lorsque les modules sont affichés dans les éditeurs de contenu.
`module_id`	Nombre	Identifiant unique pour le module qui est indépendant du chemin.
`is_available_for_new_content`	Booléen	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`	Booléen	Indique si le module est global ou non.	`false`
`host_template_types`	Tableau	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" ]`.
`css_assets`	Tableau	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`	Objet	Définissez si le module CSS est restitué de manière asynchrone avec `async` : `true` ou `false`.	`{"async": false}`
`js_assets`	Tableau	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`	Objet	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`	Chaîne	Texte d’aide qui sera affiché en haut du module dans une boîte d’information bleue (limite de 300 caractères).Fournit les informations nécessaires à l’utilisation du module. Si vous avez des informations de texte d’aide spécifiques au champ à transmettre, reportez-vous à la documentation sur le champ de texte d’aide.	`null`
`master_language`	Chaîne	Lorsque les traductions sont activées, le code de la langue dans laquelle les champs du module ont été écrits à l’origine.Par exemple, `en`.
`placeholder`	Objet	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.
`categories`	Tableau	Un tableau contenant jusqu’à trois catégories de module.Par exemple : `"categories":["FORMS_AND_BUTTONS"]`
`content_tags`	Tableau	Un tableau d’objets de balise de module contenant le nom de balise et la `source` de `"USER"`.Par exemple : `"content_tags": [{` `"name" : "BUTTONS",` "source" : "USER"``}]

Ci-dessous, découvrez-en davantage sur les options de configuration des modules individuels.

Ajout d’une icône

Les modules peuvent inclure une icône qui apparaît dans le gestionnaire de conception ainsi que dans les éditeurs de page et d’e-mail pour fournir un contexte visuel aux créateurs de contenu. Il est recommandé d’avoir différentes icônes pour les différents types de module de votre thème. Pour les fournisseurs de marketplace, ces icônes sont obligatoires. Il y a deux façons d’ajouter une icône : via le gestionnaire de conception ou l’ILC CMS. 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 simple et n’utiliser qu’une seule couleur. Les icônes qui utilisent plus d’une couleur seront automatiquement converties pour vous. L’icône du module qui s’affiche par défaut est une icône de clé à molette et de pinceau. Pour ajouter une icône à l’aide du gestionnaire de conception : 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."
}

Modification du 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. Lors du développement local, vous pouvez rendre un module global en définissant global sur true. Vous pouvez également convertir des modules dans un modèle de glisser-déposer en global via le gestionnaire de conception.

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

Lors du développement local, vous pouvez contrôler les types de contenu dans lesquels un module peut être utilisé via la propriété hostTemplateTypes. Découvrez-en davantage sur les types de modèles disponibles. 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. Par exemple, cela peut être utile pour les modules conçus pour les menus de navigation et la recherche. Vous pouvez mettre à jour cela dans le gestionnaire de conception en cliquant sur l’option Type de modèle dans la barre latérale droite.

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" }]
}

Attention : 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.

À l’aide du gestionnaire de conception, vous pouvez lier des fichiers CSS et JavaScript à un module à l’aide de la section Fichiers liés dans la barre latérale droite de l’éditeur de module.

Ajouter des catégories et des balises

Vous pouvez affecter des catégories et des balises aux modules pour les organiser dans les outils HubSpot :

Catégories : assignez des catégories à un module pour les organiser en groupes au sein de l’interface utilisateur de l’éditeur de contenu. Cela permet aux créateurs de contenu de trouver des modules plus facilement tout en créant du contenu dans HubSpot. Notez ce qui suit à propos des catégories :
- Un module peut avoir jusqu’à trois catégories, qui sont prédéfinies et ne peuvent pas être personnalisées.
- Actuellement, les catégories ne sont pas affichées dans l’interface utilisateur de l’éditeur de contenu. Cependant, vous pouvez attribuer des catégories lorsque la catégorisation est disponible dans les éditeurs.
- Les modules non classés seront disponibles dans une catégorie Tous.
Balises : assignez des balises pour organiser les modules dans le gestionnaire de conception. Cela vous permet de trouver des modules plus facilement lors de la création de modèles.

Dans le gestionnaire de conception, vous pouvez attribuer des catégories et des balises à l’aide de la section Filtrer les balises de la barre latérale droite dans l’éditeur de module. Découvrez-en davantage sur les catégories et les balises disponibles ci-dessous.

Localement, vous pouvez ajouter des catégories et des balises au fichier meta.json d’un module comme suit :

// meta.json
{
  "label": "Custom module",
  "categories": ["image_and_video", "commerce"],
  "content_tags": [
    {
      "name": "BUTTONS",
      "source": "USER"
    },
    {
      "name": "CTA",
      "source": "USER"
    }
  ],
  "is_available_for_new_content": true
}

Catégories

Le tableau categories d’un module peut contenir jusqu’à trois des catégories suivantes (insensibles à la casse) :

Catégorie	Description
`blog`	Modules spécifiques au blog, tels qu’un listing des publications récentes.
`body_content`	Modules formatés pour présenter graphiquement le contenu, comme une galerie d’images.
`commerce`	Modules spécifiques au domaine commercial, tels que les cartes de prix.
`design`	Modules qui affectent la structure et la mise en page du contenu, tels que les accordéons.
`functionality`	Modules qui incluent des réponses dynamiques ou un comportement sur la page, tels que des menus.
`forms_and_buttons`	Modules qui permettent aux visiteurs du site de saisir et soumettre des données.
`media`	Modules contenant des éléments tels que des images, des icônes, des vidéos et des bannières.
`social`	Modules spécifiques aux réseaux sociaux, tels que le partage social.
`text`	Modules qui ne contiennent que du texte.

Balises

Le tableau content_tags d’un module peut contenir l’un des objets de balise de module suivants (sensible à la casse) : Types de contenu :

ACCORDION
ANIMATION
BLOG_POST
BUTTONS
CODE
CTA
FEED
FORM
ICON
IMAGE
LISTS
LOGO
MENU
RICH_TEXT
SLIDER
TEXT
VIDEO

Fonctions :

BANNER
BLOG
BRANDING
CALCULATOR
CONVERSION
email
GALLERY
HEADERS
INTERACTION
LAYOUT
MAP
MULTIMEDIA
NAVIGATION
PROGRESS_BAR
SEARCH
SETTINGS
social
TRANSLATION

Champs

HubL

React

Modules

Fonctions sans serveur

Ajout d’une icône

Modification du libellé

Transformer en module global

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

Ajout de dépendances CSS et JavaScript

Ajouter des catégories et des balises

Catégories

Balises

​Ajout d’une icône

​Modification du libellé

​Transformer en module global

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

​Ajout de dépendances CSS et JavaScript

​Ajouter des catégories et des balises

​Catégories

​Balises

Ajout d’une icône

Modification du libellé

Transformer en module global

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

Ajout de dépendances CSS et JavaScript

Ajouter des catégories et des balises

Catégories

Balises