清晰地移除装饰标签aem

如何仅在AEM的预览/发布模式下移除装饰标签

我看到了问题和答案：

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

我还看到，可以将以下代码添加到java use类的activate方法中：

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

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

wcmmode中的HTML=禁用，激活方法中没有上述代码：

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

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

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

集装箱代码：

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

标记拖放到上面容器中的组件：

<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标记包围着JCR中组件上的“cq:noDecoration”（布尔值设置为true）。尝试一下，看看它是否有帮助。

如果我理解正确，并且您希望div.section.timelineTag仅在编辑模式下出现，那么代码将是

<ul>
  <div data-sly-test="${wcmmode.edit}" class="section timelineTag">

使用数据展开。请参阅本文和adobe提供的参考文档

“数据展开：从生成的标记中删除宿主元素，同时保留其内容。”

另一个选项，将cq:htmlTag设置为“”：

---

如建议，但将时间线ul作为组件的一部分，并尝试将cq:htmlTag设置为“ul”“并给它一个类时间线：你仍然可以编辑组件，它不会干扰显示

在编辑/预览模式的示例中，当您需要有条件地删除装饰标记时，此问题的可能解决方法：

为组件创建两个子组件（“父组件”）-“编辑视图”和“预览视图”

对于“编辑视图”组件集cq:noDecoration=“{Boolean}false”

对于“预览视图”组件集cq:noDecoration=“{Boolean}true”

在parent-component.html中添加条件呈现，如：

提示：

仅为“编辑视图”组件添加对话框

对于“预览视图”组件，您只能保留.content.xml和preview-view.html

为了避免代码重复，可以使用类似于

感谢您的回复，但是这也会在编辑和设计模式下删除装饰标签，因此我无法在编辑模式下更新组件。哇。我终于将我的站点集成到了6.0中，并且看到了与您描述的完全相同的问题。如果我遇到一个答案，我会分享它。这只适用于新组件，直到你重新加载页面。重新加载后，它们是“只读”的。感谢您的回复，这些div标记由AEM自动生成，因此我们无法在HTML标记中删除它们，因为它们不存在。您是否可以使用正在使用的组件编辑您的问题，你用来集成它的代码是什么？@samwhite024基本上我认为你应该清楚地显示ul块代码，因为你只是显示了li块。很抱歉延迟，但我已经添加了ul标记谢谢你的评论。但是，这些Div标记由AEM自动生成，不在代码中。因此，不可能使用“数据隐藏展开”。我们可以使用更多的数据，了解您是如何设置此项的，以及您为什么只想在发布中删除此项。我觉得你正在走一条不好的路。我已经用另一个选项更新了我的原始答案，使用cq:htmlTagHi，我刚刚重新检查了这个选项，您是正确的。这管用！如果使用元素cq:tagName=String=”“添加jcr:primaryType=nt:unstructured的cq:htmlTag，则自动生成的标记将被删除。非常感谢你！！！很高兴能帮上忙：）请向上投票，让其他人找到这个答案：对不起，但虚惊一场！这会根据需要删除所有装饰标记，但在编辑模式下也会删除标记。这使得作者很难或不可能编辑组件。因此，它不能被接受为正确答案。很抱歉。你真的需要给出LI块周围的代码，就像整个UL设置一样。我已经按照你的要求添加了UL标签

<ul>
  <div data-sly-test="${wcmmode.edit}" class="section timelineTag">

 <sly data-sly-test="${isEditMode}">
      <sly data-sly-resource="${'editViewResourceName' @ resourceType='yourapp/components/parent-component/edit-view'}"></sly>
  </sly>   

<sly data-sly-test="${isPreviewMode}">
    <sly data-sly-resource="${'editViewResourceName' @ resourceType='yourapp/components/parent-component/preview-view'}"></sly>
</sly>

<sly data-sly-resource="${currentNode.path @ resourceType='yourapp/components/parent-component/edit-view'}"></sly>