Ontwikkelen voor paginaverschil developing-for-page-difference
In deze video ziet u hoe u aangepaste stijlen voor de functionaliteit Paginaverschil van AEM Sites kunt gebruiken.
Paginaverschilstijlen aanpassen customizing-page-difference-styles
my-project .AEM paginaverschil verkrijgt de CSS OOTB via een directe load van /libs/cq/gui/components/common/admin/diffservice/clientlibs/diffservice/css/htmldiff.css .
Wegens deze directe lading van CSS eerder dan het gebruiken van een categorie van de cliëntbibliotheek, moeten wij een ander injectiepunt voor de douanestijlen vinden, en dit douaneinjectiepunt is het auteursclientlib van het project.
Dit heeft het voordeel om deze de stijloverschrijvingen van douanestijlen toe te staan om huurspecifiek te zijn.
Maak de ontwerpende clientlib klaar prepare-the-authoring-clientlib
Zorg ervoor dat er een authoring clientlib voor uw project bestaat op /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]"/>
Aangepaste CSS opgeven provide-the-custom-css
Voeg aan de authoring clientlib a css.txt van het project toe dat naar minder dossier wijst dat de met voeten tredende stijlen zal verstrekken. Minderwordt aangewezen toe te schrijven aan zijn vele geschikte eigenschappen, met inbegrip van klasse-verpakken die in dit voorbeeld leveraged is.
base=./css
htmldiff.less
Maak het less -bestand dat de stijloverschrijvingen in /apps/my-project/clientlibs/authoring/css/htmldiff.less bevat en geef desgewenst de overtrekstijlen op.
/* 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;
}
}
De CSS van de ontwerpclient opnemen via de paginacomponent include-the-authoring-clientlib-css-via-the-page-component
Neem de categorie client-libs die u gebruikt, direct vóór de tag </head> op in de basispagina van het project /apps/my-project/components/structure/page/customheaderlibs.html om ervoor te zorgen dat de stijlen worden geladen.
Deze stijlen moeten worden beperkt tot de modi Edit en preview WCM.
<head>
...
<sly data-sly-test="${wcmmode.preview || wcmmode.edit}"
data-sly-call="${clientLib.css @ categories='my-project.authoring'}"/>
</head>
Het eindresultaat van een diff'd pagina met de bovenstaande stijlen toegepast zou er als volgt uitzien (HTML toegevoegd en Component gewijzigd).
