Desarrollo para la diferencia de página developing-for-page-difference

Este vídeo muestra cómo proporcionar estilos personalizados para la funcionalidad Diferencia de páginas de AEM Sites.

Personalizar estilos de diferencia de página customizing-page-difference-styles

NOTE
Este vídeo agrega CSS personalizado a la biblioteca de cliente de we.Retail, donde los cambios se deben realizar en el proyecto AEM Sites del personalizador; en el código de ejemplo siguiente: my-project.

Al AEM la diferencia de la página, se obtiene el CSS OOTB mediante una carga directa de /libs/cq/gui/components/common/admin/diffservice/clientlibs/diffservice/css/htmldiff.css.

Debido a esta carga directa de CSS en lugar de utilizar una categoría de biblioteca de cliente, debemos encontrar otro punto de inyección para los estilos personalizados y este punto de inyección personalizado es la clientlib de creación del proyecto.

Esto tiene la ventaja de permitir que estas invalidaciones de estilo personalizadas sean específicas del inquilino.

Preparar la clientlib de creación prepare-the-authoring-clientlib

Asegúrese de que su proyecto tenga authoring clientlib en /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]"/>

Proporcionar el CSS personalizado provide-the-custom-css

Agregue a la clientlib authoring del proyecto un css.txt que apunte al archivo Less que proporcionará los estilos de anulación. Se prefiere Less debido a sus muchas características convenientes, incluyendo el ajuste de clase que se aprovecha en este ejemplo.

base=./css

htmldiff.less

Cree el archivo less que contiene las invalidaciones de estilo en /apps/my-project/clientlibs/authoring/css/htmldiff.less y proporcione los estilos de invalidación según sea necesario.

/* 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;
    }
}

Incluir el CSS clientlib de creación a través del componente de página include-the-authoring-clientlib-css-via-the-page-component

Incluya la categoría clientlibs de creación en la página base del proyecto /apps/my-project/components/structure/page/customheaderlibs.html directamente antes de la etiqueta </head> para asegurarse de que se cargan los estilos.

Estos estilos deben estar limitados a los modos WCM Editar y vista previa.

<head>
  ...
  <sly data-sly-test="${wcmmode.preview || wcmmode.edit}"
       data-sly-call="${clientLib.css @ categories='my-project.authoring'}"/>
</head>

El resultado final de una página de comparación con los estilos anteriores aplicados tendría este aspecto (HTML añadido y Componente cambiado).

Diferencia de página

Recursos adicionales additional-resources

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