Utilisation de modules dans les modèles
Les modules peuvent être ajoutés directement à un modèle ou ajoutés à des pages individuelles avec des zones de glisser-déposer et des colonnes flexibles. Lorsqu'un module est ajouté à un modèle, le module apparaîtra à cet emplacement par défaut. Les modules dans les zones de glisser-déposer et les colonnes flexibles peuvent être déplacés et supprimés, et d'autres modules peuvent être ajoutés autour d'eux. Ce sont des instances de module.
Une fois qu'un module a été défini, vous pouvez obtenir ses valeurs de champ au niveau du modèle via le dictionnaire content.widgets.
Les balises de module HubL sont délimitées par{% %}
et doivent spécifier le module
, un nom unique et le chemin du gestionnaire de conception du module. Un module peut également inclure des paramètres pour des paramètres supplémentaires.
- Nom du module : donne au module une identité unique dans le contexte du modèle.
- Le nom doit être entre guillemets après le type de module et doit utiliser des traits de soulignement au lieu d'espaces ou de tirets.
- Ce nom est utilisé pour faire correspondre le contenu défini dans l'éditeur de page/d'e-mail avec la balise de module HubL correspondante. Par exemple, si vous codez une balise de module HubL avec le même nom dans deux zones différentes d'un modèle, les utilisateurs n'auront qu'un seul module à modifier dans l'éditeur, mais les modifications apportées à ce module s'appliqueront aux deux endroits.
- Le nom doit être entre guillemets après le type de module et doit utiliser des traits de soulignement au lieu d'espaces ou de tirets.
- Chemin : en fonction de la balise, définit l'emplacement du module dans le gestionnaire de conception.
/
désigne la racine du lecteur actuel../
désigne le répertoire actuel.../
désigne le parent du répertoire actuel.
@hubspot/
suivi du type de module.
- Paramètres : paramètres supplémentaires pour l'instance de module, spécifiant son comportement et son rendu. Inclut des valeurs par défaut au niveau du modèle pour les champs de module.
- Les paramètres sont des paires clé-valeur séparées par des virgules.
- Les paramètres peuvent être de différents types : chaîne de caractères, booléen, entier, énumération et objet de liste JSON. Les valeurs des paramètres de chaîne doivent être entre guillemets simples ou doubles, tandis que les paramètres booléens ne nécessitent pas de guillemets autour de leurs valeurs
true
oufalse
. Découvrez-en davantage sur les paramètres disponibles pour tous les modules. - Notez qu'il n'y a pas de validation dans l'éditeur pour les valeurs de champ par rapport aux paramètres de champ du module. Par exemple, si un module possède un champ numérique dont la valeur minimale est fixée à
1
et que vous transmettez au paramètre la valeur0
, aucun avertissement indiquant que la valeur n'est pas valide ne s'affichera.
Pour les modules dont les champs attendent des dictionnaires, vous pouvez les transmettre comme d'autres paramètres. Si cela vous permet une meilleure organisation ou si vous prévoyez de réutiliser les valeurs, vous pouvez définir le dictionnaire sur une variable et transmettre la variable au paramètre à la place.
Les balises de glisser-déposer, telles que dnd_area
, sont fournies avec un ensemble de paramètres par défaut, tels que width
. Bien que le gestionnaire de conception vous empêche de créer de nouveaux champs qui utilisent l'un de ces paramètres réservés, les modules créés avant l'introduction des balises de glisser-déposer peuvent déjà utiliser un paramètre réservé.
Pour résoudre ce problème, vous pouvez utiliser le paramètre fields
. Tout comme vous transmettez des données de champ à un groupe, vous pouvez transmettre le nom du champ en tant que clé sur l'objet fields
. Sa valeur doit être conforme au format attendu par le type de champ.
Vous pouvez définir des valeurs par défaut pour les champs de module au niveau du modèle en incluant des paramètres dans les balises dnd_module
. Découvrez ci-dessous comment définir les valeurs de champ par défaut dans les groupes de champs imbriqués, les champs répétitifs, les groupes de champs répétitifs et les champs de style.
Vous trouverez ci-dessous un exemple de module de glisser-déposer personnalisé avec un groupe de champs style
personnalisé contenant d'autres groupes de champs imbriqués. Comparez sa configuration au niveau du modèle avec la façon dont ce même regroupement apparaîtrait dans le gestionnaire de conception.

