adobe - 无法删除可编辑模板 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

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

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

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

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

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

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

希望这对您有所帮助。

Answer 3

监听inspectable-added事件并添加child nodeswith 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));

而已！现在，当您添加一个具有嵌套组件的组件时，例如 a custom-layout-containeror parsysor custom components-inside-components; 它应该具有所有功能。

祝你好运...