Configuration du thème SXA 10 à l'aide de SXA CLI dans Sitecore 9.3

Cet article décrit la création d'un thème personnalisé à l'aide de SXA CLI et son application au site. SXA CLI est un outil de ligne de commande pour créer un nouveau thème personnalisé. Lors de la configuration d'un site, il n'est pas obligatoire de créer un thème.

Pourquoi un thème personnalisé:

Les éléments liés au thème, par exemple Les fichiers CSS, SCSS et JavaScript sont stockés dans Sitecore, avant Sitecore SXA 9.3.

La CLI SXA a fourni le contrôle pour décider quels fichiers nécessaires doivent être téléchargés. Cela évite de conserver des fichiers inutiles dans Sitecore Media Library.

Tous les fichiers source et les ressources de thème peuvent être conservés séparément de Sitecore en utilisant un contrôle de source comme – GIT.

Creative Exchange Live Tooling est maintenant disponible sous forme de package NPM qui aide pour créer le thème personnalisé.

Prérequis:

La dernière version de Node JS doit être installée sur votre système pour utiliser cet outil. Si vous n'avez pas Node JS, veuillez le télécharger à partir de – https://nodejs.org/fr/download/

Dans mon cas, version Node JS: v12.14.1

Configuration du thème:

SXA CLI est un outil de ligne de commande utile pour automatiser les tâches d'un projet SXA. Cette rubrique décrit comment ajouter un thème à l'aide de SXA CLI. Cela peut être pratique si vous souhaitez avoir plus de contrôle sur vos ressources et utiliser un système de contrôle de version.

Pour créer un thème à l'aide de SXA CLI:

1. Allez à –
   inetpub wwwroot App_Config Inclure z.Feature.Overrides et activer le fichier z.SPE.Sync.Enabler.Gulp.config.disabled.
   Pour activer ce fichier, faites un clic droit sur le fichier et supprimez «.disabled».
2. Open un terminal d'invite de commande avec le rôle ADMIN et installez le registre:

    npm config set @sxa: registry = https: //sitecore.myget.org/F/sc-npm-packages/npm/
   
   

3. Exécutez la commande suivante dans CMD pour installer globalement le package SXA CLI npm:

    npm i -g @ sxa / CLI
   
   

4. Maintenant, exécutez –

    sxa register 
   
   

   Pour le entrez l'instance pour laquelle vous souhaitez créer le thème.
   Dans mon cas, l'URL est – https: //prftsc.dev.local

   [19659017] Exécuter –

    sxa nouveau 
   
   

5. Npm demandera quelques-unes des questions telles que -login, mot de passe, nom du thème, chemin du thème.
   Si vous répondez Oui à la question – Voulez-vous configurer le fichier de configuration du thème?, Le fichier de configuration est automatiquement mis à jour.
   Entrez le chemin du thème: / .
   et sont généralement les dossiers sous le dossier Thèmes de la médiathèque créé avec le nom du locataire et le nom du site lors de la création du site. [19659017] Maintenant changez le répertoire dans le dossier qui contient le nouveau thème:

    cd 
   
   

6. Exécuter

    npm i
   
   

   Cette commande installera tous les packages npm mentionnés dans package.json.

7. Votre nouveau thème est maintenant disponible.
   Veuillez vous assurer d'assigner votre nouveau thème à votre site:
   Allez à Sitecore / Content / / / Settings, et dans les paramètres de configuration du site, dans le champ Thèmes compatibles, ajoutez votre nouveau thème au champ Sélectionné. Maintenant, votre thème est sélectionné comme thème actuel de votre site

Remarque: les étapes ci-dessus sont facilement disponibles sur la documentation de sitecore ( https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/ fr / add-a-theme-using-sxa-cli.html )

Thème en action:

Pour appliquer un thème à notre site, veuillez suivre les étapes suivantes:

1. Allez à votre / et cliquez sur le nœud Paramètres:
2. Sur le côté droit, localisez la configuration du site:
3. Dans la section Thèmes compatibles, faites défiler un peu sous la section Tous jusqu'à ce que vous trouviez le dossier Thèmes et sous ce dossier, localisez votre dossier de thèmes et sélectionnez le thème que vous avez créé et double-cliquez dessus pour qu'il soit sélectionné et ajouté sur le côté droit.
4. Le thème nouvellement créé peut maintenant être sélectionné dans les conceptions de page: [19659039] Appliquer le thème Étape 4  » width= »1024″ height= »281″ srcset= »https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=1024%2C281&ssl=1 1024w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=300%2C82&ssl=1 300w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=768%2C211&ssl=1 768w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=500%2C137&ssl=1 500w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=800%2C219&ssl=1 800w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=1280%2C351&ssl=1 1280w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=1536%2C421&ssl=1 1536w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=750%2C206&ssl=1 750w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=600%2C165&ssl=1 600w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?resize=640%2C176&ssl=1 640w, https://i0.wp.com/blogs.perficient.com/files/Apply_Theme_Step_4.png?w=1848&ssl=1 1848w » sizes= »(max-width: 1000px) 100vw, 1000px » data-recalc-dims= »1″/>
5. Le nouveau thème est maintenant configuré. Accédez au répertoire Thème que nous avons créé dans l'invite de commande et exécutez la commande – commande «gulp». Il vous demandera d'entrer les informations de connexion au site Web.
6. Il surveillera vos changements CSS ou JS, et chaque fois que vous apporterez un changement, il sera compilé et la version minifiée de vos fichiers CSS ou JS seront téléchargés sur le site.

Jusqu'à présent, nous avons vu comment nous pouvons créer un thème personnalisé à l'aide de SXA CLI et comment l'appliquer au site . Il a rendu facile de séparer le code inutile à télécharger.

À propos de l'auteur

Pankaj est un consultant technique associé qui travaille actuellement sur Sitecore en tant que développeur front-end. Il aime apprendre et explorer de nouveaux frameworks JS et partager les connaissances qu'il apprend à travers ses blogs.

Plus de cet auteur