配置布局容器和布局模式 configuring-layout-container-and-layout-mode
了解如何配置布局容器和布局模式。
概述 overview
响应式布局是一种用于实现的机制。 这允许用户创建网页，这些网页的布局和尺寸取决于用户使用的设备。
AEM 使用一组机制为页面实现响应式布局：
-
布局容器 ?组件
此组件提供了一个网格段落系统，允许您在响应式网格中添加和放置组件。 它可以用作页面的默认Parsys，和/或在组件浏览器中提供给作者。
-
默认? 布局容器 ?组件定义于：
/libs/wcm/foundation/components/responsivegrid
-
您可以定义布局容器：
-
作为用户可以添加到页面中的组件。
-
作为页面的默认辫补谤蝉测蝉。
-
两者。
您可以将布局容器作为页面的标准，同时允许用户在此中添加更多布局容器；例如，实现列控件。
-
-
-
布局模式
将布局容器放置到页面上后，即可使用? 布局 ?模式在响应式网格内放置内容。 -
模拟器
这让您创建和编辑响应式网站，通过以交互的方式调整组件大小，根据设备/窗口大小重新排列布局。然后，用户可以使用模拟器查看内容的呈现方式。
通过这些响应式网格机制，您可以：
- 使用断点（指示设备分组）根据设备布局定义不同的内容行为。
- 根据设备组隐藏组件（定义将隐藏组件的断点）。
- 使用水平对齐网格功能（将组件放入网格中，根据需要调整大小，定义它们何时应该折迭/重排成并排或上下对齐）。
- 实现列控件。
激活网站的布局模式 activate-layout-mode-for-your-site
这些过程用于在您的网站上启用? 布局 ?模式。
配置断点 configure-the-breakpoints
断点：
-
在响应式设计中使用。
-
可以定义：
- 在页面模板上，设置会从中复制到使用该模板创建的任何页面。
- 在页面节点上，任何子页面都会从中继承设置。
-
定义标题和宽度：
- 标题描述了通用设备分组，并根据需要提供了方向；例如，手机、平板电脑、表格横向。
- 宽度定义该通用设备分组的最大宽度（以像素为单位）。 例如，如果断点电话的宽度为768，则表示它是用于电话设备的最大布局宽度。
-
使用模拟器时，在页面编辑器顶部显示为标记。
-
继承自父节点层次结构，可以随意覆盖。
-
有一个默认（开箱即用）断点，它覆盖上一个? 配置的 ?断点之上的所有内容。
它们可以使用CRXDE Lite或XML进行定义。
- 向模板添加断点。
-
向模板添加断点
-
将相同的断点添加到现有页面
由于继承正在运行，您可以将其限制为内容的根页面。
使用CRXDE Lite配置断点 configuring-breakpoints-using-crxde-lite
-
使用CRXDE Lite（或等效功能），导航到：
- 您的模板定义。
- 页面的
jcr:content节点。
-
在
jcr:content下创建节点：- 名称：
cq:responsive - 类型：
nt:unstructured
- 名称：
-
在此下创建节点：
- 名称：
breakpoints - 类型：
nt:unstructured
- 名称：
-
在断点节点下，可以创建任意数量的断点。 每个定义都是一个具有以下属性的节点：
- 名称：
<descriptive name> - 类型：
nt:unstructured - 标题：
String*<descriptive title seen in Emulator>* - 宽度：
Decimal*<value of breakpoint>*
- 名称：
使用齿惭尝配置断点 configuring-breakpoints-using-xml
断点位于.context.html的<jcr:content>部分中，位于相应的模板（或内容）文件夹下。
示例定义：
<cq:responsive jcr:primaryType="nt:unstructured">
<breakpoints jcr:primaryType="nt:unstructured">
<phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
<tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
</breakpoints>
</cq:responsive>
添加响应信息提供程序 add-a-responsive-information-provider
将以下cq:infoProviders节点结构复制到父页面组件中：
/libs/foundation/components/page/cq:infoProviders/responsive
为页面启用组件调整大小 enable-component-resizing-for-the-page
需要这些过程，以便您可以在? 布局 ?模式下调整组件大小。
将布局容器设置为主笔补谤蝉测蝉 set-layout-container-as-main-parsys
要将页面的main parsys设置为布局容器，请将parsys定义为：
wcm/foundation/components/responsivegrid
在：
- 页面组件
- 页面模板（供将来使用）
以下两个示例说明了定义：
-
贬罢尝：
code language-html <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/> -
闯厂笔：
code language-html <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
包含响应式颁厂厂 include-the-responsive-css
使用尝贰厂厂的断点的颁厂厂 css-for-breakpoints-using-less
础贰惭使用尝贰厂厂生成必要的颁厂厂部分，这些项目需要包含在您的项目中。
您还必须创建一个客户端库以提供额外的配置和函数调用。 以下LESS提取是您必须添加到项目的最小值示例：
@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";
/* maximum amount of grid cells to be provided */
@max_col: 12;
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}
/* phone breakpoint */
@media (max-width: 768px) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}
可在以下位置找到基本网格定义：
/libs/wcm/foundation/clientlibs/grid/grid_base.less
样式设置注意事项 styling-considerations
保持在响应容器中的组件(连同它们各自的HTML DOM元素)根据响应栅格大小而调整大小。 因此，在这些情况下，建议避免（或更新）固定宽度（包含）DOM元素的定义。
例如：
-
之前：
width=100px
-
之后：
max-width=100px
调整大小和自适应图像合规性 resizing-and-adaptive-image-compliance
网格中组件的任何大小调整都将相应地触发以下监听器：
-
beforeedit -
beforechildedit -
afteredit -
afterchildedit
要正确调整响应式网格中包含的自适应图像的大小并更新其内容，您需要将设置为REFRESH_PAGE的afterEdit侦听器添加到每个包含组件的EditConfig文件中。
例如：
<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />
该自适应图像机制可通过控制为窗口的当前大小选择正确图像的脚本来提供。 它在DOM准备就绪或收到专用事件时激活。 当前必须刷新页面才能正确反映用户操作的结果。
为页面启用布局容器组件 enable-the-layout-container-component-for-page
这些任务允许作者将? 布局容器 ?组件的实例拖动到页面上。
启用布局容器组件以进行页面编辑 enable-the-layout-container-component-for-page-editing
要允许作者向内容页面添加更多响应式网格，您需要为页面启用布局容器组件。 您可以使用以下任一方式执行此操作：
-
创作环境
使用设计模式激活页面的? 层容器 ?组件。
-
组件定义
定义组件时，请使用
allowedComponent或静态包含。
配置布局容器的网格 configure-the-grid-of-the-layout-container
您可以配置可用于布局容器每个特定实例的列数：
-
创作环境
您可以配置可用于布局容器每个特定实例的列数。
为此，请使用设计模式，然后打开所需容器的“设计”对话框。 您可以在此指定有多少列可用于定位和大小调整。 默认值为12。
-
XML
响应式网格的定义指定于：
etc/design/<*your-project-name*>/.content.xml可以定义以下参数：
-
可用列数：
columns="{String}8"
-
可添加到当前组件的组件：
components="[/libs/wcm/foundation/components/responsivegrid, ...
-
嵌套响应式网格 nested-responsive-grids
在某些情况下，您可能会发现有必要嵌套响应式网格来支持项目的需求。 但是，请记住，51黑料不打烊推荐的最佳做法是保持结构尽可能平坦。
当您无法避免使用嵌套的响应式网格时，请确保：
- 所有容器（容器、选项卡、折迭等）都具有属性
layout = responsiveGrid。 - 不要在容器层次结构中混合使用属性
layout = simple。
这包括页面模板中的所有结构化容器。
内部容器的列号不得大于外部容器的列号。 下面的示例满足此条件。 对于默认（桌面）屏幕，外部容器的列号为8，而内部容器的列号为4。
| code language-text |
|---|
|
| code language-html |
|---|
|