Documentatie AEM Tutorials voor AEM AEM Sites-tutorials

Ontwikkelen voor paginaverschil

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:
Schrijven

Gemaakt voor:

Beginner
Ontwikkelaar

In deze video ziet u hoe u aangepaste stijlen voor de functionaliteit Paginaverschil van AEM Sites kunt gebruiken.

Paginaverschilstijlen aanpassen

video poster

https://video.tv.adobe.com/v/18871?quality=12&learn=on

NOTE

In deze video worden aangepaste CSS toegevoegd aan de clientbibliotheek we.Retail, waar deze wijzigingen moeten worden aangebracht in het AEM Sites-project van de klant; in de voorbeeldcode hieronder: 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

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

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

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

verschil van de Pagina

Aanvullende bronnen

recommendation-more-help