Question

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

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

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

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

.site-wrapper { 宽度：1340px; } 。容器 { 宽度：940px; }

所以我们在/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控制，因为我有多个全宽的组件。

此致 ANKUR

Answer 1

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

因此我建议您删除body.html的编辑内容，而不要确保您的页眉和页脚组件是可编辑的：这意味着cq:Component节点必须具有标题（{{1 }}，一个组（jcr:title），以及一个componentGroup，一个经典的对话框或一个经典的设计对话框（在6.2和之前，仍然需要经典的对话框来使组件可编辑，但是对于未来的版本来说，情况不再如此，可以提供触摸对话框。

在那里，以下是使用AEM 6.2中的模板编辑器UI设置网站的详细说明：

创建模板

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

转到模板编辑器（在AEM的全局导航栏中，选择常规＆gt;模板）。
选择全局文件夹（或您的站点特定文件夹）。
点击＆＃34;创建＆＃34;按钮并选择＆＃34; HTML5 Page＆＃34;，点击＆＃34;下一步＆＃34;并为您的模板命名，例如＆＃34;简单页面＆＃34;然后点击＆＃34;创建＆＃34;并选择＆＃34;打开＆＃34;。

添加客户端库

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

In＆＃34; Structure＆＃34;在模板编辑器的模式中，从左上角选择第二个图标（＆＃34;页面信息＆＃34;）并选择＆＃34; Page Policy＆＃34;。策略基本上是可重用的设计配置，如果需要，可以跨多个模板共享和重用。我们要做的是复制该策略，然后对其进行编辑以指示页面加载其他客户端库。
在＆＃34;政策＆＃34;对话框，复制＆＃34;默认页面＆＃34;使用双箭头图标的政策，并将其重命名为＆＃34;配置＆＃34 ;.然后单击对话框右上角的复选标记进行保存。
再次在左上角（＆＃34;页面信息＆＃34;）菜单中，选择此时间＆＃34; Page Design＆＃34;编辑实际的设计配置。
编辑列表以包含您计划使用的组件所需的所有客户端库。如果模板作者不是开发人员，那么开发人员通常必须指示模板作者必须在特定站点的页面上加载哪些clientlib。如果您安装了We.Retail，则可以添加字段并将cq:editConfig粘贴到其中。单击右上角的复选标记即可保存。

添加结构组件

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

在页面上，选择空的parsys并在其工具栏中选择第一个图标（＆＃34; Policy＆＃34;）以编辑策略。
在＆＃34;政策＆＃34;对话框，复制＆＃34;默认布局容器＆＃34;策略并将其重命名为＆＃34;模板配置＆＃34;。这将是配置的名称，该配置告知该页面级布局容器的模板中可用的组件。保存。
当页面重新加载时，再次选择空的parsys，这次选择第二个图标（＆＃34; Design＆＃34;）来编辑设计配置。
在打开的设计对话框中，选择您希望在模板编辑器中可用的所有组件（例如，除了已选择的少数常规组件外，还要选择＆＃34; We.Retail＆＃34 ;以及列表底部的＆＃34; We.Retail.Structure＆＃34;组件组，或者您使用we-retail.base属性分配给组件的组名称。确保还有＆＃34;布局容器＆＃34;选择组件，因为这是我们稍后要求使页面可编辑的段落系统（aka parsys）。保存。
您现在应该看到您的组件显示在左侧＆＃34;组件＆＃34;铁路，允许拖动和将页眉和页脚组件放到页面上（对于We.Retail，标题名为＆＃34; We.Retail Page Header＆＃34;并且位于组件列表的最底部，并且它与页脚类似）。
同时拖动＆＃34;布局容器＆＃34;页眉和页脚组件之间的组件，这是我们为页面作者编辑的实际解析。因此，在您的页面上，您现在至少应该拥有以下组件：标题（例如＆＃34; We.Retail页眉和＃34;），＆＃34;布局容器＆＃34;以及您的页脚（例如＆＃ 34; We.Retail Page Footer＆＃34;）。

使模板可编辑

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

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

使用模板

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

在模板管理员（应在之前的浏览器标签中仍然打开）中，选择新创建的模板，然后按＆＃34;启用＆＃34;并确认＆＃34;启用＆＃34;。
为了能够从我们使用的文件夹的模板创建页面，需要在父页面上放置componentGroup属性（通常，此属性将设置为站点的根页面）。但是，要创建第一个根页面，我们最初只需使用CRXDE Lite将该属性添加到cq:allowedTemplates节点。因此，转到http://localhost:4502/crx/de/index.jsp#/content和根/content节点集content多字符串属性，该属性等于cq:allowedTemplates（或您在模板中创建的任何文件夹）。
保存。
返回AEM打开全局菜单并转到“站点”并在根文件夹上，单击“＃34;创建＆＃34;并选择＆＃34; Page＆＃34;。
选择我们的＆＃34;简单页面＆＃34;模板，点击＆＃34;下一步＆＃34;，给页面一个标题，如＆＃34;我的网站＆＃34;然后点击＆＃34;创建＆＃34;和＆＃34;打开＆＃34;。

您现在应该看到具有已定义页眉和页脚的页面，但只有两者之间的可编辑的解析。此外，所需的组件应显示在第二个“组件”下的左侧导轨中。标签

创建模板类型

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

在CRXDE Lite中，转到您已创建模板的文件夹，例如"/conf/global/settings/wcm/templates/.*"，并复制应成为模板类型的模板，例如我们案例中的/conf/global/settings/wcm/templates节点。
转到simple-page文件夹（例如我们的情况下为template-types）并将复制的节点粘贴在那里。
保存。

现在，在全局文件夹中创建模板时，可以选择＆＃34;简单页面＆＃34;作为一个起点。

正如您所看到的，模板编辑器引入了一个非常大的变化，不仅在技术上，而且在流程中：现在可以通过配置实现所需的开发步骤。因此，我建议仅编辑页面组件以调整技术HTML标题，而不是硬编码应该在页面上显示的任何可视项目，因为在几个月/几年内可视化项目肯定足够需要进行更改并对其进行多种更改，为此您希望减轻开发需求以允许更快的更改。

以下链接也很有用：

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}"？

模板编辑器AEM无法按预期工作

3 个答案: