Show Menu
主题×

响应式布局

AEM 让您能够使用​ 布局容器 ​组件为页面实现响应式布局。
由此提供的段落系统让您能够将组件放置在响应式网格内。此网格可以根据设备/窗口大小和格式重新安排布局。The component is used in conjunction with the Layout , which allows you to create and edit your responsive layout dependent on device.
布局容器:
  • 提供水平对齐网格功能,还可以将组件并排放入网格,并且定义它们何时应该折叠/重排。
  • 使用预定义的断点(例如,对于手机、平板电脑等),让您能够为相关设备/方向定义所需的内容行为。
    • 例如,您可以自定义组件的大小,或者在特定设备上是否可以看到组件。
  • 可以进行嵌套,从而允许使用列控件。
随后,用户可以使用模拟器查看内容将在特定设备上的呈现方式。
尽管布局容器组件在经典 UI 中可用,但是只有在触屏优化 UI 中才能使用和支持其全部功能。
AEM 使用一组机制为页面实现响应式布局:
  • 布局容器组件​ (Layout Container组件)
    This component is available in the component browser and provides a grid-paragraph system to allow you to add and position components within a responsive grid. 您也可以将此组件设置为页面上的默认段落系统。
  • Once the layout container is positioned on your page you can use the Layout mode to position content within the responsive grid.
  • 模拟器​ 模拟器让您能够创建并编辑响应式网站,这些网站可以根据设备/窗口大小,通过以交互方式调整组件大小来重新安排布局。随后,用户可以使用模拟器查看内容的呈现方式。
通过这些响应式网格机制,您可以:
  • 根据设备宽度(与设备类型和方向有关),使用断点来定义不同的内容布局。
  • 使用这些相同的断点和内容布局来确保您的内容可对桌面浏览器窗口的大小做出响应。
  • 使用水平对齐网格功能,从而允许您将组件放入网格中,根据需要调整大小,定义它们何时应该折叠/重排成并排或上下放置的形式。
  • 为特定设备布局隐藏组件。
  • 实现列控件。
根据您的项目,布局容器可用作页面的默认段落系统,或用作可通过组件浏览器(或两者)添加到页面的可用组件。
Adobe provides GitHub documentation of the responsive layout as a reference that can be given to front-end developers allowing them to use the AEM grid outside of AEM, for example when creating static HTML mock-ups for a future AEM site.
通过对模板进行配置,可以启用上述机制。See Configuring Responsive Layout for further information.

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

在创建网站内容时,您可能希望确保内容的显示方式适合用来查看内容的设备。
AEM 允许您根据设备的宽度定义布局:
  • 模拟器让您能够在各种设备上模拟这些布局。In addition to the device type, the orientation, selected by the Rotate device option, can impact the breakpoint selected as the width changes.
  • 断点是区分各种布局定义的分界点。
    • 断点可有效地定义任何使用特定布局的设备的最大宽度(以像素为单位)。
    • 断点通常适用于一系列选定的设备,具体视设备显示器的宽度而定。
    • 断点的范围会向左扩展,直至到达下一个断点。
    • 您无法明确地选择断点,选择设备和方向将会自动选择相应的断点。
桌面 ​设备没有特定的宽度,因此它与默认的断点(即,高于上次所配置断点的所有断点)有关。
尽管可以为每台单独的设备定义断点,但这会大大增加定义和维护布局所需的工作量。
在使用模拟器时,您可以选择特定的设备以进行模拟和定义布局,并且相关的断点也将会突出显示。您所做的任何布局更改将适用于断点所适用的其他设备;即位于活动断点标记左侧、但尚未到达下一个断点标记的任何设备。
例如,当您选择 iPhone 6 Plus 设备(定义为宽度 540 像素)进行模拟和布局时,断点​ 手机 (定义为 768 像素)也将被激活。您对 iPhone 6 所做的任何布局更改将适用于​ 手机 ​断点下的其他设备,如 iPhone 5 (定义为 320 像素)。

选择要模拟的设备

  1. 打开需要编辑的页面。例如:
    http://localhost:4502/editor.html/content/we-retail/us/en/experience.html
  2. 从顶部工具栏中选择​ 模拟器 ​图标:
  3. 此时将打开模拟器工具栏。
    模拟器工具栏会显示其他布局选项:
    • 旋转设备 - 允许您将设备从垂直(纵向)方向旋转到水平(横向)方向,反之亦然。
    • 选择设备 - 从列表中定义要模拟的特定设备(请参阅下一步以了解详细信息)。
  4. 要选择特定设备进行模拟,您可以使用下列任一方法:
    • 使用“选择设备”图标并从下拉选择器中进行选择。
    • 点按/单击模拟器工具栏中的设备指示器。
  5. 选择特定设备后,您可以:
    • See the active marker for the selected device, such as iPad.
    • See the active marker for the appropriate breakpoint such as Tablet.
    • 蓝色虚线表示选定设备(此处为 iPhone 6 )的“折页”**。
    • 折页可被视为内容的分页符(不要与 断点 相混淆)。显示此线可方便地指明用户在滚动之前可在设备上看到的内容部分。
    • 如果所模拟的设备高度高于屏幕大小,将不会显示折页线。
    • 显示折页是为了方便作者查看,在已发布的页面上则不会显示折页。

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

