Boilerplate CMS HubSpot

Last updated:

Le boilerplate HubSpot CMS sert de point de départ pour aider les développeurs à concevoir et publier rapidement un site Web sur HubSpot CMS tout en illustrant les meilleures pratiques applicables en termes de développement sur la plateforme HubSpot CMS. Ce boilerplate est un projet GitHub open source. Chacun peut suggérer des modifications ou s'en servir pour son propre usage. Si vous n'avez jamais utilisé HubSpot CMS 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 HubSpot CMS.

Watch
Fork
Star

Pourquoi les développeurs devraient-ils utiliser le Boilerplate HubSpot CMS ?

Le Boilerplate HubSpot CMS est développé et activement maintenu par HubSpot. Lors de l'élaboration du boilerplate, nous avons incorporé les meilleures pratiques influencées par la manière dont les développeurs ont créé la meilleure expérience de création de sites Web, puis nous les avons appliquées à la création d'un site Web sur HubSpot CMS. Les développeurs disposent ainsi d'un site Web propre, performant et prêt à être modifié, ce qui leur fait gagner un temps considérable de développement. Le boilerplate fournit également une CSS complète pour les ressources associées à HubSpot, telles que les formulaires, les modules de menu, les classes de base, etc. Retrouvez une démonstration en direct du boilerplate sur https://boilerplate.hubspotcms.com/

Comment utiliser le Boilerplate HubSpot CMS ?

Pour commencer à utiliser le boilerplate dans votre environnement de développement local, suivez simplement notre guide « Développer des sites Web sur HubSpot CMS ».

Structure du Boilerplate HubSpot CMS

Les développeurs peuvent travailler avec le boilerplate à l'aide d'outils de développement locaux ou directement dans le Gestionnaire de conception. 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.

Structure des dossiers du Boilerplate du HubSpot CMS

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 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. Il s'agit souvent d'éléments qui se trouvent à 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="{{ 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 à nos partials globaux d'en-tête et de pied de page. Cela nous 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 notre éditeur de contenu global.

 

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. Sur 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. Comme JQuery 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 être cassées 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

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