Premiers pas avec les thèmes

Un thème est un ensemble portable et contenu de ressources de développement conçues pour fonctionner ensemble afin d'offrir une expérience flexible en matière de modification de contenu. Ces ressources peuvent comprendre des modèles, des modules, des fichiers CSS, des fichiers JavaScript, des images, etc. Les thèmes permettent aux développeurs de créer un ensemble de champs de thème, à l'image des champs de module, ce qui permet aux créateurs de contenu de contrôler les styles globaux du site web sans avoir à modifier les CSS.

Vous pouvez utiliser HubL pour accéder aux valeurs des champs du thème dans la CSS du thème. Les créateurs de contenu peuvent alors utiliser l'éditeur de thème pour modifier les champs du thème, prévisualiser ces modifications par rapport aux modèles existants dans un thème et publier leurs modifications.

Ce document vous guide dans la création de votre premier thème basé sur le boilerplate de CMS Hub. Pour en savoir plus sur les thèmes, consultez la documentation de référence relative aux thèmes.

Exécutez hs create website-theme my-website-theme pour créer un répertoire my-website-theme composé de fichiers provenant duboilerplate de thème CMS.

Exécutez hs upload my-website-theme my-website-theme. Le modèle sera téléchargé dans le gestionnaire de conception de votre compte, dans un dossier intitulé my-website-theme.

Pour créer une page à partir du thème téléchargé :

• Dans votre compte HubSpot, accédez à Marketing > Site web > Pages de site web.
• Cliquez sur Créer dans l'angle supérieur droit, puis sélectionnez Page de site web. 
• Dans la boîte de dialogue, sélectionnez le domaine sur lequel la page sera publiée, puis saisissez un nom de page. Cliquez ensuite sur Créer une page.

• Sur l'écran de sélection des modèles, les modèles de votre thème actif apparaissent en haut de la page.
  • Si vous n'avez pas sélectionné de thème actif, passez la souris sur le boilerplate du thème CMS et cliquez sur Définir comme thème actif. 
  • Si vous avez déjà défini un thème actif, sélectionnez votre nouveau thème en cliquant sur le menu déroulant du sélecteur de thème, puis en sélectionnant Modifier le thème. Ensuite, passez le curseur sur Boilerplate du thème CMS et cliquez sur Définir comme thème actif. Sur l'écran suivant, sélectionnez un modèle.

Vous serez redirigé vers l'éditeur de page où vous pourrez modifier les champs du thème.

• Dans la barre latérale gauche de l'éditeur de page, cliquez sur l'onglet Thèmes.
• Dans l'onglet Thèmes, cliquez sur Modifier les paramètres de thème. C'est ici que vous pouvez modifier les paramètres de votre thème existant. La publication des modifications apportées aux paramètres du thème mettra à jour les styles sur toutes vos pages utilisant le thème mis à jour. 

Revenez à votre terminal, puis exécutez hs watch my-website-theme my-website-theme. Cette commande consulte votre répertoire local et télécharge automatiquement les changements suivants vers votre compte HubSpot lors de l'enregistrement des fichiers.

Maintenant que nous sommes face à des modifications locales, ajoutez un nouveau champ de thème :

• Ouvrez le fichier fields.json dans votre éditeur. Ce fichier contrôle les champs disponibles dans la barre latérale de l'éditeur de thème. Nous allons ajouter un nouveau champ pour spécifier la hauteur du pied de page.
• Vers le bas du fichier, localisez le groupe footer. 
• Copiez le code ci-dessous et collez le JSON dans le fichier au-dessus du premier élément du tableau enfant pour le groupe footer. 

•  Enregistrez fields.json et actualisez l'aperçu du thème dans HubSpot. Votre nouveau champ devrait s'afficher dans la barre latérale de gauche.

• Dans votre éditeur de code, ouvrez le fichier theme-overrides.css. Localisez ensuite .footer dans le sélecteur CSS. Nous allons maintenant ajouter un élément min-height à ce sélecteur.
• Pour accéder à une valeur dans un thème, utilisez l'objet theme. Par exemple, vous pouvez utiliser {{ theme.footer.height }} pour accéder à la valeur de hauteur définie dans votre champ de hauteur.
• Remplacez la déclaration .footer dans theme-overrides.css par la déclaration suivante :

• Enregistrez theme-overrides.css pour le télécharger dans votre compte HubSpot.

Revenez à l'éditeur de thème et actualisez la page pour voir votre nouveau champ apparaître sous le pied de page. Mettez à jour la valeur de la hauteur pour qu'elle soit immédiatement reflétée dans l'aperçu. Il peut être judicieux de définir une couleur d'arrière-plan pour le pied de page afin que vous puissiez voir la modification plus facilement.

Maintenant que vous avez créé et mis à jour votre thème, vous pouvez créer d'autres champs de thème et les personnaliser pour vos projets. Pour plus d'options de personnalisation, consultez la présentation des thèmes. Pendant la création de votre thème, il peut être utile de consulter les bonnes pratiques en matière d'optimisation des sites web sur le CMS Hub. 

HubSpot compte plusieurs thèmes par défaut qui sont proposés avec CMS Hub. Ces thèmes peuvent être consultés, clonés et mis à jour afin de savoir comment utiliser un thème dans une situation concrète.

Une fois que vous maîtrisez les thèmes, découvrez comment créer votre premier module personnalisé.