此影片說明如何為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。
這樣的好處是,允許這些自訂樣式覆寫是租用戶專用的。
確保/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]"/>
新增至專案的authoring
clientlib a css.txt
,此檔案指向將提供覆寫樣式的較少檔案。 🔗 Less是偏好使用的選項,因為它有許多便利的功能,包括此範例中採用的類別包裝。
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;
}
}
將製作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且元件已變更)。