布局容器 ​是一个段落系统,该系统:
  • 包含其他组件。
  • 可定义布局。
  • 可对更改做出响应。
如果​ 布局容器 ​尚不可用,则必须明确地 为段落系统/页面激活布局容器 (例如,使用 设计​ )。
  1. 布局 容器在组件浏览器中 ,可作为标准 组件使用 。 从此处,您可以将其拖动到页面上的所需位置,随后您将看到将组件拖动到 此处占位符
  2. 接下来,您可以向布局容器中添加组件。这些组件将存放实际的内容:

Selecting and Taking Action on a Layout Container (Edit mode)

与其他组件一样,您可以先选择布局容器,然后再对其执行剪切、复制、删除等操作(在​ 编辑 ​模式下):
由于布局容器是段落系统,因此删除该组件即意味着同时删除布局网格以及容器中包含的所有组件(及其内容)。
  1. 如果将鼠标悬停在网格占位符上或点按网格占位符,将显示操作菜单。
    You need to select the Parent option.
  2. 如果嵌套了布局组件,则选择​ 父项 ​选项会显示一个下拉选择框,允许您选择嵌套的布局容器或其父项。
    当您将鼠标悬停在下拉选择框中的容器名称上时,页面上将显示它们的轮廓。
    • 级别最低的嵌套布局容器将显示黑色轮廓。
    • 级别次于最低的嵌套布局容器将显示深灰色轮廓。
    • 后续的每个容器将以灰色阴影逐渐变浅的方式显示。
  3. 此时将突出显示整个网格及其内容。The action toolbar will be shown, from where you can select an action such as Delete.

Defining Layouts (Layout mode)

您可以为每个 断点 定义单独的布局(由模拟的设备类型和方向决定)。
To configure the layout of a responsive grid implemented with the Layout Container you need to use the Layout mode.
可以通过两种方式启动​ 布局 ​模式。
  • 使用 工具栏中的模式菜单 ,然后选择​ 布局 ​模式
    • 选择​ 布局 ​模式,与切换到​ 编辑 ​模式或​ 定位 ​模式操作类似。
    • 布局 ​模式会持续保留,直到您通过模式选择器选择其他模式,您才会离开​ 布局 ​模式。
    • 使用组件快速操作菜单中的​ 布局 ​选项,您可以切换到​ 布局 ​模式。
    • 在编辑组件期间将一直处于​ 布局 ​模式,在焦点转到其他组件后,才会还原至​ 编辑 ​模式。
在布局模式下,您可以对网格执行各种操作:
  • 使用蓝色圆点调整内容组件的大小。大小调整操作将始终与网格对齐。调整大小时,背景网格将显示出来,以帮助进行对齐:
    在调整​ 图像 ​等组件的大小时,其比例和比率将保持不变。
  • 单击/点按内容组件后,您可以使用工具栏执行以下操作:
    • 父项
      允许您选择整个布局容器组件以对整体执行操作。
    • 浮动到新行
      组件将移至新行,具体取决于网格中的可用空间。
    • 隐藏组件
      组件将变得不可见(可以从布局容器的工具栏中恢复)。
  • In Layout mode you can tap/click on the Drag components here to select the entire component. 此时将显示此模式的工具栏。
    根据布局组件的状态及属于该布局的组件,工具栏将具有不同的选项。例如:
    • 父项 -选择父组件。
    • 显示隐藏的组件 -显示所有或单个组件。数字表示当前隐藏的组件数。 计数器显示隐藏的组件数量。
    • 还原断点布局 -还原到默认布局。这意味着不会强制使用自定义布局。
    • 浮动到新行 -如果间距允许,将组件向上移动一个位置。
    • 隐藏组件 -隐藏当前组件。
    在以上示例中,浮动和隐藏操作之所以可用,是因为此布局容器嵌套在一个父布局容器内。
    • 取消隐藏组件 选择父组件会显示包含​ 显示隐藏的组件 ​选项的操作工具栏。在此示例中,隐藏了两个组件。
    选择显 示隐藏的组件 ,当前隐藏在其原始位置的组件将以蓝色显示。
    选择​ 全部恢复 ​将取消隐藏所有隐藏的组件。