aem - AEM/CQ 中的无序列表 - Parsys

Question

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

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

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

Answer 1

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

通过 Sightly 列出 child 名单显然并不容易。

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