aem - 直接去除装饰标签 aem

Question

如何在 AEMsightly 中仅在预览/ Release模式下删除装饰标签？

我看过问题和答案:AEM/CQ: Conditional CSS class on decoration tag

这会删除装饰，但会阻止我编辑组件，因为它也会删除编辑和设计模式下的装饰。需要什么条件才能只删除预览/发布中的装饰标签？

我还发现可以将以下代码添加到我的 java-use 类的 activate 方法中:

if (!getWcmMode().isEdit() && !getWcmMode().isDesign()) {
           IncludeOptions.getOptions(getRequest(), true).setDecorationTagName("");
    }

这将删除除一个装饰标签之外的所有装饰标签，请参见下面的示例:

wcmmode=disabled 中的 HTML 在激活方法中没有上述代码:

<ul class="timeline">
    <div class="section timelineTag">
    <div class="section timelineTag">
    <div class="section timelineTag">
    <li class="clear"></li>
</ul>

wcmmode=disabled 中的 HTML，并在 activate 方法中使用上述代码:

<ul class="timeline">
    <div class="section timelineTag">
    <li class="event" href="#">
    <li class="event" href="#">
    <li class="clear"></li>
</ul>

当我将指定的代码添加到 activate 方法中时，它不会消失，如何删除 ul 中的第一个装饰 DIV 标记？

根据此处的要求，详细查看有问题的组件(更新于 07/05/2015):

Java 类

public class TimelineClass extends WCMUse {

    @Override
    public void activate() throws Exception {
        //Remove default wrapping performed by AEM for the preview mode 
        if (!getWcmMode().isEdit() && !getWcmMode().isDesign()) {
               IncludeOptions.getOptions(getRequest(), true).setDecorationTagName("");
        }   
    }
}

HTML 代码:- 这涉及两个组成部分。首先是包含 ul 标签的容器组件- 然后将标签组件从 sidekick 拖放到容器中，以在发布时创建上面显示的列表。

容器代码:

<div class="az-timeline row">
<section class="small-12 columns">
    <section class="wrapper">
        <ul class="timeline">
            <!-- /* The parsys where all of the timeline tags will be dropped */ -->
            <div data-sly-resource="${'par-wrapper' @ resourceType='foundation/components/parsys'}" data-sly-unwrap></div>  
            <li class="clear"></li>
        </ul>
    </section>  
</section>

拖放到上面的容器parsys中的标签组件:

<li data-sly-use.timelineTag="TimelineClass" class="event" href="#">
    <img style="width: 165px;" data-sly-test="${properties.outerImage}" alt="placeholder" src="${properties.outerImage}"/>
    <article>
        <h5>${properties.heading || 'Timeline heading'}</h5>
        <h4>${properties.subheading || 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt labore molestias perspiciatis reiciendis.'}</h4>
        <p>${properties.text || 'Sed molestie, mauris sit amet egestas malesuada, felis magna commodo urna, vel consequat lorem enim ac diam. Aenean eget ex vitae enim cursus facilisis ac feugiat nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'}</p>
        <img style="height: 130px;" data-sly-test="${properties.innerImage}" alt="" src="${properties.innerImage}" />
        <a data-sly-test="${properties.link}" class="az-sbButton" href="${properties.link}">${properties.linkText || 'More'}<span class="owi-az-linkIcon internal"></span></a>
    </article>
</li>

几个标签组件被拖放到容器中的 parsys 中，wcmmode=disabled 中的结果是上面显示的第二个 ul，列表中的第一项被 div 标签包围

Answer 1

我还没有使用 Sightly 的东西，但我已经通过在 JCR 中的组件上分配属性“cq:noDecoration”( bool 值设置为 true)成功删除了额外的 div。尝试一下，看看是否有帮助。