Utilisation de modules dans les modèles

Last updated:

Les modules sont des zones modifiables des pages ou des e-mails HubSpot. Des instances de module peuvent être ajoutées aux modèles à l'aide de HubL. Lorsqu'il est défini dans un modèle, un module apparaît par défaut à cet emplacement dans le modèle. Si le module se trouve dans une zone modifiable, telle qu'une zone de glisser-déposer ou une colonne flexible, il peut être supprimé, déplacé et d'autres modules peuvent être ajoutés. Ce sont des instances de module.

Les définitions de module : les balises de module que vous pouvez ajouter aux modèles définissent l'état par défaut des instances de module.

Après la définition d'un module, si nécessaire, vous pouvez obtenir les valeurs de ses champs au niveau du modèle via content.widgets.

Syntaxe de base des modules

Les balises de module sont constituées des éléments suivants :

  • Un nom unique pour ce module : donne au module une identité unique dans le contexte du modèle.
  • 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.
  • Paramètres : les paramètres supplémentaires pour l'instance du module. Des valeurs par défaut au niveau du modèle sont incluses pour les champs du module.
Le chemin des modules par défaut HubSpot doit toujours commencer par @hubspot/ suivi du type de module. Consultez l'exemple ci-dessous et la page des modules par défaut pour plus d'informations. 
{% 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="/Marketplace/HubSpotSiteSetup/Vast_Site_Setup/Custom_Modules/Vast FAQ Module", label="Vast FAQ Module" %}

Les balises de module HubL sont délimitées par {% et nécessitent de spécifier le type de module ainsi qu'un nom unique. Le nom unique doit être entre guillemets après le type de module. Les noms de module doivent utiliser des tirets bas au lieu d'espaces ou de tirets.

Ce nom unique est utilisé pour associer le contenu saisi avec l'éditeur de page/d'e-mail à 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. 

Outre les deux composants obligatoires d'une balise de module, les modules HubL prennent en charge divers paramètres qui spécifient le comportement d'un module ainsi que son rendu. 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 liste JSON. Les paramètres de type chaîne doivent avoir leur valeur entre guillemets*, tandis que les paramètres de type booléen n'ont pas besoin de guillemets autour de leur valeur true ou false. Vous trouverez ci-dessous un exemple de module de texte de base avec un libellé et une valeur spécifiés.

* Les valeurs des paramètres de type chaîne peuvent être saisies entre guillemets simples ou doubles. Dans cet exemple, le nom du module unique est entre guillemets doubles et les valeurs des paramètres sont entre guillemets simples. Cette syntaxe est utile lorsque les valeurs des paramètres comprennent des balises HTML avec plusieurs attributs. Les valeurs des paramètres de type booléen sont en majuscules pour plus de lisibilité.

{% module "simple_section_title" path="@hubspot/text", label='Enter text for this section title', value='This is a section title' %}<span id="hs_cos_wrapper_simple_section_title" class="highlight hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text" > This is a section title </span>

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

Nous avons présenté dnd_area et toutes les balises HubL que vous utilisez avec. Il est désormais possible d'avoir un champ de module avec le même nom qu'un paramètre dnd existant.  Le gestionnaire de conception vous empêchera de créer de nouveaux champs qui utilisent l'un de ces noms de paramètre réservé, mais cela n'aide pas les anciens modules. Pour résoudre ce problème, nous avons ajouté un paramètre fields. Tout comme vous transmettez des données de champ pour un groupe, vous pouvez transmettre le nom du champ en tant que clé de l'objet de champ. 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 répétés

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 n'attend qu'une chaîne de caractères, un champ répétiteur d'image attend l'objet d'un 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éfinition de valeurs par défaut au niveau du modèle pour les groupes de champs répétés

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

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

Certains modules disposent de paramètres spéciaux, mais il existe aussi des paramètres pris en charge par tous les modules. Vous trouverez ci-dessous une liste des paramètres pris en charge par tous les modules.

Conversion des types de champ de module en paramètres
ParameterTypeDescription Default
label
String

Définit le titre interne du module dans l'éditeur de contenu. Ce paramètre peut également être utilisé pour donner des instructions supplémentaires aux utilisateurs.

overrideable
Boolean

Vérifie si le module peut être modifié ou non dans l'éditeur de contenu. Ce paramètre est l'équivalent de l'utilisation de la fonction de verrouillage du module dans l'interface utilisateur de l'outil de création de modèles.

True
no_wrapper
Boolean

En définissant no_wrapper=True, vous supprimez le balisage d'encadrement autour du contenu d'un module. La sortie du module sur la page est toujours encadrée dans un élément <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
String

L'ajout d'un paramètre de classes supplémentaires ajoutera ces classes à l'encadrement du contenu du 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
Boolean

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. Comment utiliser ce paramètre et la balise widget_data

False
unique_in_loop
Boolean

Ce paramètre peut être utilisé lorsqu'un module est défini dans une boucle pour ajouter le nom unique du module à l'index de la boucle. Si la valeur est définie sur true, cela permet d'imprimer une version différente de ce module à chaque itération de la boucle.

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

You can set the value of custom module fields using parameters.

{% module "faq" path="faq", label="Accessible FAQ Module", faq_group_title="Commonly Asked Questions" %}

Dans ce cas, faq_group_title ne fait pas partie des paramètres disponibles pour tous les modules. faq_group_title est spécifique à ce module personnalisé. Il s'agit du nom de variable pour un champ du module.

Certains champs sont simples et le paramètre attend simplement une chaîne de caractères, un nombre entier, un élément true/false. D'autres peuvent s'attendre à un objet. C'est à vous de fournir les valeurs dans le format correct, car il n'y a pas de validation des valeurs dans l'éditeur en fonction des paramètres que vous avez définis dans les paramètres de champ du module personnalisé. Exemple : Un module possède un champ numérique dont la valeur minimale est fixée à 1. Vous transmettez au paramètre la valeur 0. Il n'y a pas d'avertissement pour indiquer que votre valeur est non valide.

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

Lorsque vous créez des modèles avec des modules qui contiennent des champs de style, vous pouvez définir explicitement des valeurs par défaut pour les champs de style à l'aide du paramètre des styles.

Cela fonctionne comme les groupes normaux, 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="./to/module", styles={ "background_color":{ "color":"#123", "opacity":50 } } %}
Conversion des types de champ de module en paramètres
Champ Type Exemple Clés
Blog ID de blog 1234567890  
Booléen true/false false  
Choix Chaîne de valeur "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 de chaînes d'adresses e-mail
["develop@hubspot.com", "design@hubspot.com"]
 
Fichier Chaîne URL vers fichier
"https://cdn2.hubspot.net/hubfs/file.pdf"
 
E-mail de suivi ID d'e-mail de suivi
1234567890
 
Police Objet avec clés et valeurs de police
{
  "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 contenant les clés et les valeurs du formulaire
{
  "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 ID de tableau HubDB 123456789  
Icône Objet avec clés et valeurs d'icône
{ 
  "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 avec des clés et des valeurs d'image
{
  "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 de l'URL du lien de la réunion "https://app.hubspot.com/meetings/developers-r-kewl"  
Menu ID de menu 123456789  
Nombre Entier 1  
Page ID de page 1234567890  
Texte enrichi Chaîne, peut contenir du HTML "<h1>Hello, world!</h1>"  
Campagne Salesforce Chaîne de caractères, 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 ID de balise/slug (l'ID est recommandé) 1234567890  
Texte Chaîne "it's like any other string"  
URL Objet avec clés et valeurs d'URL
{ 
  "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é.