Utilisation de modules dans les modèles

Last updated:

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.

Syntaxe de base des modules

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.
  • 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.
Le chemin des modules par défaut de HubSpot doit toujours commencer par @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 ou false. 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 valeur 0, aucun avertissement indiquant que la valeur n'est pas valide ne s'affichera.
{# Basic syntax #} {% module "unique_module_name" path="@hubspot/module_type", parameterString='String parameter value', parameterBoolean=True %} {# Sample of a default HubSpot text module #} {% module "job_title" path="@hubspot/text", label="Job Title", value="Chief Morale Officer" %} {# Sample of a custom module #} {% module "faqs" path="/myWebsite/modules/faq_module", label="Custom FAQ Module" faq_group_title="Commonly Asked Questions" %}

Transmission de dictionnaires aux paramètres du module

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.

{% module "social_buttons", path="@hubspot/social_sharing", email={ "default": true, "enabled": false, "img_src": "https://..." } %}

Transmission de champs ayant des paramètres dnd associés

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.

{% dnd_area "main_content"%} {% dnd_section %} {% dnd_column %} {% dnd_row %} {% dnd_module path="@hubspot/divider", fields={width: "90"} %} {% end_dnd_module %} {% end_dnd_row %} {%end_dnd_column%} {% end_dnd_section %} {% end_dnd_area %}

Définition de valeurs par défaut au niveau du modèle pour les champs

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.

Définir des valeurs par défaut pour les groupes de champs imbriqués

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.

{% dnd_module path="/Nested_Module.module" style={ "group":{ "section":{ "color_field":{ "color" : "#000", "opacity" : 100 } } } } %} {% end_dnd_module %}
Imbrication de champs à plusieurs niveaux

Définir des valeurs par défaut pour les champs répétitifs

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.
{% module path='../modules/recipe_card.module', ingredients=["Eggs","Ham","Cheese"] %} {% module "my_repeater_module" path="/img_repeater_module", label="img_repeater_module", image=[ { "src" : "https://cdn2.hubspot.net/hubfs/428357/Developer%20Site/assets/logo/Developers-LOGO.svg", "alt" : "HubSpot Developers", "width" : 254, "height" : 31 },{ "src" : "https://www.hubspot.com/hs-fs/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", "alt" : "Dharmesh", "width" : 394, "height" : 394 } ] %}

Définir des valeurs par défaut pour les groupes de champs répétitifs

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.

{% module path='../modules/slideshow.module', slides=[ { "caption":"Cute dog looking up", "image_url":"http://example.com/image.jpg", }, { "caption":"Cuter cat not looking amused", "image_url":"http://example.com/image2.jpg", } ] %}

Définir des valeurs par défaut pour les champs de style

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.

{% dnd_module path="./path/to/module", styles={ "background_color":{ "color":"#123", "opacity":50 } } %}

Syntaxe de bloc

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.

{% module_block module "my_rich_text_module" path="/My Rich Text Field Module", label="My Rich Text Field Module" %} {% module_attribute "rich_text_field_variable" %} <div>My HTML block</div> {% end_module_attribute %} {% end_module_block %}

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). 

