响应式断点

了解如何为AEM响应式页面编辑器配置新的响应式断点。

创建CSS断点

首先,在AEM响应式网格CSS中创建响应式AEM站点所遵循的媒体断点。

/ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less 文件,创建要与移动设备模拟器一起使用的断点。 记下 max-width 对于每个断点,因为这会将CSS断点映射到AEM响应式页面编辑器断点。

创建新的响应式断点

自定义模板的断点

打开 ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml 文件和更新 cq:responsive/breakpoints 与新断点节点定义一起使用。 每个 CSS断点 下应该有对应的节点 breakpoints 及其 width 属性设置为CSS断点的 max-width.

自定义模板的响应式断点

创建模拟器

必须定义AEM模拟器,以允许作者在页面编辑器中选择要编辑的响应式视图。

在下创建模拟器节点 /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators

例如,/ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape。从以下位置复制引用模拟器节点 /libs/wcm/mobile/components/emulators CRXDE Lite并更新副本,以加快节点定义。

创建新模拟器

创建设备组

将模拟器分组到 使其在AEM页面编辑器中可用.

创建 /apps/settings/mobile/groups/<name of device group> 下的节点结构 /ui.apps/src/main/content/jcr_root.

创建新设备组

创建 .content.xml 文件位置 /apps/settings/mobile/groups/<device group name> 并使用与以下内容类似的代码定义新模拟器:

创建新设备

更新模板的设备组

最后,将设备组映射回页面模板,以便可以在页面编辑器中为使用此模板创建的页面使用模拟器。

打开 ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml 文件并更新 cq:deviceGroups 属性以引用新的移动设备组(例如, cq:deviceGroups="[mobile/groups/customdevices]")

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d