响应式布局

AEM允许您使用 布局容器 组件。

这提供了一个段落系统，允许您在响应式网格内放置组件。 此网格可根据设备/窗口大小和格式重新排列布局。 此组件可与​布局​模式配合使用，让您能够根据设备创建和编辑响应式布局。

布局容器：

• 提供水平对齐网格功能，以及将组件并排放置到网格中并定义它们应何时折叠/重排的功能。

• 使用预定义的断点（例如，手机、平板电脑等） 以定义相关设备/方向所需的内容行为。

  • 例如，您可以自定义组件大小，或者是否可以在特定设备上查看组件。

• 可以嵌套以允许列控件。

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

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

• 布局容器​组件

  此组件在组件浏览器中可用，而且提供了一个网格段落系统，让您能够在响应式网格内添加和放置组件。您也可以将此组件设置为页面上的默认段落系统。

• 布局模式

  将布局容器放置到页面上后，就可以使用​布局​模式在响应式网格内放置内容。

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

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

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

根据您的项目，可以将布局容器用作您页面的默认段落系统，或用作可通过组件浏览器添加到页面中的组件（或同时用作两者）。

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

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

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

• 模拟器让您能够在各种设备上模拟这些布局。 除设备类型以外，通过​旋转设备​选项选择的方向也可能会因宽度的改变而影响所选的断点。

• 断点是区分各种布局定义的分界点。

  • 断点可有效地定义任何使用特定布局的设备的最大宽度（以像素为单位）。
  • 断点通常适用于一系列选定的设备，具体视设备显示器的宽度而定。
  • 断点的范围会向左扩展，直至到达下一个断点。
  • 您无法明确地选择断点，选择设备和方向将会自动选择相应的断点。

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

使用模拟器时，您需要选择特定的设备来进行模拟和定义布局，并且相关的断点也会突出显示。 您所做的任何布局更改将适用于断点所适用的其他设备，即位于活动断点标记左侧但位于下一个断点标记之前的任何设备。

例如，当您选择设备时 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. 选择特定设备后，您可以：

   • 查看选定设备的活动标记，如 iPad。
   • 查看相应断点的活动标记，如​平板电脑。

   

   • 蓝色虚线表示 折叠 (此处为 iPhone 6)。

   

   • 折页也可视为分页符(请不要与 断点)。 显示此图标是为了方便用户显示在滚动之前用户将在设备上看到的内容部分。
   • 如果所模拟设备的高度高于屏幕大小，则不会显示折页线。
   • 显示折页是为了方便作者查看，在已发布的页面上则不会显示折页。

添加布局容器及其内容（编辑模式）

布局容器​是一个段落系统，该系统：

• 包含其他组件。
• 定义布局。
• 响应更改。

1. 布局 容器在组件浏览器中 ，可作为标准 组件使用。 从此处，您可以将其拖动到页面上的所需位置，随后您将看到将组件拖动到 此处占位符 。

2. 然后，您可以向布局容器添加组件。 这些组件将包含实际内容：

   

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

与其他组件一样，您可以先选择布局容器，然后再对其执行剪切、复制、删除等操作（在​编辑​模式下）：

1. 如果将鼠标悬停在或点按网格占位符，则会显示操作菜单。

   

   您需要选择​父项​选项。

   

2. 如果嵌套了布局组件，请选择 父项 选项会显示一个下拉选项，允许您选择嵌套布局容器或其父容器。

   将鼠标悬停在下拉菜单中的容器名称上时，页面上将显示其轮廓。

   • 最低的嵌套布局容器将以黑色轮廓显示。
   • 级别次低的嵌套布局容器将显示为深灰色。
   • 每个连续的容器将以较浅的灰色阴影显示。

   

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

   

定义布局（布局模式）

要为通过布局容器实施的响应式网格配置布局，您需要使用​布局​模式。

可以通过两种方式启动​布局​模式。

• 使用工具栏中的模式菜单并选择​布局​模式

  • 像切换到​编辑​模式或​定位​模式一样，选择​布局​模式。
  • 布局​模式会一直保持下去，直到您通过模式选择器选择其他模式后，才会离开​布局​模式。

• When 编辑单个组件。

  • 通过使用 布局 选项，您可以切换到 布局 模式。
  • 布局 模式在编辑组件时持续存在，并会还原为 编辑 模式。

在布局模式下，您可以对网格执行各种操作：

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

  

  注意

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

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

  • 父项

    允许您选择整个布局容器组件以对整体执行操作。

  • 浮动到新行

    组件将被移动到新行，具体取决于网格内的可用空间。

  • 隐藏组件

    组件将变得不可见（可以从布局容器的工具栏中恢复）。
    

• 在​布局​模式下，您可以点按/单击​将组件拖动到此处​来选择整个组件。此时将显示此模式的工具栏。

  根据布局组件的状态以及属于该布局组件的组件，工具栏将具有不同的选项。 例如：

  • 父项 - 选择父组件。

  

  • 显示隐藏的组件 - 显示所有或各个组件。数字表示当前存在的隐藏组件数量。计数器显示隐藏的组件数量。

  

  • 还原断点布局 - 还原到默认的布局。这意味着不再强制使用自定义布局。

  

  • 浮动到新行 - 在间距允许的情况下将组件向上移动一个位置。

  

  • 隐藏组件 - 隐藏当前的组件。

  

  注意

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

  • 取消隐藏组件
    选择父组件会显示包含
    显示隐藏组件​选项的操作工具栏。 在此示例中，隐藏了两个组件。
    

  选择​显示隐藏的组件​选项时，当前隐藏的组件将以蓝色显示在它们的原始位置。

  

  选择​全部恢复​将取消隐藏所有隐藏的组件。

Business.Adobe.com 资源

Ecommerce Integrations Auto Form Fill Targeted Content Personalized Experiences Document Generation Digital Rights Management