2

如何利用 WCM Parsys 组件在 AEM 6 中创建另一个特定组件的多个实例的无序列表？

我需要确保列表由ul标签包裹，每个内部组件都是一个li标签，没有额外的div标签环绕ulor lis，并确保每个内部组件的属性可以在作者模式下编辑。

（到目前为止，我的尝试要么有大量额外的div标签，破坏了已经构建的布局和语义，要么decorationTagName='li'在作者模式下使用组件的编辑器框都位于彼此之上，因此您只能编辑最顶层的控件）。

4

4 回答 4

3

在使用 AEM 6 时查看 Sightly。它提供了一种在迭代子资源时向子资源添加参数的好方法……这允许您添加资源类型。这是聚合组件的好方法。Feike Visser 写了一个漂亮的五页长教程。

通过 Sightly 列出孩子显然并不容易。

<ul>
  <!--/* for example jcr:content */-->
  <div data-sly-list.par="${resource.listChildren}"
       data-sly-unwrap>
    <!--/* for example a parsys */-->
    <div data-sly-list.item="${par.listChildren}"
         data-sly-unwrap>
      <!--/* all children of the parsys rendered with an li tag */-->
        <div data-sly-resource="${item.path @ wcmmode='disabled'}"
             data-sly-unwrap></div>
      </div>
    </div>
  </div>
</ul>

这将呈现内容资源的 parsys 的子项。一种优雅的方式是使用通过 JavaScript、WCMUse 或 SlingModel 提供的模型。但是通过这种方式，您可以跳过编程以便轻松迭代。检查资源名称也有效，因此您可以增加一点复杂性，尽管您希望在复杂场景中使用适当的模型。

于 2014-07-28T16:22:02.140 回答
2

OOTB parsys 组件使用 div 包裹内部组件，因此如果您需要完全不同的结构，您需要使用从现有结构扩展并使用不同包裹标记的自定义 parsys。

于 2014-08-04T16:23:19.333 回答
1

我通常做的是创建一个自己的容器组件，我可以在作者模式和发布/预览模式之间切换。例如，在作者模式下，仅在带有 div 的普通 parsys 中显示子组件，并且仅在预览/发布模式下呈现正确的标记：

<c:choose>
    <c:when test="${isEditMode}">
        <cq:include path="par" resourceType="foundation/components/parsys" />
    </c:when>
    <c:otherwise>
        <ul>
            <c:forEach items="${m.components}" var="comp">
                <li><cq:include path="${comp.path}" resourceType="${comp.resourceType}" /></li>
            </c:forEach>
        </ul>
    </c:otherwise>
</c:choose>

而是m一个控制器，components是一个 child 的列表Resource。

于 2014-08-04T11:00:46.213 回答
1

假设 parsys 中的组件是列表项组件（并且仅以这种方式使用），您可以使用cq:htmlTag/cq:tagName属性覆盖包含组件的元素，并使您的 parsys 呈现<ul>元素。

有关详细信息，请参阅ComponentDiv

于 2014-08-05T04:09:50.677 回答