> ## 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.
# Exigences relatives aux thèmes du marketplace des modèles HubSpot
> Découvrez-en davantage sur les exigences auxquelles un thème doit répondre pour être soumis sur le marketplace des ressources.
'Exigences relatives aux thèmes du marketplace des modèles HubSpot';
'Marketplace des modèles | Exigences relatives aux thèmes (2022)';
'Découvrez-en davantage sur les exigences auxquelles un thème doit répondre pour être soumis sur le marketplace des ressources.';
Découvrez-en davantage sur les exigences qu'un thème doit remplir pour être soumis dans le marketplace des modèles HubSpot.
Si vous débutez dans la création de thèmes, nous vous recommandons vivement d'utiliser le boilerplate de thème CMS gratuit HubSpot, qui peut être téléchargé à partir du [répertoire Git](https://github.com/HubSpot/cms-theme-boilerplate) ou [importé dans l'interface utilisateur du gestionnaire de conception de votre compte](https://www.youtube.com).
En outre, vérifiez les [conditions relatives aux pages de listing du modèle](https://developers.hubspot.com/docs) lorsque vous soumettez votre modèle au marketplace des modèles HubSpot.
## Limites concernant les thèmes
Tenez compte des limites suivantes par thème :
* Les comptes ***CMS Hub*** gratuits ne peuvent pas utiliser la recherche sur le site web, les fonctionnalités CTA, ou les vidéos natives HubSpot. Découvrez-en davantage sur ce qui est inclus dans les abonnements ***CMS Hub*** dans le [catalogue de produits et de services de HubSpot](https://legal.hubspot.com/hubspot-product-and-services-catalog).
* Les thèmes sont soumis aux limites suivantes :
* 50 modèles [(nombre minimum de pages nécessaires)](#templates-css%2C-sections%2C-page-templates%2C-etc.)
* 50 modules (5 au minimum)
* 50 sections (5 au minimum)
* Les thèmes **ne doivent pas** contenir les éléments suivants :
* Modèles d'e-mails
* Fonctionnalité HubDB
* Fonctions sans serveur
* Champs d'objet CRM
* [Colonnes flexibles dans les modèles](https://developers.hubspot.com/docs#flexible-columns)
**Comparaison entre les modules et les sections**
Les sections sont utiles, car les créateurs de contenu ne peuvent les déposer que dans des zones de dépôt pleine largeur sur la page, ce qui vous aide en tant que développeur à garantir un excellent produit fini.
En particulier, les sections à disposition fixe, où le créateur de contenu ne peut pas déplacer d'éléments dans la section, sont un excellent outil pour fournir une mise en forme et une mise en page créatives qui ne pourraient pas être obtenues autrement à l'aide de l'éditeur en glisser-déposer.
Les sections offrent également des avantages supplémentaires en termes de convivialité pour le créateur de contenu, car il peut sélectionner des modules individuels à l'intérieur de la section, ce qui permet à leurs formulaires de modules d'être plus courts et plus ciblés sur l'élément qu'ils modifient.
## Conditions globales en matière de thème
* Tous les thèmes soumis doivent être distincts et originaux. Par exemple, le même thème avec un contenu de copie ou de variable différent n'est pas comptabilisé comme un thème distinct. [En savoir plus sur la conformité du marketplace des modèles HubSpot](https://developers.hubspot.com/docs#template-marketplace-compliance).
* Un thème doit être conçu avec des modèles HTML et HubL et des balises [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas).
* Les thèmes doivent respecter une grille de 12 colonnes.
### Structure des fichiers du thème
Tous les thèmes doivent contenir une structure de dossier appropriée et être regroupées sous un dossier « parent », qui doit décrire le listing de vos produits. Par exemple, si vous créez un thème nommé « SuperAwesome » pour le marketplace, votre structure doit ressembler à l'image ci-dessous. Découvrez-en davantage sur la [structure des fichiers de thème](https://developers.hubspot.com/docs#theme-file-structure).
### Chemin de fichier local relatif pour les modèles
Lorsque vous faites référence à des ressources du thème, vous devez utiliser un chemin de fichier local relatif. La meilleure façon de les inclure est d'utiliser la fonction [get\_asset\_url](/docs/cms/reference/hubl/functions#get-asset-url), qui renvoie l'URL publique d'une ressource, d'un fichier ou d'un modèle. Vous pouvez également [générer cette fonction](/docs/cms/reference/hubl/functions#get-asset-url) soit en faisant un clic droit sur un **fichier** et en sélectionnant **Copier l'URL publique**, soit en cliquant sur **Actions**, puis en sélectionnant **Copier l'URL publique**.
Par exemple, une feuille de style référencée par `require_css` et `get_asset_url` doit être formatée comme suit :
```hubl theme={null}
{{require_css(get_asset_url('../../css/main.css')) }}
```
```html theme={null}
//cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css
```
Dans la vidéo ci-dessous, examinez les différences dans la structure des fichiers de votre compte développeur par rapport aux fichiers livrés à un client de marketplace :
## Performances du thème
Un thème doit obtenir un score supérieur aux seuils suivants via Google Lighthouse :
* **Accessibilité sur ordinateur :** 65
* **Bonnes pratiques sur ordinateur :** 80
* **Performances sur ordinateur :** 70
* **Performances sur mobile :** 40
Découvrez comment [générer un rapport Google Lighthouse pour votre thème à l'aide de l'LC](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
* Les fichiers de thème doivent pouvoir être minifiés.
* La taille des fichiers d'image ne doit pas dépasser 1 Mo.
* Toutes les balises d'image doivent avoir un attribut `alt` (la valeur `""` est acceptable).
* Toutes les balises d'image doivent avoir un attribut `loading` (la valeur `""` est acceptable).
### Prévisualiser les URL des thèmes
Lors de la création d'une URL de prévisualisation, vous devez utiliser votre propre nom de domaine. Vous ne pouvez pas utiliser le domaine fourni par HubSpot avec cette structure d'URL : `[AccountID].hs-sites.com`
Un site web en ligne, et non une image du site de démonstration, doit être utilisé.
Si, à un moment donné, votre démo en direct devient inaccessible, HubSpot se réserve le droit, moyennant notification au fournisseur, de supprimer votre thème jusqu'à ce que la démo en direct redevienne accessible.
## Utilisation de jQuery
jQuery [n'est pas activé par défaut](https://knowledge.hubspot.com/fr/website-pages/include-jquery-across-your-hubspot-pages) dans le compte HubSpot d'un client. Si votre thème repose sur jQuery, une version de jQuery doit être incluse pour s'assurer que le thème fonctionne comme prévu.
Par exemple, si vous incluez un module qui nécessite jQuery alors que le reste du site ne le nécessite pas, vous devrez utiliser le code suivant pour charger jQuery :
```hubl theme={null}
{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
{{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}
```
## Configuration du thème (Theme.json)
Le fichier `theme.json` doit inclure les paramètres suivants :
```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
}
```
Veuillez vérifier votre fichier `theme.json` et vous assurer de ce qui suit :
* Le nom du libellé correspond au nom de votre listing de thèmes.
* Si vous utilisez le CMS theme boilerplate gratuit de HubSpot, les valeurs du boilerplate ne doivent pas être présentes. Cela inclut les informations sur l'auteur, l'URL de la documentation, l'URL de l'exemple, etc.
* L'URL de la documentation résout et contient de la documentation sur l'utilisation de votre thème.
* Le chemin d'aperçu est un fichier valide dans votre thème.
* Le chemin de capture d'écran est un fichier valide et est lié à votre thème.
* L'exemple d'URL résout et conduit à une démonstration de votre thème. N'utilisez pas les sous-domaines `preview.hs-sites.com` ou `[AccountID].hs-sites.com` pour l'exemple d'URL.
En savoir plus sur [les paramètres theme.json](https://developers.hubspot.com/docs#theme-json).
## Paramètres du thème (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 fichier `fields.json` doit contenir au moins trois champs de couleur.
* Pour garantir la compatibilité entre des thèmes et des modules indépendants, les thèmes doivent inclure les conventions d'appellation de police et de couleur standards suivantes : `primary_color`, `secondary_color`, `heading_font` et `body_font`. Découvrez-en davantage sur la [compatibilité module-thème](https://developers.hubspot.com/docs#module-compatibility-with-themes)
Si les champs de thème ne disposent pas de champs `primary_color`, `secondary_color`, `heading_font` ou `body_font`, ils peuvent utiliser le champ `alternate_names`.
Découvrez-en davantage sur ces [paramètres fields.json](https://developers.hubspot.com/docs#fields-json) et [consultez un exemple de fichier fields.json](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json) à partir du boilerplate de CMS Hub.
Les paramètres du thème doivent également :
* Ne pas entrer en conflit avec des styles d'éditeur ou des styles définis via un module. Par exemple, n'utilisez pas `!important` dans votre feuille de style CSS, car il est difficile pour les utilisateurs finaux de le remplacer et cela provoquerait un conflit.
* Utiliser des libellés descriptifs pour chaque paramètre afin que les créateurs de contenu sachent ce qu'ils mettent à jour.
* S'appliquer à tous les modèles à l'intérieur d'un thème, sauf s'il existe un cas d'utilisation spécifique pour les styles supplémentaires. Par exemple, les modifications apportées au style et à la taille des en-têtes `h1` dans les paramètres du thème doivent s'appliquer à toutes les balises `h1` du thème.
Un thème **doit** inclure au minimum les champs de thème suivants :
**Champs de typographie :**
* Champ de police du corps du texte (balises `p`)
* Champs de police `h1` à `h6`
* Couleur du lien hypertexte (balises `a`), y compris le style au survol
**Champs de formulaire :**
* Couleur de l'arrière-plan du formulaire
* Couleur de la bordure du formulaire
* Couleur de libellé des formulaires
* Couleur de la bordure des champs de formulaire
* Bouton de formulaire, y compris les paramètres pour le texte du bouton, la couleur d'arrière-plan et le style au survol.
En outre :
* Les champs de votre thème doivent être regroupés de manière logique. Par exemple, plusieurs champs liés à la typographie doivent être réunis sous un groupe `Typography`.
* Les champs de thème doivent avoir des contrôles de couleur et de police distincts pour les boutons et les formulaires, ainsi que des contrôles de couleur, de logo et de police distincts pour l'en-tête et le pied de page.
* Si les modules d'un thème utilisent des logos, au moins un champ de logo doit hériter des [paramètres de marque](/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance) du compte. Si vous utilisez un champ d'image pour afficher un logo, le champ d'image n'hérite pas obligatoirement des paramètres de marque.
## Modèles (CSS, Sections, Modèles de page, etc.)
### Sections
* Vous devez utiliser des [sections](https://developers.hubspot.com/docs#reusable-sections), le cas échéant. Un thème **doit** inclure au minimum cinq sections.
* Les sections doivent avoir des captures d'écran uniques et fonctionnelles.
* Les sections et les modules ne doivent pas être redondants.
### Modèles de page
Un thème doit inclure au minimum les types de modèle suivants :
* Un modèle de page de site web ou de page de destination.
* Lorsque vous incluez des modèles à plusieurs pages, chaque modèle doit avoir un objectif distinct. Par exemple, une page d'accueil, une page *À propos de nous*, une page de destination pleine largeur et une page de destination avec une barre latérale droite.
* Il est recommandé d'inclure au moins huit modèles de page dans un thème.
* Des modèles de listing de blog et d'article de blog distincts.
* **Modèle de listing de blog :** la page qui affiche tous les articles de blog dans un format de listing (appelé blogroll). Le titre du modèle doit indiquer qu'il s'agit de la page de listing.
* **Modèle d'article de blog :** la page de détail d'articles de blog qui affiche les différents articles de blog. Le titre du modèle doit indiquer qu'il s'agit de la page d'article de blog.
* Par ailleurs, les commentaires de blog et les cases d'auteur de blog doivent être mis en forme pour correspondre au thème.
* Les modèles de page système suivants :
* **Modèle d'erreur 404 :** affiché lorsque les visiteurs atteignent une page qui n'existe pas.
* **Modèle d'erreur 500 :** affiché lorsque le site rencontre une erreur interne.
* **Modèle d'invite de mot de passe :** affiché lorsqu'une page est protégée par un mot de passe.
* **Modèle des abonnements :** page de gestion des inscriptions permettant aux destinataires d'e-mails de gérer les types d'e-mails auxquels ils s'abonnent.
* **Modèle de mise à jour des abonnements** : la page de confirmation qui apparaît lorsque le destinataire des e-mails met à jour ses préférences d'abonnement.
* **Modèle d'enregistrement des désabonnements** : la page qui apparaîtra pour les destinataires des e-mails qui essayent de se désabonner, si HubSpot ne peut déterminer leur adresse e-mail.
* **Modèle de résultats de recherche** : affiche les résultats de recherche qui sont retournés lors de l'utilisation de la [recherche du site](/docs/cms/start-building/building-blocks/modules/content-search). Disponible pour les comptes ***CMS Hub*** payants uniquement.
### Nom du modèle de page
* Si vous avez des modèles avec des noms similaires, ajoutez des mots descriptifs qui indiquent la différence entre eux.
* Maintenez la cohérence de la majuscule, supprimez les traits d'union et évitez d'utiliser des raccourcis (par exemple, utilisez arrière-plan au lieu de ap).
* Le nom de votre entreprise ou le nom du thème n'a pas besoin d'être inclus dans le nom du modèle.
## Modules
Pour en savoir plus sur les conditions relatives aux modules de thème et aux modules individuels, [cliquez ici](https://developers.hubspot.com/docs).
## Contenu global
### Partiels globaux
Les [partiels globaux](/docs/cms/start-building/building-blocks/global-content) sont un type de modèle créé à l'aide de HTML et HubL qui peut être réutilisé sur l'ensemble de votre site web. Les types de partials les plus courants sont les en-têtes de sites Web, les barres latérales et les pieds de page. Découvrez comment [créer des partiels globaux](/docs/cms/start-building/building-blocks/global-content#creating-a-global-content-partial-template-using-local-development-tools).
* Les thèmes doivent inclure des partiels globaux. Les - partiels globaux doivent inclure une [zone de glisser-déposer.](https://developers.hubspot.com/docs) Par exemple, vous ne pouvez pas masquer la zone de glisser-déposer avec une classe « masquer ».
* Vous devez incorporer des zones de glisser-déposer utilisables dans les en-têtes et les pieds de page.
* Pour les menus utilisés globalement à travers un site, les utilisateurs doivent également pouvoir [sélectionner un menu de navigation HubSpot](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) qu'ils ont créé dans les paramètres de leur compte.
Évitez d'inclure des modules globaux dans les partiels globaux, car cela peut créer une expérience utilisateur négative.
## Prise en charge multilingue
Les thèmes doivent pouvoir prendre en charge plusieurs versions linguistiques et doivent spécifier les langues qu'ils prennent en charge. Pour ce faire, vous pouvez ajouter un [module de sélecteur de langue](/docs/cms/reference/modules/default-modules#language-switcher) dans un en-tête global, ce qui permet aux clients de localiser facilement les options de langue et de choisir la langue de leur choix.
* Vous ne devez afficher qu'une seule langue à la fois. Par exemple, évitez d'avoir à la fois l'anglais et l'espagnol dans l'interface utilisateur en même temps.
* Évitez d'utiliser du texte codé en dur. Par exemple, plutôt que de coder le texte d'un bouton de listing de blog comme *En savoir plus*, définissez le texte dans un champ afin que l'utilisateur final puisse mettre à jour le texte sans avoir à entrer dans le code.
## Éléments mobiles et réactifs
Les thèmes doivent être capables d'adapter leur contenu à l'appareil sur lequel il est consulté. Ils doivent également offrir une bonne expérience utilisateur sur différents appareils. Cela comprend, sans s'y limiter :
* Menu de navigation principal
* Curseurs et onglets
* Grandes images
* Éviter le défilement horizontal (sauf intention)