【发布时间】:2015-02-02 16:54:13
【问题描述】:
如何在 AEM 中仅在预览/发布模式下删除装饰标签?
已看到问答:AEM/CQ: Conditional CSS class on decoration tag
这删除了装饰,但阻止了我编辑组件,因为它也删除了编辑和设计模式下的装饰。需要什么条件才能仅删除预览/发布中的装饰标签?
我还看到可以将以下代码添加到我的 java-use 类的 activate 方法中:
if (!getWcmMode().isEdit() && !getWcmMode().isDesign()) {
IncludeOptions.getOptions(getRequest(), true).setDecorationTagName("");
}
这将删除除一个装饰标签之外的所有装饰标签,请参见下面的示例:
wcmmode=disabled 中的 HTML 在 activate 方法中没有上述代码:
<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>
ul中的第一个装饰DIV标签在activate方法中添加指定代码时不会消失,如何去掉?
根据此处的要求,详细查看相关组件(2015 年 7 月 5 日更新):
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标签包围
【问题讨论】:
-
你真的需要提供围绕 LI 块的代码,就像整个 UL 设置一样。
-
我已按照您的要求添加了 ul 标签