为多区域布局创建自定义模板

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

重要注意事项

在多区域布局中创建自定义模板之前，必须注意以下两个重要注意事项：

固定像素大小或百分比:

您必须决定是对自定义布局的不同区域使用固定像素大小，还是要使用百分比创建自定义布局。

注意

使用百分比设置自定义布局的区域的好处是可以在各种屏幕大小上重复使用模板。

命名约定:

在您了解如何创建要在AEM Screens项目中使用的自定义多区域模板之前，建议您了解要创建的模板的版本。

布局名称	描述
Left20-LandscapeHD3Zone	指3区横向布局，它允许您创建3个区域，区域1为左侧水平和垂直屏幕的20%，区域2为水平屏幕的80%，右侧垂直屏幕的20%，区域3为水平屏幕的100%，长宽比为16:9的垂直屏幕的80%
Upper20-PortraitHD2Zone	指从顶部覆盖屏幕20%的2区纵向模板，长宽比为16:9
Right20-LandscapeSD3Zone	指从右侧覆盖屏幕20%的3区模板，长宽比为4:3

重要

自定义布局中定义的区域可能与整个布局的整体长宽比不匹配。此文档中遵循的命名约定将自定义布局的宽高比指定为整体。

示例用例Left20-LandscapeHD3Zone布局

请按照以下部分创建具有以下配置的自定义模板Left20-LandscapeHD3Zone:

Left20 指左侧的顶部区域，覆盖20%的水平和垂直屏幕大小。
横向是指屏幕方向
HD 将宽高比称为16:9
3 Zone是显示器的三个区域

多区域布局的可视表示

Left20-LandscapeHD3Zone布局允许您在项目中创建以下多区域布局：

创建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更新为Template for 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。
参照步骤(4)，在该步骤中，您复制了左侧模板，您将在my-custom-layout/jcr:content下视图3个响应式网格。在cq:cssClass属性中，将自定义css类添加到每个响应式网格，例如，my-custom-layout—top-left for r1c1节点。

同样，为my-custom-layout—top-right（对于r1c2）和my-custom-layout—bottom（对于r2c1）节点)添加。

注意

这些自定义类将用在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样式问题。