Cette vidéo montre comment fournir des styles personnalisés pour la fonctionnalité Différence de page d’AEM Sites.
Cette vidéo ajoute une page CSS personnalisée à la bibliothèque cliente we.Retail, où ces modifications doivent être apportées au projet AEM Sites du personnalisateur. dans l’exemple de code ci-dessous : my-project
.
AEM différence de page obtient le CSS prêt à l’emploi via un chargement direct de /libs/cq/gui/components/common/admin/diffservice/clientlibs/diffservice/css/htmldiff.css
.
En raison de ce chargement direct de CSS plutôt que d’utiliser une catégorie de bibliothèque cliente, nous devons trouver un autre point d’injection pour les styles personnalisés, et ce point d’injection personnalisé est la bibliothèque cliente de création du projet.
Cela a l’avantage de permettre à ces remplacements de style personnalisés d’être spécifiques au client.
Vérifiez l’existence d’une bibliothèque cliente authoring
pour votre projet à l’adresse /apps/my-project/clientlib/authoring.
.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[my-project.authoring]"/>
Ajoutez à la authoring
bibliothèque cliente du projet une css.txt
qui pointe vers le fichier less qui fournira les styles de remplacement. 🔗 Lessis est préférable en raison de ses nombreuses fonctionnalités pratiques, notamment l’encapsulage de classe utilisé dans cet exemple.
base=./css
htmldiff.less
Créez le fichier less
qui contient les remplacements de style à /apps/my-project/clientlibs/authoring/css/htmldiff.less
et fournissez les styles de remplacement selon vos besoins.
/* Wrap with body to gives these rules more specificity than the OOTB */
body {
/* .html-XXXX are the styles that wrap text that has been added or removed */
.html-added {
background-color: transparent;
color: initial;
text-decoration: none;
border-bottom: solid 2px limegreen;
}
.html-removed {
background-color: transparent;
color: initial;
text-decoration: none;
border-bottom: solid 2px red;
}
/* .cq-component-XXXX require !important as the class these are overriding uses it. */
.cq-component-changed {
border: 2px dashed #B9DAFF !important;
border-radius: 8px;
}
.cq-component-moved {
border: 2px solid #B9DAFF !important;
border-radius: 8px;
}
.cq-component-added {
border: 2px solid #CCEBB8 !important;
border-radius: 8px;
}
.cq-component-removed {
border: 2px solid #FFCCCC !important;
border-radius: 8px;
}
}
Insérez la catégorie clientlibs de création dans la /apps/my-project/components/structure/page/customheaderlibs.html
de la page de base du projet directement avant la balise </head>
pour vous assurer que les styles sont chargés.
Ces styles doivent être limités aux modes de gestion de contenu web Edit et preview.
<head>
...
<sly data-sly-test="${wcmmode.preview || wcmmode.edit}"
data-sly-call="${clientLib.css @ categories='my-project.authoring'}"/>
</head>
Le résultat final d’une page diff avec les styles ci-dessus appliqués ressemblerait à ceci (HTML ajouté et composant modifié).