您查看的帮助内容对应的版本是:

AEM 让您能够使用布局容器组件为页面实现响应式布局。

由此提供的段落系统让您能够将组件放置在响应式网格内。此网格可以根据设备/窗口大小和格式重新安排布局。此组件与正在布局模式配合使用,让您能够根据设备来创建和编辑响应式布局。

布局容器:

  • 提供水平对齐网格功能,还可以将组件并排放入网格,并且定义它们何时应该折叠/重排。
  • 使用预定义的断点(例如手机、平板电脑等),让您能够为相关设备/方向定义所需的内容行为。例如,您可以自定义组件的大小,或者在特定设备上是否可以看到组件。
  • 可以嵌套在一起,从而以列控件的形式呈现。

随后,用户可以使用模拟器查看内容将在特定设备上的呈现方式。

根据实例的不同,此组件既可以用作页面的默认段落系统,也可以作为能够放置到页面上的组件(或者两者皆可)。

注意:

尽管布局容器组件在经典 UI 中可用,但是只有在触屏优化 UI 中才能使用其全部功能。

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

  • 布局容器组件
    此组件在组件浏览器中可用,而且提供了一个网格段落系统,让您能够在响应式网格内添加和放置组件。您也可以将此组件设置为页面上的默认段落系统。
  • 正在布局模式
    将布局容器放置到页面上后,就可以使用正在布局模式在响应式网格内放置内容。
  • 模拟器
    模拟器让您能够创建并编辑响应式网站,这些网站可以根据设备/窗口大小,通过交互方式调整组件大小来重新安排布局。随后,用户可以使用模拟器查看内容的呈现方式。

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

  • 根据设备宽度(与设备类型和方向有关),使用断点来定义不同的内容布局。
  • 使用这些相同的断点和内容布局来确保您的内容可对桌面浏览器窗口的大小做出响应。
  • 使用水平对齐网格功能(将组件放入网格中,根据需要调整大小,定义它们何时应该折叠/重排成并排或上下放置的形式)。
  • 为特定设备布局隐藏组件。
  • 实现列控件。

根据项目的不同,布局容器既可以用作页面的默认段落系统,也可以作为组件浏览器中的选项(作为可添加到页面的组件)。

注意:

通过对模板进行配置,可以启用上述机制。有关更多信息,请参阅配置响应式布局

布局定义、设备模拟和断点

在创建网站内容时,您可能希望确保内容的显示方式适合用来查看内容的设备。

AEM 允许您根据设备的宽度定义布局:

  • 模拟器让您能够在各种设备上模拟这些布局。此外,设备类型和方向(通过旋转设备来选择)都会因宽度的改变而影响所选的断点。
  • 断点是区分各种布局定义的分界点。
    • 断点可有效地定义任何使用特定布局的设备的最大宽度(以像素为单位)。
    • 断点通常适用于一系列选定的设备,具体视设备显示器的宽度而定。
    • 断点的范围会向左扩展,直至到达下一个断点。
    • 您无法明确地选择断点,选择设备和方向将会自动选择相应的断点。

桌面设备没有特定的宽度,因此它与默认的断点有关(即,高于上次所配置断点的所有断点)。

注意:

尽管可以为每台单独的设备定义断点,但这会大大增加定义和维护布局所需的工作量。

当您(使用模拟器)选择特定的设备以进行模拟和定义布局时,相关的断点也将会突出显示。您所做的任何布局更改将适用于断点所适用的其他设备;即位于活动断点标记左侧、但尚未到达下一个断点标记的任何设备。

例如,当您选择 iPhone 6 Plus 设备(定义为宽度 540 像素)进行模拟和布局时,断点手机(定义为 768 像素)也将被激活。您为 iPhone 6 所做的任何布局更改将适用于手机断点下的其他设备,如 iPhone 5(定义为 320 像素)。

chlimage_1

