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

NOTE
Deze video voegt aangepaste CSS aan de wij.Retail cliƫntbibliotheek toe, waar aangezien deze veranderingen in het project van AEM Sites van de klant zouden moeten worden aangebracht; in de voorbeeldcode hieronder: my-project.

AEM paginaverschil verkrijgt de OOTB CSS via een directe lading 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

Zorgen voor het bestaan van een authoring clientlib voor uw project 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

Toevoegen aan de projecten authoring clientlib css.txt dat wijst naar het minder bestand dat de overschrijvende stijlen levert. Minder heeft de voorkeur vanwege de vele handige functies, waaronder klassenomloop, die in dit voorbeeld wordt gebruikt.

base=./css

htmldiff.less

Maak de less bestand met de stijloverschrijvingen op /apps/my-project/clientlibs/authoring/css/htmldiff.lessen 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-pc's voor het schrijven op in de basispagina van het project /apps/my-project/components/structure/page/customheaderlibs.html rechtstreeks voor de </head> om ervoor te zorgen dat de stijlen worden geladen.

Deze stijlen moeten beperkt blijven tot Edit en preview WCM-modi.

<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).

Paginaverschil

Aanvullende bronnen additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d