ページの違いに対する開発

このビデオでは、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のこの直接読み込みのため、カスタムスタイルに別の挿入ポイントを見つける必要があります。このカスタム挿入ポイントは、プロジェクトのオーサリングクライアントライブラリです。

これには、これらのカスタムスタイルの上書きをテナント固有にできるという利点があります。

オーサリングクライアントライブラリの準備

/apps/my-project/clientlib/authoring.にプロジェクト用の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]"/>

カスタムCSSの提供

上書きスタイルを提供するLESSファイルを指すプロジェクトのauthoringクライアントライブラリ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;
    }
}

ページコンポーネントを介してオーサリングクライアントライブラリCSSを含める

オーサリングclientlibsカテゴリをプロジェクトの基本ページの/apps/my-project/components/structure/page/customheaderlibs.htmlの</head>タグの直前に含めて、スタイルが読み込まれるようにします。

これらのスタイルは、編集とプレビューのWCMモードに制限する必要があります。

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

上記のスタイルが適用された差分ページの最終結果は、次のようになります（HTMLが追加され、コンポーネントが変更されました）。

ページの差