自适应模板渲染

自适应模板渲染提供了一种管理具有各种变体的页面的方法。 此功能最初对于为移动设备提供各种HTML输出(例如功能电话与智能电话)很有用,当需要向需要不同标记或HTML输出的不同设备提供体验时,此功能非常有用。

概述

模板通常围绕响应式网格构建,而基于这些模板创建的页面完全响应式,可根据客户端设备的视口自动调整。 使用页面编辑器中的“模拟器”工具栏,作者可以将布局目标到特定设备。

还可以设置模板以支持自适应渲染。 正确配置设备组后,当在模拟器模式中选择设备时,将在URL中使用其他选择器呈现页面。 使用选择器,可通过URL直接调用特定页面呈现。

设置设备组时请记住:

  • 每个设备必须位于至少一个设备组中。
  • 一个设备可以位于多个设备组中。
  • 由于设备可以位于多个设备组中,因此可以组合选择器。
  • 选择器组合将从上到下评估,因为它们会保留在存储库中。
注意

设备组​响应式设备​将永远不会有选择器,因为假定被识别为支持响应式设计的设备不需要自适应布局

配置

可以为现有设备组或您自己创建的组配置自适应呈现选择器。

对于此示例,我们将配置现有设备组​智能电话,以使其具有自适应呈现选择器,作为We.Retail中​体验页面​模板的一部分。

  1. 编辑http://localhost:4502/miscadmin#/etc/mobile/groups中需要自适应选择器的设备组

    设置选项​禁用模拟器​并保存。

    chlimage_1-157

  2. 选择器将可用于​Blackberry​和​iPhone 4,前提是在以下步骤中将设备组​智能电话​添加到模板和页面结构中。

    chlimage_1-158

  3. 使用CRX DE Lite,通过将设备组添加到模板结构上的多值字符串属性cq:deviceGroups,允许在模板上使用设备组。

    /conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content

    例如,如果我们希望添加智能电话设备组:

    /conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content

    chlimage_1-159

  4. 使用CRX DE Lite,通过将设备组添加到站点结构上的多值字符串属性cq:deviceGroups中,允许在您的站点上使用设备组。

    /content/<your-site>/jcr:content

    例如,如果我们要允许​智能电话​设备组:

    /content/we-retail/jcr:content

    chlimage_1-160

现在,当在页面编辑器中使用emulator时(例如,当修改布局时),您选择所配置设备组的设备时,将使用选择器呈现页面,作为URL的一部分。

在我们的示例中,当根据​体验页面​模板编辑页面并在模拟器中选择iPhone 4时,将呈现该页面,其中将选择器作为arctic-surfing-in-lofoten.smart.html而不是arctic-surfing-in-lofoten.html呈现

也可以使用此选择器直接调用页面。

chlimage_1-161

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now