Styles et variantes SXA – Perficient Blogs

Ceci est un aperçu des styles et variantes SXA de Sitecore. C’est la façon dont Sitecore stylise les composants. SXA est livré préchargé avec des composants prêts à l’emploi qui incluent des variantes et des styles. Vous devrez probablement personnaliser certaines de ces ressources SXA existantes et en ajouter certaines.

*REMARQUE: À l’avenir, lorsque je mentionnerai les « styles », je ferai référence aux « Style Ticks » de Sitecore, et non aux styles CSS.

Styles vs variantes

En un mot, si vous souhaitez modifier l’apparence sans modifier le balisage, utilisez un style. Si vous devez modifier le balisage, utilisez une variante. Un avantage supplémentaire des variantes est que vous pouvez charger une capture d’écran de la variante dans le menu déroulant Variante de l’éditeur d’expérience. Cela permet aux auteurs de contenu d’obtenir une représentation visuelle du composant avant de le mettre sur la page. Dans certains cas, j’ai vu un site entièrement construit avec des variantes et très peu de styles. Après tout, en tant que développeur Sitecore, l’auteur de contenu est votre principal client.

modes

Les styles appliquent une classe unique à l’élément parent d’un composant. Cela vous permet d’ajuster le composant et tous les éléments qu’il contient, en utilisant la spécificité CSS.

Vous pouvez fournir un nom de classe personnalisé dans le champ Valeur du nœud Style dans l’éditeur de contenu.

*POINTE: Appliquez les rendus sous lesquels vous souhaitez que les styles apparaissent. Sinon, un auteur de contenu pourrait appliquer des styles qui n’appartiennent pas à des composants spécifiques.

Les styles sont créés dans Sitecore à cet emplacement.
sitecore/Content/{tenent}/{site}/Presentation/Styles/{component}/{style}

Appliquez le style au composant à l’aide de l’icône Pot de peinture dans l’éditeur d’expérience.

Variantes

Les variantes vous permettent de charger un balisage différent pour un composant spécifique. Vous pouvez utiliser la structure de nœud Sitecore ou les modèles Scriban. Scriban est fortement recommandé.

Les variantes sont créées dans Sitecore à cet emplacement.
sitecore/Content/{tenent}/{site}/Presentation/Styles/{component}/{variant}

Lors de l’ajout d’une nouvelle variante, assurez-vous d’ajouter un nom de classe personnalisé au nœud parent dans l’éditeur de contenu. Cela vous permettra de styliser la variante en utilisant la spécificité CSS.

Pour les modèles Scriban, vous pouvez saisir le balisage exact que vous souhaitez dans le champ Modèle.

Apprenez tout sur Scriban sur le site de documentation de Sitecore.
https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/scriban-templates.html

Appliquez la variante au composant à l’aide de la liste déroulante Variante du composant dans l’éditeur d’expérience.

Structure des fichiers et modèles de code

SXA est livré avec un modèle déjà en place. Il est recommandé de suivre les modèles existants pour maintenir la lisibilité dans toute votre équipe de développement et pour les développeurs qui n’ont pas encore rejoint votre équipe de développement.

Les fichiers CSS sont organisés avec des « fichiers de composants » chargeant des « sous-fichiers ». Les fichiers du composant se trouvent dans le dossier ‘{theme}/sass’ et sont nommés component-{component}.scss coïncidant avec le nom du composant.

Les sous-fichiers sont situés dans les dossiers ‘styles’ et ‘variants’ du même dossier ‘sass’ et sont nommés par le nom de classe utilisé dans Sitecore.

Dans ces fichiers de composants se trouvent des @includes qui chargent les sous-fichiers.

*POINTE: Il est recommandé d’appeler ces importations dans le nom de la classe racine, pour renforcer la spécificité CSS.

Alors c’est tout! Connaître le fonctionnement de ces systèmes facilitera les estimations et les améliorations futures.

Allez-y et ajoutez des styles et des variantes à votre instance Sitecore, en pensant à l’auteur du contenu.