Présentation de la syntaxe HubL
HubSpot CMS utilise le langage de balisage HubSpot, appelé HubL (prononcer « Hubble »). HubL est l'extension de HubSpot de Jinjava, un moteur de modèles basé sur Jinja. HubL utilise une quantité considérable de balisages propres à HubSpot et ne prend pas en charge toutes les fonctionnalités de Jinja.
Cet article vous permettra de découvrir les bases des fonctionnalités et de la syntaxe de HubL.
Comme d'autres langages de création de modèles couramment utilisés, tels que PHP, HubL peut être intégré à votre HTML dans des fichiers de modèles codés ou des modules de modèles HubL. Afin de différencier le début et la fin de votre HubL, vous devez apprendre quelques symboles clés qui servent de séparateurs.
Les déclarations HubL sont utilisées pour créer des modules éditables, définir une logique de modèle conditionnel, mettre en place des boucles, définir des variables, etc. Les déclarations sont délimitées par {%. Ils n'impriment rien sur la page.
Les expressions impriment les valeurs stockées dans le contexte du modèle. Les expressions sont délimitées par {{. Par exemple, une variable doit être définie en tant qu'instruction, mais une expression HubL serait ensuite utilisée pour imprimer la variable.
Le dernier type de séparateur que vous pouvez rencontrer ou décider d'employer en développant avec HubL, est un commentaire HubL. Les commentaires sont définis par {#.
Les modules sont des zones dynamiques d'un modèle qui peuvent être personnalisées par l'utilisateur final dans l'éditeur de contenu. Par exemple, si vous codiez un fichier de modèle à partir de zéro, vous ajouteriez des modules aux modèles avec des balises HubL, pour donner à vos créateurs de contenu la possibilité de modifier des zones de la page.
Les balises de module sont constituées des éléments suivants :
- Type de module : spécifie le module à rendre. Veuillez vous référer à la page balise de prise en charge HubL pour une liste des différents types de modules disponibles.
- 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. Le chemin des modules par défaut de HubSpot doit toujours commencer par @hubspot/ suivi du type de module. Pour en savoir plus, consultez l'exemple ci-dessous et la page utiliser des modules dans les modèles .
- Paramètres : spécifiez éventuellement des informations supplémentaires sur le module.
L'exemple ci-dessus est un module de texte dont les paramètres de libellé et valeur sont définis. Le libellé définit le texte d'aide dans l'éditeur et la valeur définit le texte par défaut pour ce module. Voir l'exemple de GIF ci-dessous pour voir comment cela se présente dans l'éditeur.
HubL comprend de nombreuses applications variables HubSpot prédéfinies qui impriment leurs valeurs utiles à partir de l'application. En outre, vous pouvez définir vos propres variables dans un modèle. Dans l'exemple suivant, une variable nommée primaryColor est définie dans une instruction, puis imprimée avec une expression HubL. Cet exemple associe la variable HubL à une CSS
Les macros HubL vous permettent d'imprimer plusieurs déclarations avec une valeur dynamique. Cette technique s'avère utile lorsque vous vous retrouvez à écrire les mêmes blocs de code de base à plusieurs reprises, mais que vous devez seulement modifier certaines valeurs. Dans l'exemple suivant, une macro est utilisée pour imprimer une propriété de transition CSS3 qui comprend tous les préfixes des fournisseurs. Vous pouvez en savoir plus sur les macros, ici.
Des filtres peuvent être ajoutés à votre HubL pour transformer ou modifier la valeur d'une variable de modèle. Un exemple simple affiché ci-dessous consiste à formater une variable de date. Les filtres utilisent un | (symbole pipeline) et sont appliqués sans espace à une variable.
Dans l'exemple ci-dessous, supposons qu'un article de blog ait été publié le 29 avril. La date de publication de l'article est formatée avec un filtre datetimeformat. Vous pouvez consulter la liste complète des filtres ici.
Alors que les filtres affectent le rendu des variables, les fonctions traitent les informations relatives aux valeurs et aux comptes et rendent ces informations. Par exemple, une fonction peut être utilisée pour obtenir le nombre total d'articles pour un blog particulier ou pour éclaircir/assombrir une variable de couleur d'une valeur particulière.
L'exemple imprimerait le nombre total d'articles de blog du site designers.hubspot.com/blog. Il utilise un paramètre ID de blog (disponible dans l'URL du tableau de bord du blog) pour spécifier le blog à cibler. Vous pouvez consulter la liste complète des fonctions ici.
Les fonctions SI vous permettent d'utiliser la logique conditionnelle pour dicter la manière dont votre modèle rendra la logique conditionnelle dans les instructions HubL pour if, elif, else et endif. Une fonction SI doit commencer par un if et se terminer par un endif
L'exemple ci-dessous définit un module de choix qui permet à l'utilisateur final de sélectionner un service dans une liste déroulante. En fonction de ce que l'utilisateur sélectionne dans l'éditeur, le modèle génère un titre dynamique pour une page de recrutements. Cet exemple nécessite l'utilisation du paramètre export_to_template_context.
Les boucles for vous permettent d'itérer sur des éléments stockés dans une séquence. Elles seront le plus souvent utilisées pour rendre le contenu d'un blog dans un format de listing. Les boucles for commencent par une instruction for et se terminent par une instruction endfor.
Dans l'exemple ci-dessous, un tableau de types d'ours est stocké dans une variable appelée bears. Une boucle for est ensuite utilisée pour parcourir les différents types d'ours en imprimant un élément de liste pour chaque type.
Vous trouverez ci-dessous quelques autres fonctions de modélisation diverses qui peuvent vous être utiles lorsque vous développez avec HubL.
De nombreuses autres langues partagent les mêmes délimiteurs que HubL, ce qui peut créer des problèmes lorsque l'on travaille dans des fichiers codés sur le CMS. Si vous souhaitez utiliser un séparateur HubL pour une autre langue, vous devez encadrer ce code :
Vous pouvez inclure plusieurs fichiers .html dans un modèle HubL à l'aide de la balise d'inclusion. Pour créer un fichier HTML qui ne nécessite pas les variables du modèle standard, vous devez décocher l'option « Rendre le modèle disponible pour le nouveau contenu » La syntaxe est affichée ci-dessous :
Vous pouvez également compiler plusieurs fichiers CSS en un seul fichier CSS avec la même balise d'inclusion. Lorsque vous publiez le fichier parent, le fichier enfant sera compilé en un seul fichier CSS minifié avec le code du parent.
Lorsque vous créez des modèles complexes, vous pouvez utiliser des blocs compartimentés qui étendent un modèle parent.
Tout d'abord, vous allez créer un modèle principal qui comprend les variables suivantes standard_header_includes et standard_footer_includes. Dans ce modèle, vous devez définir un bloc unique en utilisant la syntaxe suivante où my_sidebar est un nom unique :
Ensuite, vous pouvez créer un fichier HTML enfant qui remplira ce bloc. Tout d'abord, vous devez déclarer une instruction extends qui fait référence au chemin d'accès au parent. Ce bloc de code serait rendu dans le modèle parent, mais maintenu dans un autre fichier plus petit et plus facile à gérer. Cette technique ne convient pas à tout le monde, mais elle peut être utile pour rester organisée lors du codage de modèles d'e-mails ou de modèles de pages. Lorsque vous utilisez cette technique, vous devez choisir le modèle enfant, lors de la création du contenu.
Dans l'éditeur de page, vous pouvez copier le balisage HubL d'une section par glisser-déposer afin de réutiliser le code si nécessaire. Cela peut être utile lorsqu'on veut recréer une section de glisser-déposer dans un fichier codé.
Découvrez-en davantage sur la copie de section HubL.
Merci d'avoir partagé votre avis.