此页将展示如何为多区域布局创建自定义模板。
在多区域布局中创建自定义模板之前,必须注意以下两个重要注意事项:
固定像素大小或百分比:
您必须决定是对自定义布局的不同区域使用固定像素大小,还是要使用百分比创建自定义布局。
使用百分比设置自定义布局的区域的益处允许您在各种屏幕大小上重复使用模板。
命名约定:
在您了解如何创建要在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布局允许您在项目中创建以下多区域布局:
按照以下步骤为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。
导航到offline-config节点,将jcr:title更新为Left20-LandscapeHD3Zone。/apps/customtemplate/template/my-custom-layout/jcr:content/offline-config
从/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类添加到每个响应式网格,例如,r1c1节点的my-custom-layout—top-left。
同样,为my-custom-layout—top-right(对于r1c2)和my-custom-layout—bottom(对于r2c1节点)添加<a0/>。
这些自定义类将用在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样式问题。
请按照以下步骤在您的AEM Screens项目中使用上述自定义模板:
导航到您在步骤(1)中创建的Screens项目,然后选择渠道文件夹。
单击操作栏中的创建,然后从创建向导中选择模板Left20-LandscapeHD3Zone。
使用自定义模板创建渠道后,您可以从编辑器将资产添加到渠道。 以下预览显示自定义模板中的图像。
您可以将图像作为背景图层插入布局:
您可以调整CSS规则,使用所谓的“data-uri”,并直接在CSS文件中嵌入图像(Base64编码),您在(步骤13)static.css中创建。
具体操作如下:
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }
或者,您可以按照以下步骤操作:
要更改背景颜色,请向xml文件(步骤13)static.css添加以下代码。
.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }