建立MultiZone配置圖的自訂範本 creating-custom-templates-multizone

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
開發熒幕

建立對象：

中繼
開發人員

此頁面說明如何建立多區域版面的自訂範本。

重要考量 considerations

以多區域版面配置建立自訂範本之前，您必須注意兩個重要事項：

固定畫素大小或百分比：

決定是否要針對自訂配置的不同區域使用固定畫素大小，或是要使用百分比建立自訂配置。

note note
NOTE
使用百分比來設定自訂配置區域的好處，可讓您在各種熒幕大小上重複使用範本。

命名慣例：

它有助於瞭解如何建立自訂多區域範本，以便在AEM Screens專案中使用。但首先，您必須瞭解要建立的範本的措辭。

table 0-row-2 1-row-2 2-row-2 3-row-2
配置名稱	說明
`Left20-LandscapeHD3Zone`	三區域橫向配置可讓您建立三個區域：區域1是水準熒幕與垂直熒幕的20%，從左側區域2是水準熒幕的80%，垂直熒幕的20%是向右對齊 *區域3是水準熒幕的100%與垂直熒幕的80%。外觀比例為16:9
`Upper20-PortraitHD2Zone`	雙區直向範本從上到下佔熒幕的20%，外觀比例為16:9
`Right20-LandscapeSD3Zone`	三區範本從右側涵蓋熒幕的20%，外觀比例為4:3

note important
IMPORTANT
自訂配置中定義的區域可能與整個配置的整體外觀比例不符。本檔案遵循的命名慣例會指定自訂配置整體之外觀比例。

使用案例`Left20-LandscapeHD3Zone`配置範例 custom-template-one

請依照下列章節內容，使用下列設定來建立自訂範本 Left20-LandscapeHD3Zone：

Left20 — 左側的頂部區域涵蓋水平與垂直熒幕大小的20%。
Landscape — 熒幕方向。
HD — 外觀比例為16:9。
3Zone — 三個顯示區域。

多區域配置的視覺化表示法 multi-layout-visual-one

Left20-LandscapeHD3Zone配置可讓您在專案中建立下列多區域配置：

建立`Left20-LandscapeHD3Zone`配置 landscape-layout-one

請依照下列步驟，為AEM Screens專案建立Left20-LandscapeHD3Zone配置。

建立標題為 customtemplate 的AEM Screens專案。
從您的AEM執行個體> 「工具」 > CRXDE Lite 瀏覽至 CRXDE Lite。

在 應用程式 下建立標題為 customtemplate 的資料夾。同樣地，在「customtemplate」下建立另一個標題為「範本」的資料夾，如下圖所示。

note note
NOTE
每次建立、編輯內容或將內容複製到任何節點時，按一下CRXDE Lite中動作列的「儲存全部****」。否則，您無法認可更新。

將lbar-left範本從/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-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瀏覽至 my-custom-template 的 jcr:content 屬性，並更新 cq:cssClass 屬性，以便您可以使用 aem-Layout my-custom-layout。

參考您複製lbar左側範本的步驟(4)，您可以在my-custom-layout/jcr:content下檢視三個回應式格線。在 cq:cssClass 屬性中的每個回應式格線中新增自訂css類別，例如 r1c1 節點的 my-custom-layout-top-left。

同樣地，為 r1c2 新增 my-custom-layout-top-right，並為 r2c1 節點新增 my-custom-layout-bottom。

note note
NOTE
這些自訂類別用於css，以設定這些回應式格點的寬度/高度。

note note
NOTE
您可以根據所要的格點總數來新增或移除回應式格點。在此範例中，第一列中有兩個網格，第二列有一個網格，因此總共有三個回應式網格(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檔案：

code language-shell

code language-shell
`/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%; }`

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

note note
NOTE
您可以更新百分比以符合自訂範本的要求。

導覽至/apps/<project>/templates/my-custom-layout/jcr:content並將屬性 cq:designPath 更新為/apps/settings/wcm/designs/customtemplate-designs，以便載入在static.css中設定的樣式。