Dernière modification : 28 août 2025

​
Structure du Boilerplate du CMS Hub

Structure des dossiers du Boilerplate du CMS Hub
La structure sous-jacente du boilerplate du CMS Hub s’articule autour d’une mise en page de base commune, située dans le dossier modèles > mises en page, qui est ensuite étendue avec la balise {% extends %} et en faisant référence au bloc {% block body %} pour son contenu principal. Un exemple de l’utilisation de la balise extend et des blocs peut être visualisé dans n’importe quel fichier HTML du répertoire des modèles. Découvrez-en davantage sur les blocs et les extensions. Il s’agit d’une méthode courante de développement sur les systèmes CMS où vous disposez d’un modèle de base (parfois appelé modèle principal/parent) qui contient tous les principaux éléments structurels communs du contenu de votre site. Ces éléments de contenu se trouvent habituellement à l’intérieur de l’élément <head> sur votre site, comme les méta-propriétés communes (ex. : Title et Meta Description), les liens Favicon, les liens CSS et les scripts tiers. 
<!doctype html>
<html lang="{{ html_lang }}" {{ html_lang_dir }}>
 <head>
   <meta charset="utf-8">
   <title>{{ page_meta.html_title }}</title>
   {% if site_settings.favicon_src %}<link rel="shortcut icon" href="https://developers.hubspot.fr/docs{{ site_settings.favicon_src }}" />{% endif %}
   <meta name="description" content="{{ page_meta.meta_description }}">
   {{ require_css(get_asset_url("../../css/layout.css")) }}
   {{ require_css(get_asset_url("../../css/main.css")) }}
   {{ require_css("https://fonts.googleapis.com/css?family=Merriweather:400,700|Lato:400,700&display=swap") }}
   {{ require_js(get_asset_url("../../js/main.js")) }}
   {{ standard_header_includes }}
 </head>
 <body>
   <div class="body-wrapper {{ builtin_body_classes }}">
     {% block header %}
       {% global_partial path="../partials/header.html" %}
     {% endblock header %}

     {% block body %}
       <!-- Nothing to see here -->
     {% endblock body %}

     {% global_partial path="../partials/footer.html" %}
   </div>
   {{ standard_footer_includes }}
 </body>
</html>
À l’intérieur de cette mise en page de base, il y a également des appels aux partials globaux d’en-tête et de pied de page. Cela permet de conserver le code de ces partials dans des fichiers distincts pour des raisons de modularité et, comme il s’agit de partials globaux, ils peuvent être facilement modifiés par vos créateurs de contenu à l’aide de l’éditeur de contenu global de HubSpot. Pour en savoir plus sur les ressources incluses dans le modèle, consultez le wiki du boilerplate sur GitHub.

​
jQuery

Le boilerplate du thème HubSpot n’a pas besoin de jQuery pour pouvoir fonctionner. Pour les anciens comptes HubSpot, jQuery est chargé par défaut. Sur les comptes HubSpot les plus récents, jQuery est désactivé par défaut. Historiquement, les scripts HubSpot avaient besoin de jQuery pour pouvoir fonctionner correctement. Le paramètre de domaine était donc là pour assurer la compatibilité. Les scripts HubSpot n’utilisent plus jQuery, car il n’est pas nécessaire et qu’il existe de meilleures façons pour les développeurs d’inclure des bibliothèques qui fonctionnent également avec le contrôle de la source. Il est conseillé de désactiver les paramètres jQuery pour les nouveaux sites web. Faites attention si vous désactivez jQuery sur un domaine qui a un site web existant : toutes les pages de destination ou les pages web existantes que vous pouvez avoir pourraient ne plus fonctionner si elles sont liées à jQuery. Si vous souhaitez utiliser jQuery sur votre nouveau site web, il est recommandé d’utiliser la dernière version de jQuery. Il y a deux façons simples de le faire :
  • Téléchargez la dernière version de jQuery dans le système de fichiers de votre développeur et utilisez la commande require_js pour le charger où et quand vous en avez besoin.
  • Utilisez un réseau de diffusion de contenu de confiance et require_js pour charger jQuery où et quand vous en avez besoin.

​
Ressources associées