为页面差异进行开发

此视频演示了如何为AEM Sites的“页面差异”功能提供自定义样式。

自定义页面差异样式

注意

此视频会将自定义CSS添加到we.Retail客户端库中,因此,应对定制者的AEM Sites项目进行这些更改;在以下示例代码中:my-project

AEM页面差异通过直接加载/libs/cq/gui/components/common/admin/diffservice/clientlibs/diffservice/css/htmldiff.css获取OOTB CSS。

由于CSS的直接加载而不是使用客户端库类别,因此我们必须为自定义样式找到另一个注入点,并且此自定义注入点是项目的创作clientlib。

这样做的好处是允许这些自定义样式覆盖特定于租户。

准备创作clientlib

确保/apps/my-project/clientlib/authoring.存在authoring项目的clientlib

<?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]"/>

提供自定义CSS

authoring clientlib添加到项目的css.txt中,指向将提供覆盖样式的较小文件。 🔗 首选使用次数少,因为它具有许多方便的功能,包括本例中使用的类封装。

base=./css

htmldiff.less

创建在/apps/my-project/clientlibs/authoring/css/htmldiff.less处包含样式覆盖的less文件,并根据需要提供覆盖样式。

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

通过页面组件包含创作clientlib CSS

将创作clientlibs类别包含在项目基页/apps/my-project/components/structure/page/customheaderlibs.html的标记之前,直接放在</head>标记之前,以确保加载样式。

这些样式应限制为Edit和preview WCM模式。

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

应用了上述样式的差异页面的最终结果将如下所示(已添加HTML且组件已更改)。

页面差异

其他资源

在此页面上