Vous pouvez définir des valeurs par défaut au niveau du modèle pour les champs répétés en transmettant un tableau au paramètre du champ. Les éléments du tableau doivent avoir le format attendu en fonction du type de champ. Par exemple :
- Un champ de texte simple attend une chaîne uniquement.
- Un champ de répétition d'image attend un objet de champ d'image. Ceci s'applique à tous les autres types de champs.
Les modules qui contiennent des groupes de champs répétés, comme ceux d'un module de diaporama ou d'un module de FAQ, peuvent avoir une valeur par défaut au niveau du modèle pour ces groupes. Pour ce faire, vous transmettez un tableau d'objets au paramètre de votre groupe de champs. Les paires (clé, valeur) de l'objet sont les noms des champs et leurs valeurs.
Vous pouvez définir explicitement des valeurs par défaut pour les champs de style à l'aide du paramètre styles
.
Cela fonctionne comme les autres groupes, où le paramètre est le nom du groupe. Vous transmettez un objet à ce paramètre avec tous les champs que vous souhaitez définir.
Alors que la plupart des modules ont des paramètres qui contrôlent le contenu par défaut, il peut y avoir des situations où vous devez ajouter d'importants blocs de code au contenu par défaut d'un module. Par exemple, vous souhaiterez peut-être inclure un important bloc HTML comme contenu par défaut d'un module de texte enrichi ou HTML. Plutôt que d'essayer d'écrire ce code dans un paramètre de valeur, vous pouvez utiliser la syntaxe de bloc HubL.
Avant la syntaxe module_block
, widget_block
était utilisé. Il suit le même modèle mais les balises d'ouverture étaient widget_block
et widget_attribute
. Les balises de fermeture étaient end_widget_attribute
et end_widget_block
.
Si la syntaxe widget_block
est obsolète, vous n'avez pas besoin de mettre à jour votre ancien code.
Le paramètre qui suit immédiatement module_block
ou widget_block
(obsolète) est le paramètre type_of_module
.
Dans presque toute notre documentation, vous noterez que nous utilisons module
. Les modules HubSpot de deuxième version sont des modules normaux, comme ceux que vous pouvez créer. Il n'est donc plus nécessaire d'utiliser un autre élément type_of_module
.
Alors que widget_block
est obsolète, vous devriez utiliser module_block
. Si vous héritez d'un site web d'un autre développeur, il peut contenir un ancien code utilisant widget_block
et type_of_module
.
type_of_module
prend en charge les noms de modules HubSpot de première version, par exemple rich_text
ou raw_html
. Des paramètres supplémentaires peuvent être ajoutés à la première ligne de HubL. La deuxième ligne définit le paramètre auquel le contenu du bloc sera appliqué. Par exemple, pour un module rich_text
, il s'agit du paramètre html. Pour un module raw_html
, il s'agirait du paramètre value (voir les deux exemples ci-dessous).
En plus de la syntaxe normale et de la syntaxe de bloc, il existe certains cas où vous souhaiterez spécifier un important bloc de contenu par défaut pour une variable de contenu prédéfinie. L'exemple le plus courant est la variable content.email_body. Cette variable imprime un corps d'e-mail standard qui peut être modifié dans l'éditeur de contenu. Comme il ne s'agit pas d'un module HubL standard, nous utilisons une balise content_attribute pour spécifier un bloc de contenu par défaut. L'exemple ci-dessous montre que la variable du corps de l'e-mail est renseignée avec un bloc de code de contenu par défaut.
Bien que certains modules ont des paramètres spéciaux, vous trouverez ci-dessous une liste des paramètres pris en charge par tous les modules.
Parameter | Type | Description | Default |
---|---|---|---|
label
| Chaîne | Le nom du module affiché dans l'éditeur de contenu. Ce paramètre peut également être utilisé pour donner des instructions supplémentaires aux utilisateurs. | |
overrideable
| Booléen | Contrôle si le module peut être modifié ou non dans l'éditeur de contenu, ce qui équivaut au paramètre Empêcher la modification dans les éditeurs de contenu dans le gestionnaire de conception. |
True
|
no_wrapper
| Booléen | Lorsqu'il est défini sur Sur les pages, les modules sont toujours encadrés dans |
False
|
extra_classes
| Chaîne | Ajoute des classes au wrapper de module. Vous pouvez ajouter plusieurs classes à la fois, en les séparant par des espaces. Par exemple :
| |
export_to_template_context
| Booléen | Si la valeur est définie sur |
False
|
unique_in_loop
| Booléen | Lorsque le module est défini dans une boucle, ajoute le nom du module à loop.index. Lorsque la valeur est définie sur |
False
|
Pour voir une liste complète de tous les types de modules et de leurs paramètres, cliquez ici.
Découvrez ci-dessous les paramètres de module basés sur les champs que vous pouvez utiliser.
Champ | Type | Exemple | Clés |
---|---|---|---|
Blog | Entier (ID de blog) | 1234567890 |
|
Booléen | true/false | false |
|
Choix | Chaîne | "option_1" |
|
Couleur | Objet |
|
|
CTA | Chaîne (ID de CTA) |
|
|
Date | Horodatage |
|
|
Date et heure | Horodatage |
|
|
Adresse e-mail | Tableau (chaînes d'adresses e-mail) |
|
|
Fichier | Chaîne (URL du fichier) |
|
|
E-mail de suivi | Entier (ID d'e-mail de suivi) |
|
|
Police | Objet |
|
|
Formulaire | Objet |
|
|
Tableau HubDB | Entier (ID de tableau HubDB) | 123456789 |
|
Icône | Objet |
|
|
Image | Objet |
|
|
Lien | Objet |
|
|
Logo | Objet |
|
|
Réunion | Chaîne (lien de prise de rendez-vous) | "https://app.hubspot.com/meetings/developers-r-kewl" |
|
Menu | Entier (ID de menu) | 123456789 |
|
Nombre | Entier | 1 |
|
Page | Entier (ID de page) | 1234567890 |
|
Texte enrichi | Chaîne (peut contenir du HTML) | "<h1>Hello, world!</h1>" |
|
Campagne Salesforce | Chaîne (ID de campagne Salesforce) | "7016A0000005S0tQAE" |
|
Menu simple | Tableau d'objets d'éléments de menu |
|
|
Balise | Entier (ID de balise ou slug, ID recommandé) | 1234567890 |
|
Texte | Chaîne | "it's like any other string" |
|
URL | Objet |
|
|
Merci d'avoir partagé votre avis.