為多區域佈局建立自定義模板

此頁面將展示如何為多區域版面建立自訂範本。

重要考量

在以多區域佈局建立自定義模板之前，必須注意以下兩點：

固定像素大小或百分比:

您必須決定要針對不同區域使用固定像素大小來進行自訂配置，還是要使用百分比建立自訂配置。

注意

使用百分比為自訂版面設定區域的好處是，您可以在各種螢幕大小上重複使用範本。

命名慣例:

在了解如何建立要在AEM Screens專案中使用的自訂多區域範本之前，建議您先了解您要建立的範本的概念。

版面名稱	說明
Left20-LandscapeHD3Zone	指的是3區橫向佈局，可讓您建立3個區域，其中區域1為左側水準和垂直螢幕的20%，區域2為水準螢幕的80%，垂直螢幕的右側對齊為20%，區域3為水準螢幕的100%，垂直螢幕的80%，長寬比為16:9
Upper20-PorraitHD2Zone	是指從上方覆蓋20%螢幕的2區縱向範本，長寬比為16:9
Right20-LandscapeSD3Zone	是指從右側覆蓋20%螢幕的3區範本，長寬比為4:3

重要

在自訂配置中定義的區域可能與整個佈局的整體外觀比例不匹配。本檔案中遵循的命名慣例會將自訂版面的外觀比例指定為整體。

示例使用案例Left20-LandscapeHD3Zone佈局

請依照下節，使用下列設定建立自訂範本Left20-LandscapeHD3Zone:

Left20 是指位於左側的頂部區域，覆蓋了20%的水準和垂直螢幕大小。
直向是指螢幕方向
HD將外觀比率表示為16:9
3 區域是指顯示器的三個區域

多區域佈局的可視表示

Left20-LandscapeHD3Zone Layout允許您在項目中建立以下多區域佈局：

建立Left20-LandscapeHD3Zone佈局

請依照下列步驟，為AEM Screens專案建立Left20-LandscapeHD3Zone版面：

建立標題為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更新至Left20-LandcaseHD3Zone的範本，以及將jcr:title更新至Left20-LandcaseHD3Zone。
從/apps/customtemplate/template/my-custom-layout/jcr:content/offline-config導覽至offline-config節點，並將jcr:title更新至Left20-LandcaseHD3Zone。
從/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— 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樣式問題。