建立多區域版面的自訂範本

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

重要注意事項

在多區域版面中建立自訂範本之前，您必須注意兩個重要考量：

  1. 固定像素大小或百分比:

    您必須決定是否針對自訂版面的不同區域使用固定像素大小，或是您想要使用百分比建立自訂版面。

    注意

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

  2. 命名慣例:

    在您瞭解如何建立自訂多區域範本以用於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 Layout

請依照下節，建立具有下列組態的自訂範本​Left20-LandscapeHD3Zone:

  • Left20 是指左側最上方的區域，涵蓋20%的水準和垂直螢幕大小。
  • 版 面設計指螢幕方向
  • ​​HD將寬高比指定為16:9
  • 3 Zonerears the 3個顯示區

多區域佈局的可視表示

Left20-LandscapeHD3Zone Layout可讓您在專案中建立下列多區域版面：

影像

建立Left20-LandscapeHD3Zone版面

請依照下列步驟，為AEM Screens專案建立Left20-LandscapeHD3Zone Layout:

  1. 建立標題為​customtemplate​的AEM Screens專案。

    影像

  2. 從您的AEM實例—>工具—> CRXDE Lite​導覽至​CRXDE Lite。

  3. 在​apps​下建立名為​customtemplate​的資料夾。 同樣地，在​customtemplate​下建立名為​template​的另一個資料夾，如下圖所示。

    影像

    注意

    建議您每次建立、編輯或複製內容至任何節點時，從CRXDE Lite的動作列按一下「全部儲存」，否則無法提交更新。

  4. 將左欄範本從/libs/screens/core/templates/splitscreenchannel/lbar-left複製至/apps/customtemplate/template。

  5. 將複製的​lbar-left(/apps/customtemplate/template)重新命名為​my-custom-layout。
    影像

  6. 導覽至/apps/customtemplate/template/my-custom-layout並將屬性​jcr:description​更新為​Template for Left20-LandscapeHD3Zone​和​jcr:title​更新為​Left20-LandscapeHD3Zone。

    影像

  7. 從/apps/customtemplate/template/my-custom-layout/jcr:content/offline-config導覽至​offline-config​節點，並將​jcr:title​更新為​Left20-LandscapeHD3Zone。

    影像

  8. 從/apps/customtemplate/template/my-custom-layout/jcr:content導覽至​jcr:content​屬性的​my-custom-template，並將​cq:cssClass​屬性更新為​aem-Layout my-custom-layout。

    影像

  9. 參考步驟(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)。

  10. 將/libs/settings/wcm/designs/screens複製至/apps/settings/wcm/designs/，並將複製的設計重新命名為​custom-template-designs。

  11. 導覽至/apps/settings/wcm/designs/custom-template-designs並將​custom-template-designs​的屬性​jcr:title​更新為​customtemplate-design。

  12. 導覽至/apps/settings/wcm/designs/custom-template-designs並建立檔案static.css。

  13. 將內容複製到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%;
  }
    注意

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

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

    注意

    建議您輸入所有樣式，而非複製或貼上，這會造成空格造成css樣式問題。

查看結果

請依照下列步驟，在您的AEM Screens專案中使用上述自訂範本：

  1. 導覽至您在步驟(1)中建立的畫面專案，並選取​Channels​資料夾。

    影像

  2. 從動作列按一下「建立」「建立」，並從​「建立」精靈中選取範本 Left20-LandscapeHD3Zone 。

    影像

  3. 使用自訂範本建立渠道後，您就可以從編輯器將資產新增至渠道。 下列預覽顯示自訂範本中的影像。

    影像

將影像插入為背景圖層

您可以將影像插入版面中做為背景圖層：

您可以調整CSS規則，使用稱為"data-uri"的項目，並直接將您在（步驟13）static.css​中建立的影像（Base64編碼）內嵌在CSS檔案中。

這如下所述：
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }

或者，您可以遵循下列步驟：

  1. 請確定影像是否包含在頻道的離線設定中
  2. 使用上述CSS中影像的直接連結，而非「data-uri」變體

更新背景顏色

若要變更背景顏色，請將下列程式碼新增至xml檔案（步驟13）static.css。

.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }

本頁內容