Modèles HTML et HubL

Last updated:

Les modèles HTML et HubL peuvent être utilisés pour chaque type de modèle sur HubSpot CMS. Ces modèles sont des fichiers .html qui prennent en charge le langage de modélisation HubL. Comme ces modèles codés prennent en charge HubL, la meilleure expérience de prévisualisation consiste à utiliser l'aperçu du modèle dans le gestionnaire de conception ou à visualiser les pages sur un compte sandbox. Les modèles HTML et HubL peuvent contenir des Partials, qui peuvent être utilisés pour séparer des morceaux de code couramment utilisés, tels qu'un en-tête ou un pied de page.

Les modèles HTML et HubL donnent un plus grand contrôle aux développeurs que les modèles de type glisser-déposer du gestionnaire de conception visuelle. À leur tour, les développeurs peuvent offrir de meilleures expériences aux créateurs de contenu grâce à la fonctionnalité de glisser-déposer - ce qui n'est possible qu'avec les modèles HTML et HubL.

image1-2

L'exemple de la capture d'écran provient du fichier base.html de notre cms-theme-boilerplate. Le boilerplate est conçu pour servir de point de départ aux développeurs qui créent un site web de qualité sur le logiciel HubSpot CMS. Le boilerplate représente les meilleures pratiques personnalisées de HubSpot, et nous avons l'intention d'apprendre de vos commentaires et de projets similaires. Nous espérons qu'il vous inspirera et vous aidera à accélérer vos projets de sites web.

Familiarité et Outils

Les modèles HTML et HubL étant des fichiers codés, les outils dont disposent déjà les développeurs peuvent être utilisés pour les modifier localement. La meilleure expérience de développement local consiste à utiliser nos outils de développement local. Grâce à eux, vous pouvez 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.

Pour les développeurs familiarisés avec d'autres langages de modélisations, étant donné que ces modèles tournent autour du HTML et d'un peu de HubL si nécessaire, il est facile de voir les similitudes avec d'autres langages de modélisation que vous avez peut-être déjà utilisés. Cela facilite la transition à partir d'autres plateformes. 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 voulez charger des fichiers CSS, au lieu d'utiliser <link rel="stylesheet" type="text/css" href="theme.css"> pour les feuilles de style, nous encourageons l'utilisation d'exigences au niveau du modèle, en gardant les CSS spécifiques au module dans le module ainsi que les fichiers meta.json dans les modules pour indiquer les feuilles de style qui peuvent être partagées entre les modules.

L'avantage de cette approche est que vous transférez le travail de chargement conditionnel de cette CSS de vous et de vos outils de développement vers HubSpot. HubSpot CMS sait si un créateur de contenu ajoute une instance d'un module à une page et, à ce titre, peut charger de manière conditionnelle la CSS requise. En réduisant la CSS chargée au strict nécessaire, le chargement est plus rapide. HubSpot CMS prend également ces CSS et améliore les performances en traitant la minification et la combinaison des fichiers, le cas échéant, et en les diffusant automatiquement via un CDN, sans aucun effort de votre part.

Pour faciliter le développement sur HubSpot, il existe des outils créés par la communauté et par HubSpot qui valent la peine d'être examinés. Étant donné que HubL est basé sur Jinja et suit en grande partie la même syntaxe, vous pouvez généralement utiliser un plug-in de langage dans votre éditeur local pour jinjava afin d'obtenir une meilleure mise en valeur syntaxique des fichiers HTML et HubL.

Annotations de modèles

Les annotations de modèles constituent un moyen de développement convivial local pour indiquer à HubSpot les paramètres importants des modèles.  Comme l'annotation fait partie du code, vous pouvez la modifier ultérieurement pour changer le templateType.

<!--   templateType: page   isAvailableForNewContent: false   enableDomainStylesheets: false   label: Homepage screenshotPath: ../images/template-previews/home.png --> <!doctype html> <html> ...

Ces paramètres de modèle déterminent comment et si les modèles apparaissent aux créateurs de contenu et s'ils utilisent des feuilles de style à l'échelle du domaine.

Annotations de modèles
AnnotationDescriptionValeurs possibles
templateType
Specifies which template type a file is.
isAvailableForNewContent
Specifies if a template is available for selection in the content creation process.

true, false

enableDomainStylesheets
Specifies if the template should load stylesheets defined under settings > website > pages

true, false

Label
User friendly description of the template, displayed in the template selection screen

Page À propos, Page d'accueil, Tarifs, Toute chaîne personnalisée

screenshotPath
String

Indique une capture d'écran à utiliser lorsqu'un créateur de contenu choisit un modèle. Cette capture d'écran devrait permettre de différencier facilement vos modèles.

En-tête et pied de page inclus

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.

Partials

Les partials de modèles sont des fichiers HTML et HubL qui peuvent être inclus dans d'autres fichiers codés. Les développeurs peuvent ainsi adopter une approche plus modulaire pour créer des documents complexes et partager le balisage entre plusieurs modèles. Les exemples les plus courants sont les en-têtes, les pieds de page, les barres latérales, etc., et sont souvent les mêmes, de sorte que l'utilisation de partials pour gérer ce contenu soit une expérience facile. Pour créer un fichier HTML qui ne nécessite pas les variables de modèle standard obligatoires, vous devez inclure l'annotation isAvailableForNewContent: false en haut du fichier.

Partials standards

Un type de partial de modèle peut être utilisé sur plusieurs modèles avec du contenu qui peut être modifié sur des pages individuelles. templateType: page, et isAvailableForNewContent: false

{% include "../partial/sidebar.html" %}

Vous pouvez également compiler plusieurs fichiers CSS en un seul fichier CSS à l'aide de la balise d'inclusion. Lorsque vous publiez le fichier parent, le fichier inclus est compilé en un seul fichier minifié contenant les CSS du parent et de l'enfant. Cette technique est utilisée dans le CSS de cms-theme-boilerplate au bas du fichier pour combiner plusieurs fichiers CSS en 1 seul fichier.

Partials globaux

Un type de partial de modèle qui peut être utilisé dans plusieurs modèles avec un contenu qui est édité globalement. Les partials globaux sont destinés à être utilisés avec ceux utilisant l'annotation templateType: global_partial et sont souvent utilisés pour les en-têtes et les pieds de page. Cette technique est utilisée dans le cms-theme-boilerplate pour les partials header et footer. Ces partials sont ensuite appelés dans base.html à l'aide de la balise global_partial. Les partials globaux sont une forme de contenu global.

{% global_partial path="../partials/header.html" %}

Blocs et extensions

Lors de la création de modèles complexes, vous pouvez créer des blocs compartimentés qui étendent un modèle parent. Cette technique ne convient pas à tout le monde, mais peut être utile pour rester organisé lors du codage de modèles complexes.

Dans un cas d'utilisation, 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ù le corps du texte est un nom unique :

{% block body %} <!-- Default content if template isAvailableForNewContent and chosen as a page template --> {% endblock body %}
{% extends "./layouts/base.html" %} {% block body %} <h3>Page Content</h3> <ul> <li>Bullet 1<li> <li>Bullet 2<li> <li>Bullet 3<li> </ul> {% endblock %}

Cette méthode est utilisée dans le cms-theme-boilerplate, dans base.html. Qui est étendu par modèles dans le dossier des modèles.

Groupes globaux

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 :

{% include "/path/to/global_header.template.json" %}

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