Vue d'ensemble du système de modules
Il est essentiel de comprendre les modules pour pouvoir comprendre HubSpot CMS et sa puissance. Les modules sont des composants réutilisables qui peuvent être utilisés dans des modèles ou ajoutés à des pages via des zones de glisser-déposer et des colonnes flexibles. En plus d'utiliser les modules fournis par HubSpot, les développeurs peuvent créer leurs propres modules pour tout, des témoignages aux galeries de photos. Les modules sont créés à l'aide des outils de développement locaux ou en utilisant le Gestionnaire de conception.
Un module est composé de deux parties :
- Une interface utilisateur créée par une liste de champs que les utilisateurs verront lors de l'édition d'une instance de module.
- Un fragment de modèle HTML+HubL avec CSS et JS associés qui définissent comment le HTML sera généré
Pour mieux comprendre ce qu'est un module, examinons un module simple, « Membre de l'équipe ». Le module se compose d'une photo, du nom du membre de l'équipe, de son titre et d'une courte biographie. Il ressemble à une partie d'une page Web du CMS :
Le développeur construit l'interface utilisateur (IU) des modules en utilisant des champs. Le développeur choisit ensuite les champs à utiliser en fonction du type de module à construire, des données nécessaires et de l'expérience d'édition. Dans ce cas, le module comprend :
- un champ d'image, pour la photo d'un membre de l'équipe
- deux champs de texte, pour le nom et la fonction du membre de l'équipe
- Et un champ de texte enrichi, pour une courte biographie.
Lorsqu'un créateur de contenu modifie un module, l'interface utilisateur est construite sur la base des champs que le développeur a ajoutés au module et de la façon dont chaque champ est configuré.
Il existe deux termes fréquemment utilisés concernant les modules. Il est important de comprendre la différence entre les deux.
- Module - blocs de construction réutilisables qui peuvent être ajoutés aux modèles et aux pages.
- Instance de module - les modules individuels rendus sur la page. Ils peuvent avoir des valeurs de champ distinctes et, par conséquent, avoir un aspect différent des autres instances de module du même module.
Les champs d'un module sont définis en JSON comme un tableau d'objets. Chaque champ a un nom, un type et une valeur par défaut. D'autres propriétés sont également disponibles en fonction du type de champ qui contrôle l'expérience d'édition.
Pour en savoir plus sur tous les champs disponibles, voir Champs de module et de thème.
Les valeurs de chaque champ sont disponibles dans le fragment HTML+HubL d'un module via une variable module. Les données de chaque champ sont accessibles via les propriétés de la variable du module. En utilisant le module membre de l'équipe comme exemple, le nom du membre de l'équipe est accessible via {%{{ module.team_member_name }}endraw %}.
{{ module.team_member_name }}
\n{{ module.team_member_position }}
\nLes modules sont ajoutés aux modèles en utilisant la balise module, module_block ou dnd_module et en spécifiant le chemin d'accès au module comme paramètre. Les valeurs par défaut des champs d'un module peuvent également être remplacées au niveau du modèle en ajoutant des paramètres à la balise du module qui correspond au nom du champ, comme le montre la deuxième partie de l'exemple ci-dessous.
{% end_module_attribute %} {% end_module_block %}Les modules ne peuvent pas être imbriqués les uns dans les autres. La plupart du temps, lorsque vous voulez le faire c\'est pour des raisons de mise en page. Les sections dans les zones de glisser-déposer sont souvent la meilleure solution.
', module_id=27668707043, label='Article Alert' %} {% end_module_block %}Les modules sont utilisés sur tout un site Web, parfois sur plusieurs pages, voire de nombreuses fois sur une page. C'est pourquoi l'élaboration du HTML, de la CSS et du JS de votre module en tenant compte de l'accessibilité peut avoir un grand impact sur l'utilisation de votre site par les personnes handicapées ou non.
{% end_module_attribute %} {% end_module_block %}De la même manière que pour l'accessibilité, élaborer des modules afin que tout le contenu du module soit basé sur des champs permet de le localiser ultérieurement. Par exemple, vous pouvez avoir un module « Articles à la une ». Au lieu de coder en dur le texte « Articles à la une », utilisez un champ de texte ou de texte enrichi. Le texte peut ensuite être modifié dans d'autres langues. Pour en savoir plus sur la localisation sur le CMS, allez à multi-langue.
{% end_module_attribute %} {% end_module_block %}Pour commencer, consultez notre tutoriel Démarrer avec les modules.
{% end_module_attribute %} {% end_module_block %}Merci d'avoir partagé votre avis.