为MultiZone布局创建自定义模板 creating-custom-templates-multizone

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

主题：
开发 Screens

创建对象：

中级
开发人员

本页展示如何为多区域布局创建自定义模板。

重要注意事项 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项目。
从您的AEMCRXDE Lite> “工具”>“CRXDE Lite” 导航到工具。

在 apps 下创建标题为 customtemplate 的文件夹。同样，在 customtemplate 下创建另一个名为 template 的文件夹，如下图所示。

note note
NOTE
每次创建、编辑内容或将CRXDE Lite复制到任何节点时，在Node的操作栏中单击全部保存。否则，您无法提交更新。

将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中配置的样式。