Vue d'ensemble des thèmes

Last updated:

Un thème est un ensemble portable et contenu de ressources de développement conçues pour permettre d'éditer du contenu avec fluidité.  Vous pouvez créer des thèmes localement à l'aide de HubSpot CLI en utilisant les outils, les technologies et les workflows que vous préférez. Les environnements et les comptes disposent de la portabilité des thèmes et de leurs fichiers associés. Apprenez à développer des thèmes avec la vidéo de présentation de la HubSpot Academy ci-dessous :

Les thèmes en tant que package

Les thèmes étant un ensemble, ils se présentent en cascade dans l'application HubSpot, à différents endroits, pour permettre une expérience de création de contenu efficace. Les développeurs peuvent utiliser des thèmes pour créer un système de conception permettant aux créateurs de contenu de travailler. Il est possible d'intégrer une certaine souplesse et des directives dans un thème pour répondre aux besoins de votre entreprise. 

Création de la page

Lorsque les créateurs de contenu génèrent de nouvelles pages, ils sont invités à sélectionner le thème à partir duquel créer la page, puis à choisir le modèle à utiliser dans le thème.

Choix du thème à l'intérieur de HubSpotL'image d'aperçu du thème, ainsi que d'autres configurations pour un thème, sont définies dans le fichier theme.json. 

Champs du thème

Les thèmes permettent aux développeurs de créer un ensemble de champs de thème, similaires aux champs de module, qui donnent aux créateurs de contenu la possibilité de régler divers boutons et cadrans conçus par un développeur afin d'avoir un contrôle stylistique global d'un site web sans avoir à modifier le CSS. Les développeurs utilisent HubL pour accéder aux valeurs des champs de thème dans l'ensemble de leur CSS. Les créateurs de contenu utilisent 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.

Thèmes

Les champs du thème sont définis par le fichier fields.json d'un thème. 

Lorsque vous modifiez un thème en mode test, vous pouvez également copier les paramètres JSON du thème. Cela vous permet de coller toutes les mises à jour dans le fichier fields.json local du thème.copy-theme-settings-test-mode

 

Modules de thème

Les modules d'un thème doivent être conçus spécifiquement pour être utilisés dans les modèles de ce thème. L'éditeur de contenu met l'accent sur ces modules de thème, ce qui permettra aux créateurs de contenu d'ajouter rapidement et facilement aux pages qu'ils construisent des modules conçus pour fonctionner correctement dans le contexte de cette page. Les modules par défaut et le reste des modules de votre compte HubSpot seront toujours disponibles.

Modules de thème au sein d'un thème

Lors du développement d'un thème, vous pouvez masquer les modules et les sections de l'éditeur de page pour créer une expérience de création de contenu plus rationalisée.

Structure des fichiers du thème

Un thème est un répertoire unique de fichiers. Vous pouvez inclure des fichiers HTML, CSS et Javascript, des modules et des fichiers supplémentaires organisés de n'importe quelle manière dans des sous-répertoires du dossier du thème parent. Deux fichiers JSON sont nécessaires pour construire un thème : theme.json et fields.json. Ces fichiers doivent être inclus dans le dossier racine du thème.

Pour commencer avec un exemple, voir le HubSpot CMS Boilerplate.

Structure des fichiers du thème

Pour l'instant, les fichiers .json ne peuvent être créés et téléchargés sur un compte HubSpot que par le biais des outils de développement local.

theme.json

Le fichier theme.json contient les méta-informations relatives au répertoire de votre thème, telles que le libellé lisible du thème, sa capture d'écran de prévisualisation et diverses configurations relatives au comportement du thème. Votre fichier theme.json apparaîtra comme suit :

// theme.json { "label": "Cool Theme", "preview_path": "./templates/home-page.html", "screenshot_path":"./images/templates/homepage.jpg", "enable_domain_stylesheets": false, "version":"1.0", "author":{ "name":"Jon McLaren", "email":"noreply@hubspot.com", "url":"https://theme-provider.com/" }, "documentation_url":"https://theme-provider.com/cool-theme/documentation", "license":"./license.txt", "example_url":"https://theme-provider.com/cool-theme/demo", "is_available_for_new_content":true }
theme.json
ParameterTypeDescription
label
Chaîne

Le libellé lisible du thème est utilisé là où le thème est affiché dans l'application HubSpot, comme dans l'écran de sélection des modèles et l'éditeur de thème. 

preview_path
Chaîne

Un chemin relatif vers un fichier de modèle dans le thème qui devrait être le modèle par défaut est utilisé lors de la prévisualisation d'un thème dans l'éditeur de thème. 

screenshot_path
Chaîne

Un chemin d'accès relatif vers un fichier image est utilisé pour donner un aperçu de l'aspect du thème là où la sélection du thème a lieu, comme dans l'écran de sélection du modèle. 

