Découvrez comment mettre en oeuvre des styles individuels et réutiliser les composants principaux à l’aide du système de style du Experience Manager. Ce tutoriel décrit le développement pour le système de style afin d’étendre les composants principaux avec des CSS spécifiques à la marque et des configurations de stratégie avancées de l’éditeur de modèles.
Examinez les outils et les instructions requis pour configurer une environnement de développement local.
Il est également recommandé de consulter la section Bibliothèques côté client et processus front-end tutoriel pour comprendre les principes de base des bibliothèques côté client et les différents outils front-end intégrés au projet AEM.
Si vous avez terminé avec succès le chapitre précédent, vous pouvez réutiliser le projet et ignorer les étapes d’extraction du projet de démarrage.
Consultez le code de ligne de base sur lequel le tutoriel s’appuie :
Consultez la section tutorial/style-system-start
branche à partir de GitHub
$ cd aem-guides-wknd
$ git checkout tutorial/style-system-start
Déployez la base de code sur une instance d’AEM locale à l’aide de vos compétences Maven :
$ mvn clean install -PautoInstallSinglePackage
Si vous utilisez AEM version 6.5 ou 6.4, ajoutez la variable classic
profile à n’importe quelle commande Maven.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Vous pouvez toujours afficher le code terminé sur GitHub ou extraire le code localement en passant à la branche tutorial/style-system-solution
.
Dans ce chapitre, nous utiliserons la variable Système de style pour créer des variantes de la variable Titre et Texte composants utilisés sur la page Article.
Style de soulignement disponible à utiliser pour le composant Titre
Le Système de style permet aux développeurs et aux éditeurs de modèle de créer plusieurs variantes visuelles d’un composant. Les auteurs peuvent ensuite décider quel style utiliser lors de la composition d’une page. Nous utiliserons le système de style tout le reste du tutoriel pour obtenir plusieurs styles uniques, tout en utilisant les composants principaux dans une approche à code faible.
L’idée générale du système de style est que les auteurs peuvent choisir différents styles de l’apparence d’un composant. Les "styles" sont pris en charge par des classes CSS supplémentaires qui sont injectées dans la balise div externe d’un composant. Dans les bibliothèques clientes, des règles CSS sont ajoutées en fonction de ces classes de style afin que le composant change d’aspect.
Vous pouvez trouver documentation détaillée du système de style ici. Il y a aussi une grande vidéo technique pour comprendre le système de style.
Le Composant du titre a été ajouté par proxy au projet sous /apps/wknd/components/title
dans le ui.apps module . Les styles par défaut des éléments d’en-tête (H1
, H2
, H3
…) ont déjà été implémentés dans la variable ui.frontend module .
Le Conceptions WKND Article contiennent un style unique pour le composant Titre avec un trait de soulignement. Au lieu de créer deux composants ou de modifier la boîte de dialogue du composant, le système de style peut être utilisé pour permettre aux auteurs d’ajouter un style de soulignement.
Ajoutez une nouvelle stratégie pour les composants Titre afin que les auteurs de contenu puissent sélectionner le style Souligné à appliquer à des composants spécifiques. Pour ce faire, utilisez l’éditeur de modèles dans AEM.
Accédez au Page Article modèle situé à l’adresse : http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
Dans Structure mode, dans la fenêtre principale Conteneur de mises en page, sélectionnez la variable Stratégie en regard de l’icône Titre composant répertorié sous Composants autorisés:
Créez une nouvelle stratégie pour le composant Titre avec les valeurs suivantes :
Titre de la stratégie : Titre WKND*
Propriétés > Onglet Styles > Ajouter un nouveau style
Souligner : cmp-title--underline
Cliquez sur Terminé pour enregistrer les modifications apportées à la stratégie Titre.
La valeur cmp-title--underline
renseigne la classe CSS sur la balise div externe du balisage de HTML du composant.
En tant qu’auteur, appliquez le style souligné à certains composants du titre.
Accédez au La Skateparks article dans l’éditeur AEM Sites à l’adresse : http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
Dans Modifier , choisissez un composant Titre . Cliquez sur le bouton pinceau et sélectionnez la variable Souligner style :
À ce stade, aucune modification visible ne se produira en tant que underline
style n’a pas été implémenté. Dans l’exercice suivant, ce style est implémenté.
Cliquez sur le bouton Informations sur la page icon > Afficher comme publié(e) pour inspecter la page en dehors de l’éditeur d’AEM.
Utilisez les outils de développement de votre navigateur pour vérifier que le balisage autour du composant Titre comporte la classe CSS. cmp-title--underline
appliquée à la balise div externe.
<div class="title cmp-title--underline">
<div data-cmp-data-layer="{"title-b6450e9cab":{"@type":"wknd/components/title","repo:modifyDate":"2022-02-23T17:34:42Z","dc:title":"Vans Off the Wall Skatepark"}}"
id="title-b6450e9cab" class="cmp-title">
<h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2>
</div>
</div>
Implémentez ensuite le style Souligné à l’aide de la méthode ui.frontend de notre projet. Nous utiliserons le serveur de développement webpack fourni avec le ui.frontend pour prévisualiser les styles before déploiement sur une instance locale d’AEM.
Démarrez le watch
à partir de ui.frontend module :
$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm run watch
Cela lancera un processus qui surveille les modifications dans la ui.frontend
et synchronisez les modifications sur l’instance AEM.
Renvoyer votre IDE et ouvrir le fichier _title.scss
situé à l’adresse : ui.frontend/src/main/webpack/components/_title.scss
.
Introduisez une nouvelle règle ciblant la variable cmp-title--underline
Classe :
/* Default Title Styles */
.cmp-title {}
.cmp-title__text {}
.cmp-title__link {}
/* Add Title Underline Style */
.cmp-title--underline {
.cmp-title__text {
&:after {
display: block;
width: 84px;
padding-top: 8px;
content: '';
border-bottom: 2px solid $brand-primary;
}
}
}
Il est recommandé de toujours appliquer des styles de portée stricte au composant cible. Cela permet de s’assurer que les styles supplémentaires n’affectent pas d’autres zones de la page.
Tous les composants principaux sont conformes à Notation BEM. Il est recommandé de cibler la classe CSS externe lors de la création d’un style par défaut pour un composant. Une autre bonne pratique consiste à cibler les noms de classe spécifiés par la notation BEM des composants principaux plutôt que les éléments de HTML.
Revenez au navigateur et à la page AEM. Le style Souligné doit être ajouté :
Dans l’éditeur d’AEM, vous devriez maintenant pouvoir activer et désactiver le Souligner et voir les modifications reflétées visuellement.
Répétez ensuite les étapes similaires pour appliquer un style unique au Composant textuel. Le composant Texte a été ajouté par proxy au projet sous /apps/wknd/components/text
dans le ui.apps module . Les styles par défaut des éléments de paragraphe ont déjà été implémentés dans la variable ui.frontend.
Le Conceptions WKND Article contiennent un style unique pour le composant Texte avec un bloc de guillemet :
Ajoutez ensuite une nouvelle stratégie pour les composants Texte .
Accédez au Modèle de page d’article situé à l’adresse : http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
Dans Structure mode, dans la fenêtre principale Conteneur de mises en page, sélectionnez la variable Stratégie en regard de l’icône Texte composant répertorié sous Composants autorisés:
Mettez à jour la stratégie de composant Texte avec les valeurs suivantes :
Titre de la stratégie : Texte du contenu*
Modules externes > Styles de paragraphe > Activation des styles de paragraphe
Onglet Styles > Ajouter un nouveau style
Bloc entre guillemets : cmp-text--quote
Cliquez sur Terminé pour enregistrer les modifications apportées à la stratégie Texte.
Accédez au La Skateparks article dans l’éditeur AEM Sites à l’adresse : http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
Dans Modifier , choisissez un composant Texte . Modifiez le composant pour inclure un élément de guillemet :
Sélectionnez le composant de texte et cliquez sur le bouton pinceau et sélectionnez la variable Bloc entre guillemets style :
Utilisez les outils de développement du navigateur pour inspecter le balisage. Vous devriez voir le nom de la classe. cmp-text--quote
a été ajouté à la balise div outter du composant :
<!-- Quote Block style class added -->
<div class="text cmp-text--quote">
<div data-cmp-data-layer="{"text-60910f4b8d":{"@type":"wknd/components/text","repo:modifyDate":"2022-02-24T00:55:26Z","xdm:text":"<blockquote>&nbsp; &nbsp; &nbsp;&quot;There is no better place to shred then Los Angeles&quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n"}}" id="text-60910f4b8d" class="cmp-text">
<blockquote> "There is no better place to shred then Los Angeles"</blockquote>
<p>- Jacob Wester, Pro Skater</p>
</div>
</div>
Nous allons ensuite implémenter le style Bloc de citations à l’aide de la méthode ui.frontend de notre projet.
Si ce n’est pas déjà fait, démarrez la variable watch
à partir de ui.frontend module :
$ npm run watch
Mettre à jour le fichier text.scss
situé à l’adresse : ui.frontend/src/main/webpack/components/_text.scss
:
/* Default text style */
.cmp-text {}
.cmp-text__paragraph {}
/* WKND Text Quote style */
.cmp-text--quote {
.cmp-text {
background-color: $brand-third;
margin: 1em 0em;
padding: 1em;
blockquote {
border: none;
font-size: $font-size-large;
font-family: $font-family-serif;
padding: 14px 14px;
margin: 0;
margin-bottom: 0.5em;
&:after {
border-bottom: 2px solid $brand-primary; /*yellow border */
content: '';
display: block;
position: relative;
top: 0.25em;
width: 80px;
}
}
p {
font-family: $font-family-serif;
}
}
}
Dans ce cas, les éléments de HTML bruts sont ciblés par les styles. En effet, le composant Texte fournit un éditeur de texte enrichi pour les auteurs de contenu. La création de styles directement par rapport au contenu de l’éditeur de texte enrichi doit être effectuée avec soin et il est encore plus important d’étendre étroitement les styles.
Revenez à nouveau au navigateur et le style de bloc Devis est ajouté :
Arrêtez le serveur de développement Webpack.
Les composants de conteneur ont été utilisés pour créer la structure de base du modèle de page d’article et fournir les zones de dépôt permettant aux auteurs de contenu d’ajouter du contenu sur une page. Les conteneurs peuvent également tirer parti du système de style, offrant ainsi aux auteurs de contenu davantage d’options pour concevoir des mises en page.
Le Conteneur principal du modèle Page d’article contient les deux conteneurs pouvant être créés et d’une largeur fixe.
Conteneur principal dans le modèle de page d’article.
La politique de la variable Conteneur principal définit l’élément par défaut comme main
:
Le fichier CSS qui crée la variable Conteneur principal fixed est définie dans la variable ui.frontend module à ui.frontend/src/main/webpack/site/styles/container_main.scss
:
main.container {
padding: .5em 1em;
max-width: $max-content-width;
float: unset!important;
margin: 0 auto!important;
clear: both!important;
}
Au lieu de cibler la variable main
Élément de HTML, le système de style peut être utilisé pour créer un Largeur fixe dans le cadre de la stratégie Container . Le système de style permet aux utilisateurs de basculer entre les Largeur fixe et Largeur du flux conteneurs.
Félicitations, la page de l'article est presque entièrement stylisée et vous avez acquis une expérience pratique en utilisant le système de style AEM.
Découvrez les étapes de bout en bout pour créer une Composant d’AEM personnalisé qui affiche le contenu créé dans une boîte de dialogue et explore le développement d’un modèle Sling pour encapsuler la logique commerciale qui renseigne le code HTL du composant.
Afficher le code terminé sur GitHub ou passer en revue et déployer le code localement sur la branche Git tutorial/style-system-solution
.
tutorial/style-system-solution
branche.