AEM/CQ 中的无序列表 - Parsys

Question

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

我需要确保列表被ul 标签包裹，每个内部组件都是li 标签，没有额外的div 标签包裹在ul 或lis 周围，并且确保每个内部组件的属性都可以在作者模式下进行编辑。

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

Answer 1

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

通过 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 提供的模型。但是通过这种方式，您可以跳过编程以便轻松迭代。检查资源名称也可以工作，因此您可以增加一点复杂性，尽管您希望在复杂场景中使用适当的模型。

Answer 2

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

Answer 3

我通常做的是创建一个自己的容器组件，我可以在作者模式和发布/预览模式之间切换。例如。在作者模式下，仅在带有 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 是子Resource 的列表。

Answer 4

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

欲了解更多信息，请参阅ComponentDiv