配置布局容器和布局模式

响应 式布局是实现响应式 Web设计的机制。这允许用户创建具有根据用户使用的设备而定的布局和尺寸的网页。

注意

这可以与使用自适应Web设计(主要针对经典UI)的移动Web机制进行比较。

AEM 使用一组机制为页面实现响应式布局:

  • 布局容器​组件

    此组件提供了一种网格段落系统,让您可以在响应式网格内添加和放置组件。它可用作页面的默认parsys和/或在组件浏览器中为作者提供。

    • 默认的​布局容器​组件定义于:

      /libs/wcm/foundation/components/responledvegrid

    • 您可以定义布局容器:

      • 作为用户可以添加到页面的组件。

      • 作为页面的默认parsys。

      • 两者.

        您可以将布局容器作为页面的标准,同时允许用户在其中添加更多布局容器;例如,实现列控件。

  • 布局
    模式将布局容器放置到页面上后,您可以使用
    布局 模式可在响应式网格内放置内容。

  • 模拟器
    模拟器让您能够创建并编辑响应式网站,这些网站可以根据设备/窗口大小,通过交互方式调整组件大小来重新安排布局。随后,用户可以使用模拟器查看内容的呈现方式。

注意

尽管​布局容器​组件在经典UI中可用,但其完整功能仅在触屏优化UI中可用。

通过这些响应式网格机制,您可以:

  • 使用断点(指示设备分组)根据设备布局定义不同的内容行为。
  • 根据设备组隐藏组件(定义将在哪个断点隐藏组件)。
  • 使用水平对齐网格功能(将组件放入网格中,根据需要调整大小,定义它们何时应该折叠/重排成并排或上下放置的形式)。
  • 实现列控件。
注意

在开箱即用的安装中,已为We.Retail参考站点配置响应式布局。 您仍必须激活其他页面的布局容器组件

配置响应式模拟器

此任务允许您在站点上查看响应式​模拟器

注册页面组件以进行模拟

要使模拟器能够支持您的页面,您必须注册您的页面组件。 请参阅注册页面组件以模拟

指定设备组

要指定在模拟器的“设备”列表中显示的设备组,请参阅指定设备组

要包含模拟器,您需要将站点链接到设备组。 请参阅添加设备列表符(适用于经典和触屏优化UI)。

激活站点的布局模式

这些过程用于在您的站点上启用​布局​模式。

配置断点

断点:

  • 用于响应式设计。

  • 可以定义:

    • 在页面模板中,设置将从中复制到使用该模板创建的任何页面。
    • 在页面节点上,设置将从中继承到任何子页面。
  • 定义标题和宽度:

    • 标题描述了通用设备分组,如果需要,具有方向;例如,手机、平板电脑、平板电脑横向。
    • 宽度定义该通用设备分组的最大宽度(以像素为单位)。 例如,如果断点电话的宽度为768,则它是电话设备所使用的布局的最大宽度。
  • 当您使用模拟器时,页面编辑器顶部的标记将可见。

  • 继承自父节点层次结构,可以随意覆盖。

  • 有一个默认(现成)断点,它涵盖上一个​已配置​断点之上的所有断点。

它们可以使用CRXDE Lite或XML进行定义。

注意

如果要设置新项目:

  • 您需要向模板添加断点。

如果要迁移现有项目(包含现有内容),您需要:

  • 为模板添加断点
  • 向现有页面添加相同的断点

继承正在运行中,您可以将继承限制在内容的根页面。

使用CRXDE Lite配置断点

  1. 使用CRXDE Lite(或等效项),导航到以下任一位置:

    • 您的模板定义。
    • 页面的jcr:content节点。
  2. jcr:content下创建节点:

    • 名称: cq:responsive
    • 类型: nt:unstructured
  3. 在此下创建节点:

    • 名称: breakpoints
    • 类型: nt:unstructured
  4. 在断点节点下,您可以创建任意数量的断点。 每个定义都是具有以下属性的单个节点:

    • 名称: <descriptive name>
    • 类型: nt:unstructured
    • 标题: String * <descriptive title seen in Emulator>*
    • 宽度: Decimal * <value of breakpoint>*

使用XML配置断点

断点位于.context.html<jcr:content>部分,位于相应的模板(或内容)文件夹下。

示例定义:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

添加响应式信息提供程序

注意

仅当页面组件不基于基础页面组件时,才需要此设置。

将以下cq:infoProviders节点结构复制到父页面组件中:

/libs/foundation/components/page/cq:infoProviders/responsive

为页面启用组件大小调整

这些过程是必需的,因此您可以在​布局​模式下调整组件大小。

将布局容器设置为主Parsys

要将页面的主parsys设置为布局容器,您需要将parsys定义为:

wcm/foundation/components/responsivegrid

在以下任一位置:

  • 页面组件
  • 页面模板(供将来使用)

以下两个示例说明了定义:

  • HTL:

    <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
    
  • JSP:

    <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
    

包含响应式CSS

使用LESS的断点的CSS

AEM使用LESS生成必要的CSS部分,这些部分需要包含在您的项目中。

您还需要创建客户端库以提供其他配置和函数调用。 以下LESS提取是您需要添加到项目中的最低值示例:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

基本网格定义可在以下位置找到:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

样式注意事项

响应式容器中保留的组件将根据响应式网格大小调整大小(连同其各自的HTML DOM元素)。 因此,在这些情况下,建议避免(或更新)固定宽度(包含)DOM元素的定义。

例如:

  • 之前:

    • width=100px
  • 之后:

    • max-width=100px

调整大小和自适应图像符合性

在网格中调整组件大小时,将触发以下监听器(视情况而定):

  • beforeedit

  • beforechildedit

  • afteredit

  • afterchildedit

要正确调整响应式网格中包含的自适应图像内容的大小和更新其内容,您需要将设置为REFRESH_PAGE的监听器的afterEdit添加到每个包含的组件的EditConfig文件中。

例如:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

自适应图像机制通过控制根据窗口的当前大小选择正确图像的脚本使用。 在DOM准备就绪后或在收到专用事件时激活。 当前,必须刷新页面才能正确反映用户操作的结果。

注意

必须将自定义样式表客户端库作为标题的一部分加载,才能在创作和发布时正常工作。

为页面启用布局容器组件

这些任务允许作者将​布局容器​组件的实例拖动到页面上。

启用布局容器组件进行页面编辑

要允许作者向内容页面添加响应式网格,您需要为页面启用布局容器组件。 您可以使用以下任一方式执行此操作:

  • 创作环境

    使用设计模式激活页面的​层容器​组件。

  • 组件定义

    在定义组件时使用allowedComponent或静态包含。

配置布局容器的网格

您可以配置布局容器的每个特定实例的可用列数:

  1. 创作环境

    您可以配置每个特定布局容器实例的可用列数。

    为此,请使用设计模式,然后打开所需容器的设计对话框。 您可以在此处指定有多少列可用于定位和调整大小。 默认为 12。

  2. XML

    响应式网格的定义在中指定:

    etc/design/<*your-project-name*>/.content.xml

    可以定义以下参数:

    • 可用列数:

      • columns="{String}8"
    • 可添加到当前组件的组件:

      • components="[/libs/wcm/foundation/components/responsivegrid, ...

On this page

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