配置布局容器和布局模式

响应式布局 是一种用于实现 响应式网页设计. 这允许用户创建网页，这些网页的布局和尺寸取决于用户使用的设备。

注意

这可以与 移动Web 机制，使用自适应Web设计（主要用于经典UI）。

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

  • 布局容器​组件

    此组件提供了一个网格段落系统，允许您在响应式网格中添加和放置组件。 它可以用作页面的默认Parsys，和/或在组件浏览器中提供给作者。

    • 默认 布局容器 组件在下定义：

      /libs/wcm/foundation/components/responsivegrid

    • 您可以定义布局容器：

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

      • 作为页面的默认parsys。

      • 两者。

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

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

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

注意

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

通过这些响应式网格机制，您可以：

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

在开箱即用的安装中，已为以下对象配置了响应式布局 We.Retail引用站点. 你还是必须的 激活布局容器组件 用于其他页面。

配置响应式模拟器

此任务允许您查看响应式 模拟器 在您的网站上。

注册页面组件以进行模拟

要使模拟器能够支持您的页面，您必须注册页面组件。 请参阅 注册用于模拟的页面组件.

指定设备组

要指定出现在模拟器的设备列表中的设备组，请参阅 指定设备组.

要包含模拟器，请将您的站点链接到设备组。 请参阅 添加设备列表 （适用于经典用户界面和触屏优化用户界面）。

激活网站的布局模式

这些过程用于启用 布局 模式。

配置断点

断点:

  • 在响应式设计中使用。

  • 可以定义：

    • 在页面模板上，设置会从中复制到使用该模板创建的任何页面。
    • 在页面节点上，任何子页面都会从中继承设置。

  • 定义标题和宽度：

    • 标题描述了通用设备分组，并根据需要提供了方向；例如，手机、平板电脑、表格横向。
    • 宽度定义该通用设备分组的最大宽度（以像素为单位）。 例如，如果断点电话的宽度为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配置断点

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

示例定义：

<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

要将页面的main 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

样式设置注意事项

保持在响应容器内的组件(连同它们各自的HTMLDOM元素)根据响应栅格大小而调整大小。 因此，在这些情况下，建议避免（或更新）固定宽度（包含）DOM元素的定义。

例如：

  • 之前:

    • width=100px

  • 之后:

    • max-width=100px

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

网格中组件的任何大小调整都将相应地触发以下监听器：

  • beforeedit

  • beforechildedit

  • afteredit

  • afterchildedit

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

例如：

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

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

注意

自定义样式表客户端库必须作为标头的一部分加载，它们才能在创作和发布中正常工作。

为页面启用布局容器组件

这些任务允许作者拖动 布局容器 组件放到页面上。

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

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

  • 创作环境

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

  • 组件定义

    使用 allowedComponent 或定义组件时的静态include 。

配置布局容器的网格

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

  1. 创作环境

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

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

  2. XML

    响应式网格的定义指定于：

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

    可以定义以下参数：

    • 可用列数：

      • columns="{String}8"

    • 可添加到当前组件的组件：

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

在此页面上