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

Question

我正在（尝试）自定义 .content.xml 上的 Teaser 组件以满足我的要求，但我不明白如何设置标签选项的顺序。最好的解决方案是根据父组件为 hide/unhide Teaser 的字段编写一些逻辑，但我还不知道该怎么做。同时，我正在编辑 XML 文件。

选项：

图片
元数据
文字
Link & 动作

第一件奇怪的事情是，我编写的代码只显示三个选项，但在 AEM 编辑器上一直显示所有选项，“Link 和操作”未在 .XML 上声明。正如您在下面的印刷品中看到的那样。

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

第二件事是我想把“Link & Actions”选项作为选项卡栏上的最后一个选项。那么，如何制作呢？

下面的打印是我目前的行为。

Answer 1

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

部分回答你的问题

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

<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 - 包含当前节点应该位于前面的兄弟节点的名称。

现在回答你的第二部分，如果你想在你的组件中完全隐藏链接和操作选项卡，那么创建一个名为 actions 的节点（与父节点同名）然后设置属性 sling:hideResource 到 true

<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>

编辑：您如何知道要使用哪些选项卡名称？： Sling Resource Merger 在您 overlay a component 时起作用（将其视为 Java 中的继承，您正在扩展另一个 class）。

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

因为它不是绝对路径，所以在存储库中搜索组件的优先顺序是 /libs/ 其次是 /apps/

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

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

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

How to edit Teaser's Tab options order on AEM?

adobe

aem