AEM 6.2（在此处拖动组件）Parsys 高度 0px

Question

我正在使用 AEM 6.2 并尝试使用以下代码在 crx 中创建一个 parsys 组件

但是，这个parsys在编辑模式下的高度为0px。

附上截图。

当我手动将高度更改为某些值时，例如。 40px，看起来不错。

注意：我没有为上述页面使用任何客户端库。（没有 css 和 js）

此外，geomatrix 等所有示例站点都正确显示了 parsys。

谁能指导我做错了什么？

Answer 1

我认为问题出在组件或此处显示的任何代码之外。

我认为发生的事情是 div 的 css 样式未加载，它为 droptarget 占位符提供了其尺寸。

它作为 AEM 创作客户端库的一部分加载，您应该从基础页面组件继承它。

检查页面组件的 sling:resourceSuperType 属性。它应该指向 wcm/foundation/components/page 或 wcm/foundation/components/page 或从一个组件继承。

如果已设置，那么您可能已经阻止了其中的一个脚本，很可能 head.html。

Answer 2

我认为@l-klement 正确地指出了问题出在组件外部。当我将 landingpage.html 文件重命名为 body.html 时，它开始正常工作。我认为这可能是因为 wcm/foundation/components/page 中存在 head.html 等不同的文件，这些文件需要提供正确的样式并加载某些需要的客户端库，这些客户端库将正确的样式分配给 parsys。

如果以上是真的，我的下一个问题是，我怎样才能拥有自己的head.html、body.html、header.html、footer.html 等文件而不影响 parsys 样式？

Answer 3

在页面组件的呈现脚本的头部部分包含以下代码。

<!--/* Include Adobe Dynamic Tag Management libraries for the header 
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>
*/-->
  <!--/* Initializes the Experience Manager authoring UI */-->
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>

Answer 4

为了解决您的问题，您需要在写下 parsys 代码之前首先包含 init.jsp。我的意思是这样写。

<head>

    <sly data-sly-include='/libs/wcm/core/components/init/init.jsp' />
</head>
<body>

    <sly data-sly-resource="${'par' @resourceType='foundation/components/parsys'}" />
</body>

AEM 6.2（在此处拖动组件）Parsys 高度 0px

AEM 6.2 (Drag Component Here) Parsys height 0px

components

aem