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

Question

我在 Adob​​e 论坛中发布了与 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>

处的“emulators”属性不能为空

布局模式

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