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

Last update: Tue Apr 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
Developing Screens

建立對象：

Intermediate
Developer

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

重要考量 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

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

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

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

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

複製左方欄範本來源 /libs/screens/core/templates/splitscreenchannel/lbar-left 至 /apps/customtemplate/template.
重新命名複製的左欄 (/apps/customtemplate/template)至 my-custom-layout.
瀏覽至 /apps/customtemplate/template/my-custom-layout 並更新屬性 jcr:description 至 範本Left20-LandscapeHD3Zone 和 jcr:title 至 Left20-LandscapeHD3Zone.
導覽至 offline-config 節點來源 /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config 並更新 jcr:title 至 Left20-LandscapeHD3Zone.
導覽至 jcr:content 屬性 my-custom-template 從 /apps/customtemplate/template/my-custom-layout/jcr:content 並更新 cq:cssClass 屬性，方便您使用 aem-Layout my-custom-layout.

參照您複製lbar左側範本的步驟(4)，您可以檢視下方的三個回應式格點 my-custom-layout/jcr:content. 將自訂css類別新增至 cq:cssClass 屬性，例如， my-custom-layout — 左上方 的 r1c1 節點。

同樣地，新增 my-custom-layout — 右上方 的 r1c2 和 my-custom-layout — 底部 的 r2c1 節點。

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 並更新屬性 jcr:title 之 custom-template-designs 至 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中設定的樣式。