Contenu global

Last updated:

Le contenu global est un contenu qui est partagé entre plusieurs rubriques d'un site Web. Les exemples courants sont les en-têtes, les pieds de page et les barres latérales de sites web. En tant que développeur, vous spécifierez quels composants doivent être globaux en utilisant des partials globaux ou en rendant les modules globaux. HubSpot propose une expérience d'édition différente pour les éditeurs de contenu qui leur permet de modifier facilement le contenu global et de prévisualiser les modifications sur les pages avant de les publier. Pour en savoir plus sur la modification de votre contenu global, veuillez consulter l'article Utiliser du contenu global dans plusieurs modèles de la base de connaissances HubSpot.

Éditeur de contenu global

Vue d'ensemble

Le contenu global est idéal pour afficher les mêmes informations sur plusieurs pages. Par exemple, l'en-tête et le pied de page de votre site web, tout comme l'en-tête en haut de cette page.

hubspot-developers-header

Vous trouverez ci-dessous d'autres exemples de domaines dans lesquels vous pouvez utiliser le contenu global :

  • Navigation secondaire dans les différentes rubriques de votre site Web
  • Pieds de page (ou sous-pieds) avec les droits d'auteurs
  • Barres latérales des articles de blog (pour afficher les articles récents, une liste des auteurs, etc.)

Le contenu global étant utilisé à de multiples endroits sur un site Web, il est d'autant plus important de concevoir et d'élaborer vos partials et modules globaux dans un souci d'accessibilité.

Partials globaux vs Modules globaux

En tant que développeur, vous pouvez créer des partials globaux et des modules globaux, avec quelques différences clés entre les deux :

  • Les partials globaux sont un type de modèle créé à l'aide de HTML et HubL qui peut être réutilisé sur l'ensemble de votre site web. Les types de partials les plus courants sont les en-têtes de sites Web, les barres latérales et les pieds de page.
  • Les modules globaux sont des modules composés d'un ou plusieurs éléments de contenu qui peuvent être utilisés sur plusieurs pages de votre site. Parmi les types courants de modules globaux figurent des éléments tels que les formulaires d'inscription au blog, les éléments de navigation secondaire et les appels à l'action.
Veuillez éviter d'inclure des modules globaux dans les partials globaux, car cela peut créer une expérience d'édition de contenu négative.

Tous les modules et champs de vos partials et modules globaux sont facilement modifiables dans l'éditeur de contenu global.

Partials globaux

Créer un partial global

Un partial global est un type de modèle que vous pouvez créer localement via l'ILC de HubSpot à l'aide de la commande create, comme indiqué ci-dessous.

hs create template <partial-file-name>

Lorsque vous êtes invité à choisir un type de modèle, sélectionnez global partial.

Cela créera votre modèle dans le répertoire souhaité avec les annotations de modèle suivantes incluses dans le fichier HTML.

<!-- templateType: global_partial label: Page Header -->

Pour voir un exemple de partial de contenu global, veuillez consulter notre modèle sur GitHub.

Ajouter des zones de glisser-déposer à des partials globaux

Vous pouvez activer les fonctionnalités de glisser-déposer de contenu dans vos partials globaux en ajoutant des balises dnd_area, de la même manière que vous les activez dans les modèles de page. Pour plus d'informations, consultez notre documentation sur la zone de glisser-déposer. 

Inclure un partial global dans votre modèle existant

Pour ajouter votre partial global dans un de vos modèles existants, utilisez la balise HubL global_partial en référençant le chemin vers votre partial. Vous trouverez ci-dessous un exemple tiré du boilerplate du CMS utilisant cette balise.

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

Lorsque des partials globaux sont générés, ils contiennent un cadre <div> autour du partial global. Cet élément est utilisé par l'éditeur de page pour identifier que le contenu est un partial global.

<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html"> <!-- Your header.html code is output here --> </div>

Remarque : N'utilisez pas global_partial dans le <head> d'un modèle. Cela déboucherait sur un HTML non valide.

Dans la plupart des situations où vous souhaitez utiliser un partial global dans l'en-tête, il peut être plus judicieux d'utiliser un module global à la place, avec un {%require_head%} pour insérer du code personnalisé dans l'en-tête, tout en fournissant des champs de module.

Modules globaux

Vous pouvez créer des modules globaux comme tout autre module via l'ILC en exécutant la commande hs create, comme indiqué ci-dessous.

hs create module <module_name>

Un module global est différencié par l'indicateur global dans le fichier meta.json du module.

// meta.json file { "css_assets": [], "external_js": [], "global": true, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

Vous pouvez également créer des modules globaux dans HubSpot à l'aide du gestionnaire de conception.

Pour en savoir plus sur l'utilisation des modules, consultez les ressources connexes suivantes :

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