> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt > Use this file to discover all available pages before exploring further. # Vue d'ensemble du thème > Développer des thèmes de CMS HubSpot qui permettent aux développeurs de construire des systèmes de conception dans lesquels les créateurs de contenu peuvent travailler. 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](/docs/developer-tooling/local-development/hubspot-cli/install-the-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](#theme-json). ### Champs du thème Les thèmes permettent aux développeurs de créer un ensemble de [champs de thème](#fields-json), 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](#using-theme-field-values) 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](#fields-json). Lorsque vous modifiez un thème en [mode test](/docs/cms/start-building/building-blocks/overview#test-mode), 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](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections) 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](https://github.com/HubSpot/cms-theme-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](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli). ### 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 : ```json theme={null} // 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ètre | Type | Description | | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `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 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_stylesheets` | Boolé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`. | | `version` | Chaîne |  : un numéro de version entier prenant en charge les versions `.`. | | `Author` | Objet |  : 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_url` | Chaîne |  : le lien vers la documentation associée au thème. | | `example_url` | Chaîne |  : le lien vers l'exemple réel du thème. | | `license` | String |  : un [Identifiant SPDX](https://spdx.org/licenses/) 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 |  : 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](https://developers.hubspot.fr/docs/guides/cms/content/fields/overview#style-fields). 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](/docs/cms/start-building/building-blocks/global-content) 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 : * [Booléen](/docs/cms/reference/fields/module-theme-fields#boolean) * [Bordure](/docs/cms/reference/fields/module-theme-fields#border) * [Choix](/docs/cms/reference/fields/module-theme-fields#choice) * [Couleur](/docs/cms/reference/fields/module-theme-fields#color) * [Police](/docs/cms/reference/fields/module-theme-fields#font) * [Image](/docs/cms/reference/fields/module-theme-fields#image) * [Nombre](/docs/cms/reference/fields/module-theme-fields#number) * [Espacement](/docs/cms/reference/fields/module-theme-fields#spacing) 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](/docs/cms/reference/fields/module-theme-fields). #### 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 : ```json theme={null} // 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 : ```css theme={null} 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](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings#edit-theme-settings), 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 * [Premiers pas avec les thèmes](/docs/cms/start-building/building-blocks/themes/getting-started) * [Comment ajouter des fonctionnalités de thème à des sites existants ?](/docs/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites) * [Thème boilerplate HubSpot](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)