enable_domain_stylesheets
Booléen

Activation ou désactivation des feuilles de style attachées à des domaines dans les paramètres du site web et incluses dans les modèles du thème. La valeur par défaut est false.

version
Chaîne

Numéro de version entier prenant en charge les versions ..

Author
Objet

Champ d'objet pour fournir des informations personnelles en tant que fournisseur du thème.

name
Nom du fournisseur.
email
Adresse électronique du service client du fournisseur.
url
Site web du fournisseur.
documentation_url
Chaîne

Lien vers la documentation associée au thème.

example_url
Chaîne

Lien vers l'exemple réel du thème.

license
Chaîne

Identifiant SPDX valide ou chemin d'accès relatif à la licence dans votre thème.

Cette licence dicte l'utilisation et la modification autorisées par le créateur du thème. Utile lors du téléchargement sur le marketplace.

is_available_for_new_content
Booléen

Booléen qui détermine si un thème s'affiche dans la page du créateur de contenu pour être sélectionné. La valeur par défaut est true.

Fichier fields.json

Le fichier fields.json contrôle les champs et groupes de champs disponibles dans l'éditeur de thème, y compris les champs de style. Les champs que vous incluez dépendront du degré de contrôle que vous souhaitez donner aux créateurs de contenu dans l'éditeur de page. Le nombre de champs disponibles pour les thèmes est plus limité que pour les modules, car les champs de thème sont mieux adaptés aux options de style, tandis que le contenu global est mieux adapté au contenu du thème.

Par exemple, plutôt que d'ajouter un champ de texte dans le fichier field.json du thème pour l'accroche de votre site, il devrait être ajouté en tant que module global afin que les créateurs de contenu puissent mettre à jour l'accroche à partir de l'éditeur de page plutôt que de l'éditeur de thème.

Les champs qui peuvent être utilisés dans les thèmes sont les suivants :

Obtenez plus d'informations sur les options possibles pour les champs de thème en consultant la documentation sur les modules et les champs de thème. 

Utilisation des valeurs des champs de thème

Pour accéder aux valeurs des champs, utilisez la notation par points et préfixez le chemin d'accès à la valeur dans fields.json avec le thème. Vous pouvez utiliser la valeur d'un champ thématique dans vos feuilles de style en utilisant une syntaxe similaire à {{ theme.path.to.value }}. Par exemple, le champ de police décrit ci-dessous :

// fields.json [{ "type": "group", "name": "typography", "label": "Typography", "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } } ] }]

Serait référencé en CSS par :

h1 { font-size: {{ theme.typography.h1_font.size }}px; font-family: {{ theme.typography.h1_font.font }}; color: {{ theme.typography.h1_font.color }}; text-decoration: {{ theme.typography.h1_font.styles.text-decoration }}; font-style: {{ theme.typography.h1_font.styles.font-style }}; font-weight: {{ theme.typography.h1_font.styles.font-weight }}; }

Aperçu d'un thème

Les développeurs ont parfois besoin de s'assurer du bon fonctionnement de leurs champs sans avoir d'impact sur les pages réelles. C'est justement le but du mode de test des thèmes.

Mode de test

Le mode de test vous offre un environnement sûr pour tester les champs de votre thème et vous assurer qu'ils fonctionnent correctement. L'interface ressemble exactement à l'aperçu/éditeur de thème que les créateurs de contenu peuvent voir, mais elle garantit que vous ne modifierez pas les paramètres de votre site web. Pour se protéger contre les modifications accidentelles des paramètres du thème, la publication est bloquée lorsque vous êtes en mode test. Vous êtes en mode test si ?testmode=true apparaît dans votre barre d'adresse, et si une icône de mode test s'affiche dans l'en-tête de l'éditeur de thème.

Mode de test/prévisualisation de thème

Deux méthodes permettent d'activer le mode test :

  • Pour activer le mode test depuis le gestionnaire de conception :
    • Dans le gestionnaire de conception, sélectionnez votre thème dans le Finder.
    • En haut du menu latéral de gauche, cliquez sur le bouton Aperçu.
      copy-theme-settings-test-mode-design-manager (1)
  • Pour activer le mode test à partir de l'éditeur de la page :
    • Dans l'éditeur de page, cliquez sur l'onglet Conception dans le menu latéral de gauche, puis cliquez sur Modifier les paramètres du thème.
      page-editor-edit-theme
    • Ajoutez ?testmode=true à l'URL, puis appuyez sur Entrée. Vous passerez alors en mode test.

 Vous pouvez aussi ouvrir les paramètres de votre thème à partir de l'éditeur de page. Une fois entré, ajoutez le paramètre de requête ?testmode=true à l'URL dans votre barre d'adresse.

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