模板编辑器 AEM 未按预期工作

Question

我们在 AEM 6.2 中使用模板编辑器来创建模板，我们按照以下步骤创建模板-

1.创建在我们零售网站中完成的页面模板。 2.使用上面的页面模板创建空页面模板。 3.使用空页面模板创建模板。

根据我们的要求对我们零售页面组件进行了以下修改-

1. 因为我们需要将页眉和页脚作为全宽 parsys，即 1340 宽度和正文作为 940 宽度-

   .site-wrapper { 宽度：1340px； } 。容器 { 宽度：940 像素； }

所以我们在 /apps//components/structure/page/partials/body.html 中做了以下修改 -

<div class="site-wrapper">
<div  data-sly-resource="${ @ path='header', resourceType='/apps/<projectname>/components/structure/header'}" 
data-sly-unwrap>
</div>
    </div>
    <div class="container"
       data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer">
       <sly data-sly-repeat="${templatedContainer.structureResources}"
          data-sly-resource="${item.path @ resourceType=item.resourceType, decorationTagName='div'}" />
    </div>
    <div class="site-wrapper">
    <div  data-sly-resource="${ @ path='footer', resourceType='/apps/<projectname>/components/structure/footer'}" data-sly-unwrap></div>
    </div>

此外，我们还有一些组件将在页面上占据全宽，因此我在全宽 div 下添加了 responsivegrid 组件。

但我无法编辑模板中的页眉和页脚组件，因为它们不在模板资源下。

此外，即使我在页眉和页脚下添加设计对话框，我也无法在设计模式下直接在页面上编辑这些组件，即使它们已解锁。

如果我在这里做错了什么或者我们无法像在我们零售网站中那样自定义 body.html，请告诉我。

我想为全宽和正文使用不同的 parsys。 而且我不想使用 css 进行控制，因为我有多个全宽组件。

问候 安库尔

Answer 1

首先，模板编辑器的目标是不做任何静态包含，就像您在页面组件上编辑的那样，因为模板编辑器现在提供了一个 UI 来在页面级别包含这些组件，允许定义哪些包含作者可以在结果页面上编辑或不编辑组件。这样，如果某个页面突然需要另一个页眉或页脚，则可以通过模板编辑器的 UI 进行编辑，而无需开发周期。

所以我建议您删除对 body.html 的编辑，而是确保您的页眉和页脚组件是可编辑的：这意味着 cq:Component 节点必须有一个标题 (jcr:title)，一个组(componentGroup)，以及 cq:editConfig，经典对话框或经典设计对话框（在 6.2 及之前版本中，仍然需要经典对话框才能使组件可编辑，但对于未来的版本，可以提供触摸对话框）。

到那里后，这里有在 AEM 6.2 中使用模板编辑器 UI 设置站点的详细说明：

创建模板

目前，我们将在全局文件夹中创建模板，但稍后您必须确保所选文件夹特定于您的站点。

1. 转到模板编辑器（在 AEM 的全局导航中，选择常规 > 模板）。
2. 选择全局文件夹（或您的站点特定文件夹）。
3. 点击“创建”按钮并选择“HTML5 页面”，点击“下一步”并为您的模板命名，例如“简单页面”，然后点击“创建”并选择“打开”。

添加客户端库

让我们配置页面组件以加载我们网站所需的 CSS 和 JS 客户端库。

4. 在模板编辑器的“结构”模式下，选择左上角的第二个图标（“页面信息”）并选择“页面策略”。策略基本上是可重用的设计配置，如果需要，可以跨多个模板共享和重用。我们要做的是复制该策略，然后对其进行编辑以指示页面加载其他客户端库。
5. 在“策略”对话框中，复制带有双箭头图标的“默认页面”策略，并将其重命名为“配置”。然后单击对话框右上角的复选标记进行保存。
6. 再次在左上角（“页面信息”）菜单中，这次选择“页面设计”来编辑实际的设计配置。
7. 编辑列表以包含您计划使用的组件所需的所有客户端库。如果模板作者不是开发人员，这通常是开发人员必须指示模板作者必须在特定站点的页面上加载哪些客户端库的地方。如果您安装了We.Retail，您可以添加一个字段并将we-retail.base 粘贴到其中。点击右上角的复选标记保存。

添加结构组件

结构组件是那些通常通过页面组件上的静态包含进行硬编码的组件。我们通常不希望页面作者以后可以编辑结构组件，除非明确定义。

8. 在页面上，选择空 parsys，然后在其工具栏中选择第一个图标（“策略”）以编辑策略。
9. 在“策略”对话框中，复制“默认布局容器”策略并将其重命名为“模板配置”。这将是配置的名称，它告诉模板中哪些组件可用于该页面级布局容器。保存。
10. 当页面重新加载时，再次选择空 parsys，这次选择第二个图标（“设计”）来编辑设计配置。
11. 在打开的设计对话框中，选择您希望在模板编辑器中可用的所有组件（例如，除了已经选择的少数通用组件外，还要选择“We.Retail”和“We .Retail.Structure" 列表底部的组件组，或您使用 componentGroup 属性分配给组件的组名称）。确保还选择了“布局容器”组件，因为这是我们稍后需要使页面可编辑的段落系统（又名 parsys）。保存。
12. 您现在应该会看到您的组件显示在左侧的“组件”栏，它允许将页眉和页脚组件拖放到页面（对于 We.Retail，页眉名为“We.Retail Page Header”并且位于组件列表的最底部，与页脚类似）。
13. 还在页眉和页脚组件之间拖动一个“布局容器”组件，这是我们将为页面作者提供可编辑的实际 parsys。因此，在您的页面上，您现在至少应该具有以下组件：您的页眉（例如“We.Retail Page Header”）、“布局容器”和您的页脚（例如“We.Retail Page Footer”）。

