【问题标题】:remove decoration tags aem sightly轻轻去除装饰标签aem
【发布时间】: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 标签

标签: aem sightly


【解决方案1】:

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

【讨论】:

  • 感谢您的回复,但是这也会删除编辑和设计模式下的装饰标签,因此我将无法在编辑模式下更新组件。
  • 哇。我终于将我的网站集成到 6.0 中,并且看到了与您描述的完全相同的问题。如果我遇到答案,我会分享它。
  • 这仅适用于新组件,直到您重新加载页面。重新加载后,它们是“只读的”。
【解决方案2】:

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

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

【讨论】:

  • 感谢您的回复,这些 div 标签是由 AEM 自动生成的,因此我们无法在 HTML 标记中删除它们,因为它们不存在。
  • 你能用你正在使用的组件和你用来集成它的代码来编辑你的问题吗?
  • @samwhite024 基本上我认为你应该显示 ul 块的代码,因为你只显示 li 块。
  • 抱歉耽搁了,但我已经添加了 ul 标签
【解决方案3】:

使用 data-sly-unwrap。请参阅这篇文章和 adobe 中的引用文档 http://www.aemmastery.com/2015/04/24/remove-div-tags-sightly/

“data-sly-unwrap:从生成的标记中删除宿主元素,同时保留其内容。”

另一个选项,将 cq:htmlTag 设置为 "": http://dev.day.com/cemblog/en/experiencedelivers/2013/04/modify_the_auto-generateddivs.html

【讨论】:

  • 感谢 cmets。但是,这些 Div 标签是由 AEM 自动生成的,而不是在代码中。因此无法使用“data-sly-unwrap”。
  • 我们真的可以使用更多数据来了解您如何设置它以及为什么您只想在发布中删除它。我感觉你走上了一条不好的路。我已经使用 cq:htmlTag 用另一个选项更新了我的原始答案
  • 嗨,我刚刚重新检查了这个,你是正确的。这行得通!如果添加 jcr:primaryType = nt:unstructured 的 cq:htmlTag 和元素 cq:tagName = String = "",则自动生成的标签将被删除。非常感谢!!!
  • 很高兴为您提供帮助 :) 请投票,以便其他人找到这个答案:D
  • 抱歉,误报!这确实会根据需要删除所有装饰标签,但它也会在编辑模式期间删除标签。这使作者难以或无法编辑该组件。因此,它不能被接受为正确答案。对不起。
【解决方案4】:

正如 Rampant 建议的那样,但将时间线 ul 设置为组件的一部分并尝试将 cq:htmlTag 设置为“ul”并给它一个类时间线:您仍然可以编辑组件并且它不会弄乱显示。 http://dev.day.com/cemblog/en/experiencedelivers/2013/04/modify_the_auto-generateddivs.html

【讨论】:

    【解决方案5】:

    在编辑/预览模式示例中,当您需要有条件地删除 Sightly 中的装饰标签时,该问题的可能解决方法:

    1. 为您的组件(“父组件”)创建两个子组件 - “编辑视图”和“预览视图”。
    2. 对于“编辑视图”组件集 cq:noDecoration="{Boolean}false"
    3. 对于“预览视图”组件集 cq:noDecoration="{Boolean}true"
    4. 在 parent-component.html 中添加条件渲染,如:
     <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>
    

    提示

    1. 仅为“编辑视图”组件添加对话框。
    2. 对于“预览视图”组件,您只能保留 .content.xml 和 preview-view.html
    3. 为避免代码重复,可以使用类似结构将“编辑视图”包含到“预览视图”中
    <sly data-sly-resource="${currentNode.path @ resourceType='yourapp/components/parent-component/edit-view'}"></sly>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-06-03
      • 1970-01-01
      • 2017-12-31
      • 1970-01-01
      • 1970-01-01
      • 2020-04-07
      • 2014-06-19
      • 2017-02-06
      相关资源
      最近更新 更多