{# widget_block is deprecated, use module_block instead. This example is only to explain what type_of_module was used for, for those with legacy code. #} {% widget_block rich_text "my_rich_text_module" overrideable=True, label='My rich-text module' %} {% widget_attribute "html" %} <h2>New Module</h2> <p>Add content here.</p> {% end_widget_attribute %} {% end_widget_block %}<span id="hs_cos_wrapper_my_rich_text_module" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"> <h2>New Module</h2> <p>Add content here.</p> </span>

content_attribute

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.

{% content_attribute "email_body" %} <p>Hi {{ contact.firstname }},</p> <p>Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...</p> <p>Use a list to:</p> <ul> <li>Explain the value of your offer</li> <li>Remind the reader what they’ll get out of taking action</li> <li>Show off your skill with bullet points</li> <li>Make your content easy to scan</li> </ul> <p><a href="http://hubspot.com">LINK TO A LANDING PAGE ON YOUR SITE</a> (This is the really important part.)</p> <p>Now wrap it all up with a pithy little reminder of how much you love them.</p> <p>Aw. You silver-tongued devil, you.</p> <p>Sincerely,</p> <p>Your name</p> {% end_content_attribute %}

Paramètres disponibles pour tous les modules

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.

ParameterTypeDescription 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 true, supprime le balisage d'encadrement autour du contenu d'un module.

Sur les pages, les modules sont toujours encadrés dans <div> avec des classes spéciales. Grâce à ce balisage, lorsque vous cliquez sur le module dans le volet de prévisualisation, l'éditeur défile vers ce module. Vous souhaiterez peut-être supprimer le wrapper, par exemple si vous souhaitez utiliser un module de texte pour renseigner la destination de l'attribut href d'une balise d'ancrage.

 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 :

extra_classes='full-width panel'
export_to_template_context
Booléen

Si la valeur est définie sur true, au lieu de rendre le HTML, les paramètres de ce widget seront disponibles dans le contexte du modèle. Découvrez comment utiliser ce paramètre et la balise widget_data.

 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 true, une version différente du module s'imprimera à chaque itération de la boucle. Ajoute le nom du module à loop.index.

 False

Pour voir une liste complète de tous les types de modules et de leurs paramètres, cliquez ici.

Paramètres basés sur les champs

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 
{
  "color" : "#ffffff",
  "opacity" : 100
}
Couleur
Format hexadécimal à 6 caractères
Opacité
Entier entre 0 et 100
CTA Chaîne (ID de CTA) 
"fb9c0055-6beb-489d-8dda-3e1222458750"
  
Date Horodatage 
1566360000000
  
Date et heure Horodatage 
1566360000000
  
Adresse e-mail Tableau (chaînes d'adresses e-mail) 
["develop@hubspot.com", "design@hubspot.com"]
  
Fichier Chaîne (URL du fichier) 
"https://cdn2.hubspot.net/hubfs/file.pdf"
  
E-mail de suivi Entier (ID d'e-mail de suivi) 
1234567890
  
Police Objet 
{
  "size" : 12,
  "size_unit" : "px",
  "couleur" : "#000",
  "styles" :{
    "text-decoration" : "underline"
  },
  "font" : "Alegreya",
  "fallback" : "serif",
  "variant" : "regular",
  "font_set" : "GOOGLE"
}
Taille
Taille de police sans type d'unité
size_unit
Chaîne d'unités de taille de police
  • "px"
  • "pt"
  • "em"
  • "rem"
  • %
  • "ex"
  • "ch"
Couleur
Chaîne de codes couleur hex
Styles
Propriétés prises en charge
"font-weight"
"normal" / "bold"
"font-style"
"normal" / "italic"
"font-style"
"none" / "underline"
Formulaire Objet 
{
  "form_id" : "9aa2e5f3-a46d-4774-897e-0bc37478521c",
  "response_type" : "redirect",
  "redirect_url" : "http://www.hubspot.com",
  "redirect_id" : null,
  "form_type" : "HUBSPOT"
}
form_id
L'ID du formulaire. Comment obtenir l'ID d'un formulaire.
response_type
"redirect" / "inline"
Message
Message affiché si vous utilisez le type de réponse "inline". Chaîne prenant en charge le HTML.
redirect_url
Chaîne, URL absolue d'une page web
redirect_id
ID de page/d'article de redirection
form_type
"HUBSPOT" / "TICKET_FORM"
Tableau HubDB Entier (ID de tableau HubDB) 123456789  
Icône Objet 
{ 
  "name" : "align-center",
  "unicode" : "f037",
  "type" : "SOLID"
}
Nom
Le nom de l'icône
Unicode
Le symbole Unicode de la police dont l'icône est issue
Type
Style de symbole. "SOLID" / "REGULAR"
Il est recommandé de définir un champ d'icône et de visualiser les valeurs de cette manière afin de définir les paramètres correctement.
Image Objet 
{
  "src" : "https://cdn2.hubspot.net/hubfs/image.jpeg",
  "alt" : "an_image",
  "width" : 100,
  "height" : 100
}
src
URL d'image
Texte alternatif
Le texte alternatif de l'image, utilisé par les lecteurs d'écran et les moteurs de recherche
Largeur
La largeur à laquelle l'image doit être affichée
Hauteur
La hauteur à laquelle l'image doit être affichée
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 
[ 
  { 
    "isPublished" : true,
    "pageLinkId" : 123456789,
    "pageLinkName" : "My page",
    "isDeleted" : false,
    "categoryId" : 1,
    "subCategory" : "site_page",
    "contentType" : "site_page",
    "state" : "PUBLISHED_OR_SCHEDULED",
    "linkLabel" : "This is a page",
    "linkUrl" : null,
    "linkParams" : null,
    "linkTarget" : null,
    "type" : "PAGE_LINK",
    "children" : [ ]
  } 
]
isPublished
true/false – La page de l'élément de menu est-elle publiée ?
pageLinkId
ID de page dans le CMS
pageLinkName
Le véritable nom de la page dans le CMS
isDeleted
true/false
categoryId
  • 1 – Page du site
  • 3 – Article de blog
subCategory
  • site_page
  • landing_page
  • blog
  • normal_blog_post
contentType
  • site_page
  • landing_page
  • blog
state
  • DRAFT
  • DRAFT_AB
  • PUBLISHED
  • PUBLISHED_OR_SCHEDULED
  • PUBLISHED_AB
  • SCHEDULED
linkLabel
Le texte que l'utilisateur lit et sur lequel il clique
linkUrl
URL véritable vers laquelle l'utilisateur est redirigé après avoir cliqué
linkParams
Liens (#) ou paramètres de requête (?)
linkTarget
"_blank" si l'ouverture dans un nouvel onglet est activée, sinon "null"
Type
  • "PAGE_LINK"
  • "PAGE_LINK_WITH_PARAMS"
  • "NO_LINK"
Enfants
Tableau d'objets d'éléments de menu identiques aux éléments de menu individuels.
Balise Entier (ID de balise ou slug, ID recommandé) 1234567890  
Texte Chaîne "it's like any other string"  
URL Objet 
{ 
  "type" : "CONTENT",
  "href" : null,
  "content_id" : 123456789
}
Type
  • "EXTERNAL" pour les URL de HubSpot (hors e-mail)
  • "CONTENU" pour les pages, les articles de blog et les pages de destination
  • "FILE" pour les fichiers téléchargés dans le gestionnaire de fichiers
  • "EMAIL_ADDRESS" pour les adresses e-mail
  • "BLOG" pour les pages de listing de blog
href
Chaîne, l'URL vers laquelle vous établissez un lien
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é.