如何在 AEM 上编辑 Teaser 的选项卡选项顺序？

Question

我正在（尝试）自定义 .content.xml 上的 Teaser 组件以满足我的要求，但我不明白如何设置选项卡选项的订单。最好的解决方案是编写一些逻辑来根据父组件隐藏/取消隐藏 Teaser 的字段，但我还不知道该怎么做。与此同时，我正在编辑 XML 文件。

选项：

• 图片
• 元数据
• 文字
• 链接和操作

1. 奇怪的第一件事是，我编写的代码只显示三个选项，但在 AEM 编辑器上保持显示所有选项，.XML 上未声明“链接和操作”。如下图所示。

路径文件：ui.apps/.../components/teaser/_cq_dialog/.content.xml

1. 第二件事是我想将“链接和操作”选项作为选项卡栏上的最后一个选项。那么，如何制作呢？

以下打印是我当前的行为。

Answer 1

您注意到的行为是由于Sling's Resource Merger 功能。可以利用相同的功能来实现您想做的一切。

部分回答你的问题

1. 您会看到 Links & Actions 选项卡，即使您尚未在对话框中定义它，因为您的组件扩展了 OOB 预告片组件，并且 Sling Resource Merger 将合并父对话框和子对话框中的选项以创建最终对话框呈现给作者。 这允许轻松扩展父级的功能，并且只在对话框中定义自定义属性。例如如果您只需要在 Teaser 组件中添加一个名为 Metadata 的新选项卡，只需在自定义组件中为该新选项卡创建配置就足够了，其余配置将从您的父组件流过。

<tabs 
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/tabs">
    <items jcr:primaryType="nt:unstructured">
        <metadata ...>
    </items>
</tabs>

然后您可以使用 Sling 提供的以下属性来进一步自定义属性/选项卡的顺序或删除/隐藏某些属性。

• sling:hideProperties - 指定要隐藏的属性或属性列表。通配符 * 隐藏所有。

• sling:hideResource - 指示资源是否应完全隐藏，包括其子项。

• sling:hideChildren - 包含要隐藏的子节点或子节点列表。将保留节点的属性。通配符 * 隐藏所有。

• sling:orderBefore - 包含当前节点应位于其前面的兄弟节点的名称。

现在回答您的第二部分，如果您想在组件中完全隐藏 Links & Actions 选项卡，则创建一个名为 actions 的节点（与父节点同名），然后将属性 sling:hideResource 设置为 @987654335 @

<tabs 
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/tabs">
    <items jcr:primaryType="nt:unstructured">
        <metadata ...>
        <actions 
            jcr:primaryType="nt:unstructured"
            sling:hideResource="{Boolean}true"/>
    </items>
</tabs>

或者，如果您不想删除它而只是移动到最后，只需创建一个名为 actions 的节点并将其放在所有其他节点之后，或者使用 sling:orderBefore 属性指定选项卡的顺序.下面显示了一个顺序示例，其中元数据选项卡出现在第二个位置，然后是文本，然后是链接和操作。

<tabs 
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/tabs">
    <items jcr:primaryType="nt:unstructured">
        <metadata 
             jcr:primaryType="nt:unstructured"
             sling:orderBefore="text"
             ...>
        <text 
            jcr:primaryType="nt:unstructured"
            sling:orderBefore="actions"/>
    </items>
</tabs>

编辑：您如何知道要使用哪些标签名称？： 当您 overlay a component 时，Sling Resource Merger 有效（将其想象为 Java 中的继承，您正在扩展另一个类）。

您可以使用组件节点上的属性sling:resourceSuperType 覆盖现有组件。例如，这是我的预告片组件的屏幕截图，它覆盖了 OOB 预告片组件core/wcm/components/teaser/v1/teaser。

由于不是绝对路径，所以在仓库中查找组件的优先顺序是/libs/后跟/apps/

因此，在 /libs/ 下搜索，我能够在 /libs/core/wcm/components/teaser/v1/teaser 找到该组件，并展开对话框显示以下选项卡。在我们的组件中需要使用相同的名称来覆盖位置或可见性或任何其他吊索合并功能。

我建议您大致了解 Sling 的继承概念，以便更轻松地使用 AEM。