Utveckla för sidskillnader developing-for-page-difference
I den här videon visas hur du kan skapa anpassade format för AEM Sites siddifferensfunktion.
Anpassa siddifferensformat customizing-page-difference-styles
my-project.AEM sidskillnad hämtar OTB-CSS via en direktinläsning av /libs/cq/gui/components/common/admin/diffservice/clientlibs/diffservice/css/htmldiff.css.
På grund av den här direkta inläsningen av CSS i stället för att använda en klientbibliotekskategori, måste vi hitta en annan inmatningspunkt för de anpassade formaten, och den här anpassade inmatningspunkten är projektets redigeringsklient.
Fördelen med detta är att dessa anpassade åsidosättningar av stilar kan vara klientspecifika.
Förbered redigeringsklientlib prepare-the-authoring-clientlib
Kontrollera att det finns en authoring-klientlib för ditt projekt på /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]"/>
Ange anpassad CSS provide-the-custom-css
Lägg till authoring-klienten i projektets css.txt som pekar på den mindre fil som kommer att tillhandahålla de åsidosättande formaten. Mindre rekommenderas eftersom det finns många praktiska funktioner, bland annat klassomslutning som används i det här exemplet.
base=./css
htmldiff.less
Skapa filen less som innehåller formatåsidosättningarna på /apps/my-project/clientlibs/authoring/css/htmldiff.less och ange de överliggande formaten efter behov.
/* 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;
}
}
Inkludera redigeringsklientlib-CSS via sidkomponenten include-the-authoring-clientlib-css-via-the-page-component
Inkludera kategorin för redigeringsklienter i projektets bassidas /apps/my-project/components/structure/page/customheaderlibs.html direkt före taggen </head> för att säkerställa att formaten läses in.
Dessa format bör begränsas till Edit- och preview WCM-lägen.
<head>
...
<sly data-sly-test="${wcmmode.preview || wcmmode.edit}"
data-sly-call="${clientLib.css @ categories='my-project.authoring'}"/>
</head>
Slutresultatet av en annan d-sida där formaten ovan användes skulle se ut så här (HTML added and Component changed).
