无法删除可编辑模板AEM中的组件

Question

我一直在按照我在此处链接的教程创建自定义布局组件https://helpx.adobe.com/experience-manager/using/bootstrap_grid.html，但我注意到无法从可编辑模板中删除此组件。我应该如何解决我的问题？

Answer 1

TLDR;

• 在要删除的组件中的parsys中添加内容（假设它具有parsys或将组件拖动到的区域）。
• 刷新页面
• 删除结构组件

长期修复

要进行更长期的修复，请让有问题的组件使用cq：template节点生成缺少的内容。

到底发生了什么

这有点古怪-但我会尽力解释。

如果使用@ resourceType选项通过data-sly-resource引用结构组件中的内容，则无法删除结构化组件。

我刚听完这个铃声。我有一个非常简单的结构组件：

<div class="full-stack-content">
    <div class="container">
        <div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/responsivegrid'}"></div>
    </div>
</div>

当我将其拖到可编辑模板上时，我永远无法将其删除。

当您在渲染脚本中使用@resourceType且内容实际上不存在时，它会创建称为 SyntheticResource 的内容。

因此，在我的示例中，我去了JCR，在我的content下没有content-container节点：

如果我手动创建缺少的content（由于上述代码中的data-sly-resource="${'content'），则可以删除该组件。

如您所见，现在存在删除选项：

要快速修复，只需将某些东西拖入parsys中以创建节点。

要获得更长期的修复，请让有问题的组件使用cq：template节点生成该内容。

Answer 2

仅供参考，此页面不使用可编辑模板。

• 当页面在吊索中具有相对路径时：resourceType如下：＆＃39; grid-aem / components / structure / page＆＃39;，它使用静态模板。
• 可编辑模板在/ conf文件夹下创建。
静态和可编辑模板之间的
• More differences。

示例中提供的静态模板仅包含/apps/grid-aem/components/structure/page/partials/main.html中的1个parsys组件。

因此，使用删除按钮可以在页面本身轻松删除在parsys中添加的组件：

如果您要在colcontrol组件中删除一个parsys，这是一个自定义colcontrol，其逻辑实现为更改列数。您需要使用所需的列数创建组件。例如，选择3列显示3个解析：

在同一组件上选择2列显示2个这样的解析：

希望这会对你有所帮助。

Answer 3

收听inspectable-added事件，并将child nodes与Javascript添加：

步骤1：创建一个ClientLibraryFolder并添加cq.authoring.dialog.all类别：

步骤2：编写Javascript来监听inspectable-added事件。 callback function应该将child-nodes添加到组件具有全部功能（例如editable-template等所需的EDIT, DELETE, MOVE, COPY中。）

(function($document, $) {
  $document.on('cq-inspectable-added', cb_inspectableAdded);
  function cb_inspectableAdded(evt) {
    try {
        var inspectable = evt.inspectable;
        var ajaxConfig = {
            url: evt.inspectable.path,
            data: {
                'sling:resourceType': inspectable.type
            },
            async: false    
        };

        if(inspectable.type.indexOf('myApp/components') > -1) $.post(ajaxConfig); //  replace myApp/components with your partial-path
    } catch(e) {
        console.error(e);
    }   
  }
}($(document), jQuery));

就是这样！现在，当您添加具有嵌套组件的组件时，例如custom-layout-container或parsys或custom components-inside-components；它应该具有所有功能。

祝你好运...