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

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

重要注意事项

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

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

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

    注意

    使用百分比设置自定义布局的区域的益处允许您在各种屏幕大小上重复使用模板。

  2. 命名约定:

    在您了解如何创建要在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 区域是指显示屏的三个区域

多区域布局的可视表示

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

图像

创建Left20-LandscapeHD3Zone布局

按照以下步骤为AEM Screens项目创建Left20-LandscapeHD3Zone布局：

  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. 导航到​offline-config​节点，将​jcr:title​更新为​Left20-LandscapeHD3Zone。/apps/customtemplate/template/my-custom-layout/jcr:content/offline-config

    图像

  8. 从/apps/customtemplate/template/my-custom-layout/jcr:content导航到​my-custom-template​的​jcr:content​属性，并将​cq:cssClass​属性更新为​aem-Layout my-custom-layout。

    图像

  9. 在步骤(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)。

  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)中创建的Screens项目，然后选择​渠道​文件夹。

    图像

  2. 单击操作栏中的​创建，然后从​创建​向导中选择模板​Left20-LandscapeHD3Zone。

    图像

  3. 使用自定义模板创建渠道后，您可以从编辑器将资产添加到渠道。 以下预览显示自定义模板中的图像。

    图像

将图像插入为背景层

您可以将图像作为背景图层插入布局：

您可以调整CSS规则，使用所谓的“data-uri”，并直接在CSS文件中嵌入图像（Base64编码），您在（步骤13）static.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: …; }

在此页面上