使模板可编辑

我们现在必须指定我们希望页面作者能够编辑添加的哪些组件。

14. 选择出现在页眉和页脚之间的 parsys 占位符，然后单击工具栏的最后一个图标（“解锁结构组件”）。
15. 完成此操作后，占位符会显示“布局容器没有允许的组件”，原因是此 parsys 尚未分配策略来定义页面作者的允许组件列表。因此，再次选择此 parsys 占位符并从工具栏中选择第二个图标（“策略”）。
16. 要使我们的策略基于之前编辑的策略，请选择“模板配置”，然后点击重复图标并将其重命名为“页面配置”。保存。
17. 现在允许的组件列表出现在 parsys 占位符下方，看起来不错，只是我们想删除我们希望仅用于模板结构的组件。因此，让我们再次选择占位符并从工具栏中选择第三个图标（“设计”）。
18. 在设计对话框中，取消选中特定于结构的组件和组（例如，取消选中“We.Retail.Structure”组）。保存。

使用模板

就是这样，我们现在可以启用模板并在网站上使用它。

19. 在模板管理员（仍应在之前的浏览器选项卡中打开）中，选择您新创建的模板并点击“启用”并确认“启用”。
20. 为了能够从我们使用的文件夹的模板创建页面，需要在父页面上放置cq:allowedTemplates 属性（通常，此属性将设置为站点的根页面）。但是，要创建第一个根页面，我们最初只需使用 CRXDE Lite 将该属性添加到 /content 节点。所以转到http://localhost:4502/crx/de/index.jsp#/content 并在根content 节点上设置cq:allowedTemplates 等于"/conf/global/settings/wcm/templates/.*"（或您在其中创建模板的任何文件夹）的多字符串属性。
21. 保存。
22. 返回 AEM 打开全局菜单并转到站点，然后在根文件夹中单击“创建”并选择“页面”。
23. 选择我们的“简单页面”模板，点击“下一步”，为页面命名，如“我的网站”，然后点击“创建”和“打开”。

您现在应该看到带有已定义页眉和页脚的页面，但只有中间的 parsys 是可编辑的。此外，所需的组件应显示在第二个“组件”选项卡下的左栏。

创建模板类型

为了避免每次想要创建一个新模板时都必须重复所有这些步骤（主要是 1-18 个），我们可以从我们创建的模板中创建一个模板类型。

24. 在 CRXDE Lite 中，转到您创建模板的文件夹，例如 /conf/global/settings/wcm/templates，然后复制应该成为模板类型的模板，例如我们示例中的 simple-page 节点。
25. 移动到template-types 文件夹（例如，在我们的例子中为/conf/global/settings/wcm/template-types）并将复制的节点粘贴到那里。
26. 保存。

现在，在全局文件夹中创建模板时，可以选择“简单页面”作为起点。

如您所见，模板编辑器引入了一个非常大的变化，不仅在技术上，而且在过程上：现在可以通过配置来实现所需的开发步骤。因此，我建议仅编辑页面组件以适应技术 HTML 标题，而不是硬编码应在页面上显示的任何视觉项目，因为在几个月/几年内，视觉项目肯定会发生变化并且将需要它们的多种变体，您希望减轻开发需求以实现更快的更改。

以下链接也很有帮助：

• https://docs.adobe.com/docs/en/aem/6-2/develop/templates/page-templates-editable.html
• http://fr.slideshare.net/PatrickFauchre/empower-template-authors
• https://github.com/Adobe-Marketing-Cloud/aem-sites-example-custom-template-type

Answer 2

如果您将使用诸如<div data-sly-resource="${ @ path='footer', resourceType='/apps/<projectname>/components/structure/footer'}" data-sly-unwrap></div> 之类的调用来检查模板中包含的资源，在编辑时往往会出现问题，到目前为止，我已经发现如果资源的节点不存在，这些资源不可编辑。参考一篇围绕它的文章here。

我们所做的是创建一个脚本来在页面加载时创建节点 (EmbeddedComponent.js) -

"use strict";

/**
 * Creates a component node with name, if node does not yet exist.
 */
use([], function () {
    var newResourceName = this.name;
    var newResourceType = this.type;
    var resourceResolver = resource.getResourceResolver();
    var newNodePath = resource.path + "/" + newResourceName;
    var existingComponentResource = resourceResolver.getResource(newNodePath);

    if (existingComponentResource == null) {
        var properties = {
            "jcr:primaryType": "nt:unstructured",
            "sling:resourceType": newResourceType
        };
        resourceResolver.create(resource, newResourceName, properties);
        resourceResolver.commit();
    }
});

在你的 HTML 脚本中你可以做类似的事情 -

<div data-sly-use="${'Path to script/EmbeddedComponent.js' @ name='header', type=resTypHeader}"
     data-sly-resource="<header resource type>">

Answer 3

您是否尝试过页眉和页脚包含脚本中的data-sly-unwrap="${!wcmmode.edit}"？