> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Le boilerplate du CMS hub de HubSpot
> Le boilerplate du CMS hub de HubSpot illustre les meilleures pratiques et aide les développeurs à créer rapidement un site web sur le CMS Hub.
[Le boilerplate du CMS hub de HubSpot sert](https://github.com/HubSpot/cms-theme-boilerplate) de point de départ pour la mise en place et le fonctionnement d'un site web sur le CMS Hub, tout en illustrant certaines bonnes pratiques en la matière. Le boilerplate est développé et activement maintenu par HubSpot, mais il s'agit également d'un projet GitHub open source où chacun peut suggérer des modifications ou s'en inspirer pour son propre usage. Si vous n'avez jamais utilisé le CMS Hub et que vous souhaitez démarrer un nouveau projet sur la base du boilerplate, suivez le [guide de démarrage rapide du développement sur le CMS Hub](/docs/cms/start-building/introduction/classic-hubl-quickstart).
[Visionnez une démo en direct du boilerplate](https://boilerplate.hubspotcms.com/).
Vous pouvez travailler avec le boilerplate à l'aide d'[outils de développement locaux](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) ou directement dans le [Gestionnaire de conception.](https://knowledge.hubspot.com/cos-general/get-started-with-the-design-manager) Ce boilerplate utilise des références de chemin d'accès relatives pour toutes les ressources, ce qui permet de l'adapter facilement à votre projet, quel qu'il soit. Cela permet également de rendre le boilerplate complètement transférable entre les comptes de la plateforme HubSpot. Vous trouverez ci-dessous une capture d'écran de la structure du dossier des ressources du boilerplate. Le boilerplate répartit ses ressources dans plusieurs répertoires pour les retrouver facilement.
La structure sous-jacente du boilerplate du CMS Hub s'articule autour d'une [mise en page de base commune](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html), 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.](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) Découvrez-en davantage sur les [blocs et les extensions](/docs/cms/reference/hubl/overview#blocks-and-extends).
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 `` 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.
```hubl theme={null}
{{ page_meta.html_title }}
{% if site_settings.favicon_src %}{% endif %}
{{ 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 }}
{{ standard_footer_includes }}
```
À 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](/docs/cms/start-building/building-blocks/global-content) de HubSpot.
Pour en savoir plus sur les ressources incluses dans le modèle, [consultez le wiki du boilerplate sur GitHub](https://github.com/HubSpot/cms-theme-boilerplate/wiki).
## 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`](/docs/cms/reference/hubl/functions#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`](/docs/cms/reference/hubl/functions#require-js) pour charger jQuery où et quand vous en avez besoin.
## Ressources associées
* [Premiers pas avec les thèmes](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Comment optimiser les performances de votre site CMS Hub](/docs/cms/best-practices/testing-staging-performance/speed)
* [Premiers pas avec l'accessibilité](/docs/cms/best-practices/improve-existing-sites/accessibility)
La structure sous-jacente du boilerplate du CMS Hub s'articule autour d'une [mise en page de base commune](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html), 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.](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) Découvrez-en davantage sur les [blocs et les extensions](/docs/cms/reference/hubl/overview#blocks-and-extends).
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 `` 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.
```hubl theme={null}