Modèles HTML et HubL

Étant donné que les modèles HTML et HubL sont des fichiers codés, vous pouvez utiliser vos outils préférés pour les modifier localement. Il est recommandé d'utiliser les outils de développement local de HubSpot afin que vous puissiez charger, récupérer, consulter, créer ou gérer de manière sécurisée des fichiers dans le système de fichiers du développeur ainsi que dans le gestionnaire de fichiers.

La création de modèles HTML et HubL avec HubSpot est similaire à l'utilisation d'un autre langage de modélisation que vous avez peut-être utilisé auparavant. La principale différence réside dans le fait que HubSpot adopte une position bien arrêtée sur les meilleures façons de faire certaines choses afin d'offrir la meilleure expérience possible aux créateurs de contenu et de décharger le développeur d'une grande partie du travail de maintenance et d'optimisation des performances. 

Par exemple, si vous souhaitez charger un fichier CSS sur une page pour certains modules, au lieu d'utiliser<link rel="stylesheet" type="text/css" href="theme.css">, vous devez inclure la feuille de style via css_assets dans le fichier meta.json du module. Cela permet à HubSpot de charger de façon conditionnelle la CSS uniquement lorsque le module est présent sur une page, minimisant ainsi la quantité de CSS inutiles chargées.

Découvrez-en davantage sur l'optimisation de votre workflow de développement HubSpot.

Les annotations de modèles, incluses en haut d'un modèle, configurent des paramètres de modèle importants, tels que le type de modèle et s'il peut être utilisé pour créer un nouveau contenu. Les annotations de modèles peuvent être modifiées à tout moment au cours du processus de développement. Découvrez-en davantage sur les annotations de modèles disponibles ci-dessous.

Les modèles de HubSpot exigent la présence de deux balises, sauf si le fichier est un partial de modèle. Les deux balises sont :

• {{ standard_header_includes }} - Utilisée pour ajouter intelligemment la CSS requise combinée et minifiée. 
• {{ standard_footer_includes }} - Utilisée pour ajouter intelligemment du JavaScript au bas d'une page de façon dynamique, pour le script de suivi HubSpot et les modules par exemple.

Ces balises doivent être présentes dans un modèle ou ses enfants partials pour être publiés et utilisés.

Les partials de modèles sont des fichiers HTML et HubL qui peuvent être inclus dans d'autres fichiers codés. Les partials vous permettent d'adopter une approche plus modulaire en partageant le même balisage pour plusieurs modèles. Par exemple, un en-tête peut être rendu en tant que partial afin que vous puissiez facilement l'inclure comme composant sans avoir à le coder à nouveau.

Un partial standard est un modèle ou un composant réutilisable contenant du contenu qui peut être modifié sur des pages individuelles. Cela permet aux créateurs de contenu de modifier le contenu au besoin, par opposition aux partials globaux qui partagent toujours le même contenu. Par exemple, le code suivant extrairait le module de barre latérale dans un autre fichier de modèle.

Les partials standards doivent inclure les annotations suivantes en haut du fichier de modèle :

• templateType: page
• isAvailableForNewContent: false

Un partial global est un type de contenu global qui peut être utilisé sur plusieurs modèles avec du contenu qui est partagé sur toutes les instances du partial. Les partials globaux sont souvent utilisés pour les en-têtes et les pieds de page, dont vous pouvez voir un exemple dans l'en-tête et le pied de page du boilerplate de CMS Hub. Ces partials sont ensuite appelés dans base.html à l'aide de la balise global_partial.

Les partials globaux doivent inclure l'annotation templateType: global_partial en haut du fichier.

Lors de la création de modèles complexes, vous pouvez créer des blocs compartimentés qui étendent un modèle parent.

Par exemple, vous pouvez créer un modèle parent qui inclut les variables obligatoires suivantes standard_header_includes et standard_footer_includes. Dans ce modèle, vous définissez un bloc unique en utilisant la syntaxe suivante où body est un nom unique :

Ensuite, dans le modèle enfant, vous pouvez étendre le modèle parent, puis insérer plus de contenu dans le bloc body.

Cette méthode est utilisée dans le modèle base.html du boilerplate de CMS Hub, qui est ensuite étendu par les autres modèles dans le dossier de modèles.

Les groupes globaux créés à l'aide du générateur de modèles par glisser-déposer dans le gestionnaire de conception peuvent également être inclus. La syntaxe est affichée ci-dessous :