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

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

重要注意事项

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

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

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

    注意

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

  2. 命名约定:

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

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

    自定义布局中定义的区域可能与整个布局的整体纵横比不匹配。 本文档中遵循的命名约定指定了自定义布局的整体宽高比。

示例用例Left20-LandscapeHD3Zone布局

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

  • Left20 是指左侧顶部的区域，覆盖了20%的水平和垂直屏幕大小。
  • ​​横向是指屏幕方向
  • ​​高清是指宽高比为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​更新为​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— r1c1 节点的左上角。

    图像

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

    注意

    这些自定义类将用在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文件（在​static.css​中创建）中的图像（Base64已编码）内联。

具体操作如下：
.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: …; }

在此页面上