Dernière modification : 28 août 2025
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 HubSpot
L’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 Boilerplate CMS HubSpot
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 ressemblera à ce qui 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
}
ParamètreTypeDescription
labelChaî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_pathChaî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_pathChaîne : un chemin d’accès relatif vers un fichier image est utilisé pour donner une instantanée 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_stylesheetsBooléen : une 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 définie sur false.
versionChaîne : un numéro de version entier prenant en charge les versions ..
AuthorObjet : un champ d’objet pour fournir des informations personnelles en tant que fournisseur du thème.name
Le nom du fournisseur.
email
L’adresse e-mail du service client du fournisseur.
url
Le site web du fournisseur.
documentation_urlChaîne : le lien vers la documentation associée au thème.
example_urlChaîne : le lien vers l’exemple réel du thème.
licenseString : un 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_contentBooléen : le 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 définie sur true.

​
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 le slogan de votre site, il devrait être ajouté en tant que module global afin que les créateurs de contenu puissent mettre à jour le slogan à 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

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