选择要模拟的设备

  1. 打开需要编辑的页面。例如:

    http://localhost:4502/editor.html/content/geometrixx-media/en.html

  2. 从顶部工具栏中选择模拟器图标:

    chlimage_1
  3. 此时将打开模拟器工具栏。在此处,您可以:

    • 旋转设备
    • 从标记中选择特定的设备。
    chlimage_1
  4. 要选择特定设备进行模拟,您可以使用下列任一方法:

    • 使用下拉选择器。
    • 点按/单击模拟器工具栏中的设备指示器。
    chlimage_1
  5. 选择特定设备后,您可以:

    • 查看选定设备的活动标记;如 iPad
    • 查看相应断点的活动标记;如平板电脑
    chlimage_1
    • 查看表示当前设备折叠的虚线;如 iPhone 5
    chlimage_1
    • 折页可被视为内容的分页符(不要与断点相混淆)。显示此线可方便地指明用户在滚动之前可在设备上看到的内容部分。
    • 如果所模拟的设备高度高于屏幕大小,将不会显示折页线。

添加布局容器及其内容(编辑模式)

布局容器是一个段落系统,该系统:

  • 包含其他组件
  • 可用于定义布局
  • 会对更改做出响应

注意:

如果布局容器尚不可用,则必须明确地为段落系统/页面激活布局容器(例如,使用设计模式激活)。

  1. 布局容器在组件浏览器中是标准组件。从此处,您可以将该组件拖放到页面上的所需位置 - 随后您将看到将组件拖动到此处占位符。

  2. 接下来,您可以向布局容器中添加组件。这些组件将存放实际的内容:

    chlimage_1

选择布局容器并对其执行操作(编辑模式)

与其他组件一样,您可以先选择布局容器,然后对其执行复制、剪切、删除等操作(在编辑模式下):

注意:

由于布局容器是段落系统,因此删除该组件即意味着同时删除布局网格以及容器中包含的所有组件(及其内容)。

  1. 如果将鼠标悬停在网格占位符上,则需要选择父项

    chlimage_1
  2. 如果布局组件是嵌套式的,则需要选择要对其执行操作的特定实例(将鼠标悬停在选项上时,将出现黑色边框以指示页面上的选择):

    chlimage_1
  3. 此时将突出显示整个网格及其内容。在出现的组件工具栏中,您可以选择一项操作;例如删除

    chlimage_1

定义布局(正在布局模式)

注意:

您可以为每个断点定义单独的布局(由模拟的设备类型和方向决定)。

要为通过布局容器实现的响应式网格配置布局,您需要使用正在布局模式。从此处,您可以对网格执行多种操作:

  • 使用蓝色圆点调整内容组件的大小。大小调整操作将始终与网格对齐。调整大小时,背景网格将显示出来,以帮助进行对齐:

    chlimage_1

    注意:

    在调整图像等组件的大小时,其比例和比率将保持不变。

  • 单击/点按内容组件后,您可以使用工具栏执行以下操作:

    • 父项
      允许您选择整个布局容器组件,以便对整体执行操作。
    • 浮动到新行
      组件将被移动到新行,具体视网格内的可用间距而定。
    • 隐藏组件
      组件将变得不可见(可以从布局容器的工具栏中恢复)。
    chlimage_1
  • 正在布局模式中,您可以点按/单击将组件拖动到此处来选择整个组件。此时将显示此模式的工具栏;例如:

    • 父项
      选择父组件。
    • 显示隐藏的组件
      显示所有或单个组件。数字指示当前隐藏组件的数量。
      以下示例中的指示器显示有一个隐藏组件(顶部文本组件)。
    • 还原断点布局
      还原到默认的布局。这意味着不再强制使用自定义布局。
    • 浮动到新行
      在间距允许的情况下将组件向上移动一个位置。
    • 隐藏组件
      隐藏当前的组件。
    chlimage_1

    注意:

    在以上示例中,浮动和隐藏操作之所以可用,是因为此布局容器嵌套在一个父布局容器内。

    • 取消隐藏组件
      选择父组件以显示它包含有多少个隐藏组件;例如,两个:
    chlimage_1

    随后,可通过选择全部恢复来恢复隐藏的组件:

    chlimage_1

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略