AEM 让您能够使用布局容器组件为页面实现响应式布局。
由此提供的段落系统让您能够将组件放置在响应式网格内。此网格可以根据设备/窗口大小和格式重新安排布局。此组件可与布局模式配合使用,让您能够根据设备创建和编辑响应式布局。
布局容器:
提供水平对齐网格功能,还可以将组件并排放入网格,并且定义它们何时应该折叠/重排。
使用预定义的断点(例如,对于手机、平板电脑等),让您能够为相关设备/方向定义所需的内容行为。
可以进行嵌套,从而允许使用列控件。
随后,用户可以使用模拟器查看内容将在特定设备上的呈现方式。
尽管布局容器组件在经典 UI 中可用,但是只有在触屏优化 UI 中才能使用和支持其全部功能。
AEM 使用一组机制为页面实现响应式布局:
布局容器组件
此组件在组件浏览器中可用,而且提供了一个网格段落系统,让您能够在响应式网格内添加和放置组件。您也可以将此组件设置为页面上的默认段落系统。
将布局容器放置到页面上后,就可以使用布局模式在响应式网格内放置内容。
模拟器
模拟器让您能够创建并编辑响应式网站,这些网站可以根据设备/窗口大小,通过以交互方式调整组件大小来重新安排布局。随后,用户可以使用模拟器查看内容的呈现方式。
通过这些响应式网格机制,您可以:
根据您的项目,可以将布局容器用作您页面的默认段落系统,或用作可通过组件浏览器添加到页面中的组件(或同时用作两者)。
Adobe 提供了响应式布局的 GitHub 文档,前端开发人员可以参考该文档,以便在 AEM 之外使用 AEM 网格,例如在为将来的 AEM 站点创建静态 HTML 模型时。
通过对模板进行配置,可以启用上述机制。有关更多信息,请参阅配置响应式布局。
在创建网站内容时,您可能希望确保内容的显示方式适合用来查看内容的设备。
AEM 允许您根据设备的宽度定义布局:
模拟器让您能够在各种设备上模拟这些布局。除设备类型以外,通过旋转设备选项选择的方向也可能会因宽度的改变而影响所选的断点。
断点是区分各种布局定义的分界点。
桌面设备没有特定的宽度,因此它与默认的断点(即,高于上次所配置断点的所有断点)有关。
尽管可以为每台单独的设备定义断点,但这会大大增加定义和维护布局所需的工作量。
在使用模拟器时,您可以选择特定的设备以进行模拟和定义布局,并且相关的断点也将会突出显示。您所做的任何布局更改将适用于断点所适用的其他设备;即位于活动断点标记左侧、但尚未到达下一个断点标记的任何设备。
例如,当您选择 iPhone 6 Plus 设备(定义为宽度 540 像素)进行模拟和布局时,断点手机(定义为 768 像素)也将被激活。您对 iPhone 6 所做的任何布局更改将适用于手机断点下的其他设备,如 iPhone 5(定义为 320 像素)。
打开需要编辑的页面。例如:
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html
从顶部工具栏中选择模拟器图标:
此时将打开模拟器工具栏。
模拟器工具栏会显示其他布局选项:
要选择特定设备进行模拟,您可以使用下列任一方法:
选择特定设备后,您可以:
布局容器是一个段落系统,该系统:
如果布局容器尚不可用,则必须明确地为段落系统/页面激活布局容器(例如,使用设计模式激活)。
布局 容器在组件浏览器中 ,可作为标准 组件使用。 从此处,您可以将其拖动到页面上的所需位置,随后您将看到将组件拖动到 此处占位符 。
接下来,您可以向布局容器中添加组件。这些组件将存放实际的内容:
与其他组件一样,您可以先选择布局容器,然后再对其执行剪切、复制、删除等操作(在编辑模式下):
由于布局容器是段落系统,因此删除该组件即意味着同时删除布局网格以及容器中包含的所有组件(及其内容)。
如果将鼠标悬停在网格占位符上或点按网格占位符,将显示操作菜单。
您需要选择父项选项。
如果嵌套了布局组件,则选择父项选项会显示一个下拉选择框,允许您选择嵌套的布局容器或其父项。
当您将鼠标悬停在下拉选择框中的容器名称上时,页面上将显示它们的轮廓。
此时将突出显示整个网格及其内容。在显示的操作工具栏中,您可以选择一项操作,例如删除。
您可以为每个断点定义单独的布局(由模拟的设备类型和方向决定)。
要为通过布局容器实施的响应式网格配置布局,您需要使用布局模式。
可以通过两种方式启动布局模式。
使用工具栏中的模式菜单并选择布局模式
在布局模式下,您可以对网格执行各种操作:
使用蓝色圆点调整内容组件的大小。大小调整操作将始终与网格对齐。调整大小时,背景网格将显示出来,以帮助进行对齐:
在调整图像等组件的大小时,其比例和比率将保持不变。
单击/点按内容组件后,您可以使用工具栏执行以下操作:
父项
允许您选择整个布局容器组件以对整体执行操作。
浮动到新行
组件将被移动到新行,具体取决于网格内的可用空间。
隐藏组件
组件将变得不可见(可以从布局容器的工具栏中恢复)。
在布局模式下,您可以点按/单击将组件拖动到此处来选择整个组件。此时将显示此模式的工具栏。
根据布局组件的状态及属于该布局的组件,工具栏将具有不同的选项。例如:
在以上示例中,浮动和隐藏操作之所以可用,是因为此布局容器嵌套在一个父布局容器内。
选择显示隐藏的组件选项时,当前隐藏的组件将以蓝色显示在它们的原始位置。
选择全部恢复将取消隐藏所有隐藏的组件。