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
从顶部工具栏中选择模拟器图标:
此时将打开模拟器工具栏。
模拟器工具栏会显示其他布局选项:
要选择要模拟的特定设备,您可以:
选择特定设备后,您可以:
布局容器是一个段落系统,该系统:
如果尚不可用,则 布局容器 必须明确 为段落系统/页面激活 (例如,使用 设计 模式)。
布局 容器在组件浏览器中 ,可作为标准 组件使用。 从此处,您可以将其拖动到页面上的所需位置,随后您将看到将组件拖动到 此处占位符 。
然后,您可以向布局容器添加组件。 这些组件将包含实际内容:
与其他组件一样,您可以先选择布局容器,然后再对其执行剪切、复制、删除等操作(在编辑模式下):
由于布局容器是段落系统,因此删除组件将同时删除布局网格以及容器中保留的所有组件(及其内容)。
如果将鼠标悬停在或点按网格占位符,则会显示操作菜单。
您需要选择父项选项。
如果嵌套了布局组件,请选择 父项 选项会显示一个下拉选项,允许您选择嵌套布局容器或其父容器。
将鼠标悬停在下拉菜单中的容器名称上时,页面上将显示其轮廓。
此时将突出显示整个网格及其内容。在显示的操作工具栏中,您可以选择一项操作,例如删除。
您可以为每个断点定义单独的布局(由模拟的设备类型和方向决定)。
要为通过布局容器实施的响应式网格配置布局,您需要使用布局模式。
可以通过两种方式启动布局模式。
使用工具栏中的模式菜单并选择布局模式
When 编辑单个组件。
在布局模式下,您可以对网格执行各种操作:
使用蓝色圆点调整内容组件的大小。 调整大小将始终与网格对齐。 调整大小时,将显示背景网格以帮助进行对齐:
在调整图像等组件的大小时,其比例和比率将保持不变。
单击/点按内容组件后,您可以使用工具栏执行以下操作:
父项
允许您选择整个布局容器组件以对整体执行操作。
浮动到新行
组件将被移动到新行,具体取决于网格内的可用空间。
隐藏组件
组件将变得不可见(可以从布局容器的工具栏中恢复)。
在布局模式下,您可以点按/单击将组件拖动到此处来选择整个组件。此时将显示此模式的工具栏。
根据布局组件的状态以及属于该布局组件的组件,工具栏将具有不同的选项。 例如:
在以上示例中,浮动和隐藏操作之所以可用,是因为此布局容器嵌套在一个父布局容器内。
选择显示隐藏的组件选项时,当前隐藏的组件将以蓝色显示在它们的原始位置。
选择全部恢复将取消隐藏所有隐藏的组件。