AEM：响应式网格不显示布局模式

Question

我在 Adobe 论坛上发布了 AEM 相关问题，但我仍然无法解决配置问题。

一个是我想在 editor.html

的顶部显示标尺和响应式模拟器菜单

其次，我希望组件可以自定义。例如，如果您将文本组件放在 editor.html 页面上，您可以调整组件的宽度，并在侧面添加蓝色圆点。

Adobe 论坛中的原始问题涉及我当前的配置，该配置不太适用于屏幕截图和详细信息。

原问题：https://forums.adobe.com/thread/2376694

有人能帮我解决我遇到的问题吗？

Answer 1

您需要执行几项操作才能在 AEM 中启用标尺和布局模式。

标尺（模拟器）

确保 /libs/wcm/mobile/components/simulator/simulator.jsp 位于页面的头部

使用 MobileEmulatorProvider 注册页面组件。例如：

com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-alias.xml:
mobile.resourceTypes=[geometrixx-media/components/page]

将cq:deviceGroup属性添加到根内容节点（即/etc/mobile/groups/responsive）

注意：除非页面被视为“响应式”，否则不会显示标尺。 “模拟器”属性在 http://localhost:4502/libs/wcm/core/content/pageinfo.json?path=<path to page>

处不能为空

布局模式

将 cq:responsive 节点添加到根内容节点（只需从 geometrixx-media 获取它）。例如：

<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>

如果不继承基础页面组件，在页面组件中添加/libs/foundation/components/page/cq:infoProviders/responsive节点
将 "par" parsys 更改为 wcm/foundation/components/responsivegrid
在项目中包含响应式 css 客户端库（见下文）

更多信息：https://docs.adobe.com/docs/en/aem/6-2/author/page-authoring/responsive-layout.html

AEM：响应式网格不显示布局模式

AEM: Responsive Grid does not show layout mode

aem