无法删除可编辑模板 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-container 下面没有 content 节点：

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

您可以看到删除选项现在在那里：

为了快速修复 - 只需将一些东西拖入 parsys 即可创建节点。

对于更长期的修复，让相关组件使用 cq:template 节点生成该内容。

Answer 2

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

• 当页面在 sling:resourceType 中有这样的相对路径时：'grid-aem/components/structure/page'，它使用的是静态模板。
• 在 /conf 文件夹下创建可编辑模板。
• More differences 在静态模板和可编辑模板之间。

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

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

如果您希望删除 colcontrol 组件中的 parsys，这是一个自定义 colcontrol，其实现了更改列数的逻辑。您需要编写具有所需列数的组件。例如选择 3 列显示 3 parsys：

在同一组件上选择 2 列会显示 2 个 parsys，如下所示：

希望这对您有所帮助。

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；它应该具有所有功能。

祝你好运……