Contenu global

Last updated:

Le contenu global est un contenu qui est partagé entre plusieurs rubriques d'un site Web. Les exemples les plus courants sont les en-têtes de sites Web, les pieds de page, les barres latérales, les logos ou d'autres éléments. Les développeurs déterminent quels éléments doivent être globaux en utilisant des partials globaux ou en rendant les modules globaux. Lors de la modification d'un élément global, les éditeurs de contenu bénéficient d'une expérience d'édition différente 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 comment modifier votre contenu global, veuillez consulter notre article de base de connaissances sur la façon d'utiliser le contenu global dans plusieurs modèles.

Éditeur de contenu global

Quand et où utiliser le contenu global ?

Le contenu global est utilisé de préférence dans les zones d'un site Web où des informations cohérentes seront affichées sur plusieurs pages. L'en-tête et le pied de page de votre site Web en sont de bons exemples. Un autre exemple de contenu global se trouve en haut de cette page. L'en-tête du site des développeurs utilise le contenu global pour créer l'en-tête supérieur que vous pouvez voir illustré ci-dessous.

En-tête global du site des développeurs HubSpot

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

Les Partials globaux sont des morceaux de contenu HTML et HubL qui peuvent être réutilisés 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.

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

Créer un modèle de partial de contenu global à l'aide d'outils de développement locaux

Vous pouvez créer un nouveau modèle de partial global en utilisant la commande create et en utilisant global-partial en tant que modèle type, comme illustré ci-dessous.

hs create template <partial-file-name>

Il vous sera demandé de choisir un type de modèle. Choisissez « partial global ».

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.

Ajout de zones de glisser-déposer aux partials de contenu global

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 votre partial de contenu 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é de notre boilerplate 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>

N'utilisez pas global_partial dans le <head> d'un modèle. Cela entraînerait un HTML non valide et pourrait provoquer des effets secondaires.

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.

Création d'un module global

Les modules globaux peuvent être créés comme tout autre module à l'aide de vos outils CLI. La principale différence entre la signification d'un module comme module global et standard est l'indicateur global dans le fichier meta.json des modules (voir ligne 5 dans les exemples de code ci-dessous).

Module global

// 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 }

Module non global

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

La création d'un module à l'aide de la commande hs create module <name> <dest> et la définition de cet indicateur sur « true » dans le fichier meta.json permettront au système de savoir que le module est un module global. Pour commencer à utiliser les modules, rendez-vous sur notre page Vue d'ensemble des modules. Vous pouvez également créer des modules globaux par le biais du Gestionnaire de conception. Pour en savoir plus sur la création de modules (globaux et personnalisés), veuillez consulter notre article de la base de connaissances sur la création et la modification de modules.


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