本頁面展示如何建立多區域版面的自訂範本。
在多區域版面中建立自訂範本之前,您必須注意兩個重要考量:
固定像素大小或百分比:
您必須決定是否針對自訂版面的不同區域使用固定像素大小,或是您想要使用百分比建立自訂版面。
使用百分比來設定自訂版面的區域的好處,可讓您在各種螢幕大小上重複使用範本。
命名慣例:
在您瞭解如何建立自訂多區域範本以用於AEM Screens專案之前,建議您先瞭解您要建立的範本版本。
版面名稱 | 說明 |
---|---|
Left20-LandscapeHD3Zone | 指3區橫向版面配置,可讓您建立3個區域,其中區域1為左側水準和垂直螢幕的20%、區域2為水準螢幕的80%、右側垂直螢幕的20%、區域3為水準螢幕的100%,垂直螢幕的80%,寬高比為16:9 |
Upper20-PortraitHD2Zone | 指從上方覆蓋20%螢幕的2區縱向範本,長寬比為16:9 |
Right20-LandscapeSD3Zone | 指從右側涵蓋20%螢幕的3區範本,長寬比為4:3 |
在自訂版面中定義的區域可能不符合整個版面的整體外觀比例。 本檔案中遵循的命名慣例會指定自訂版面的整體外觀比例。
請依照下節,建立具有下列組態的自訂範本Left20-LandscapeHD3Zone:
Left20-LandscapeHD3Zone Layout可讓您在專案中建立下列多區域版面:
請依照下列步驟,為AEM Screens專案建立Left20-LandscapeHD3Zone Layout:
建立標題為customtemplate的AEM Screens專案。
從您的AEM實例—>工具—> CRXDE Lite導覽至CRXDE Lite。
在apps下建立名為customtemplate的資料夾。 同樣地,在customtemplate下建立名為template的另一個資料夾,如下圖所示。
建議您每次建立、編輯或複製內容至任何節點時,從CRXDE Lite的動作列按一下「全部儲存」,否則無法提交更新。
將左欄範本從/libs/screens/core/templates/splitscreenchannel/lbar-left
複製至/apps/customtemplate/template
。
將複製的lbar-left(/apps/customtemplate/template
)重新命名為my-custom-layout。
導覽至/apps/customtemplate/template/my-custom-layout
並將屬性jcr:description更新為Template for Left20-LandscapeHD3Zone和jcr:title更新為Left20-LandscapeHD3Zone。
從/apps/customtemplate/template/my-custom-layout/jcr:content/offline-config
導覽至offline-config節點,並將jcr:title更新為Left20-LandscapeHD3Zone。
從/apps/customtemplate/template/my-custom-layout/jcr:content
導覽至jcr:content屬性的my-custom-template,並將cq:cssClass屬性更新為aem-Layout my-custom-layout。
參考步驟(4),在步驟中,您複製了左側的模板,您將在my-custom-layout/jcr:content
下查看3個自適應網格。 在cq:cssClass屬性中,將自訂css類別新增至每個回應式格線,例如my-custom-layout— top-left for r1c1節點。
同樣地,為r1c2新增my-custom-layout—top-right,為r2c1節點新增my-custom-layout—bottom。
這些自訂類別將用於css中,以設定這些互動式格點的寬度/高度。
您可以根據所需的網格總數來添加或刪除自適應網格。 在此範例中,我們展示第一列的2個格點和第二列的1個格點,因此共有3個回應式格點(r1c1、r1c2、r2c1)。
將/libs/settings/wcm/designs/screens
複製至/apps/settings/wcm/designs/
,並將複製的設計重新命名為custom-template-designs。
導覽至/apps/settings/wcm/designs/custom-template-designs
並將custom-template-designs的屬性jcr:title更新為customtemplate-design。
導覽至/apps/settings/wcm/designs/custom-template-designs
並建立檔案static.css。
將內容複製到static.css
檔案:
/*my-custom-layout styles*/
.cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
width:20%;
height: 36%;
float: left !important;
}
.cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
width:80%;
height: 36%;
float: left !important;
}
.cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
width:100%;
height: 64%;
}
您可以更新百分比以符合自訂範本的需求。
導覽至/apps/<project>/templates/my-custom-layout/jcr:content
並將屬性cq:designPath更新至/apps/settings/wcm/designs/customtemplate-designs
,以載入static.css中設定的樣式
建議您輸入所有樣式,而非複製或貼上,這會造成空格造成css樣式問題。
請依照下列步驟,在您的AEM Screens專案中使用上述自訂範本:
導覽至您在步驟(1)中建立的畫面專案,並選取Channels資料夾。
從動作列按一下「建立」「建立」,並從「建立」精靈中選取範本 Left20-LandscapeHD3Zone 。
使用自訂範本建立渠道後,您就可以從編輯器將資產新增至渠道。 下列預覽顯示自訂範本中的影像。
您可以將影像插入版面中做為背景圖層:
您可以調整CSS規則,使用稱為"data-uri"的項目,並直接將您在(步驟13)static.css中建立的影像(Base64編碼)內嵌在CSS檔案中。
這如下所述:
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }
或者,您可以遵循下列步驟:
若要變更背景顏色,請將下列程式碼新增至xml檔案(步驟13)static.css。
.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }