Question

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

我需要确保列表包含ul标记，每个内部组件都是li标记，{{1}不会包含额外的div标记}或ul s并确保可以在作者模式下编辑每个内部组件的属性。

（到目前为止，我的尝试都有大量额外的li标签，破坏了已经构建的布局和语义，或者如果使用div组件的编辑框全部放在彼此的顶部在作者模式下，您只能编辑最顶层的控件。

Answer 1

当您使用AEM 6时，请立即查看。它提供了一种向子资源添加参数的好方法，当迭代它们时...这允许您添加资源类型。这是聚合组件的好方法。 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>

这将呈现内容资源的子代的子代。优雅的方式是使用通过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中的组件是list-item组件（并且只使用那种方式），您可以使用cq:htmlTag/cq:tagName属性覆盖包含组件的元素，并使您的parsys呈现<ul>元件。

有关详细信息，请参阅ComponentDiv

AEM / CQ中的无序列表 - Parsys

4 个答案: