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

Question

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

1.处理页面模板,如我们零售网站所做.2.使用上面的页面模板创建空页面模板.3.使用空页面模板处理模板.

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

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

   .site-wrapper {width:1340px; } .container {width: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组件.

但我无法编辑模板中的页眉和页脚组件,因为它们不在templateresource下.

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

如果我在这里做错了或者我们不能像在我们的零售网站那样定制body.html,请告诉我.

我想过为全宽和身体使用不同的parsys.我不想控制使用CSS,因为我有多个全宽的组件.

关心Ankur

Answer 1

首先,模板编辑器的目标恰恰是不执行任何静态包含,例如您在页面组件上编辑的内容,因为模板编辑器现在提供了一个UI以在页面级别包含此类组件,允许定义哪些包含的组件可以是作者在结果页面上编辑或不编辑.这样,如果某个页面突然需要另一个页眉或页脚,则可以通过模板编辑器的UI编辑它,并且不需要开发周期.

因此,我建议您删除body.html的编辑内容,而不是确保您的页眉和页脚组件是可编辑的:这意味着该cq:Component节点必须具有title(jcr:title),group(componentGroup)以及a cq:editConfig,a经典对话框或经典设计对话框(在6.2和之前,仍然需要经典对话框来使组件可编辑,但对于将来可能提供触摸对话框的未来版本将不再是这种情况).

进入后,以下是使用AEM 6.2中的模板编辑器UI设置站点的详细说明:

创建模板

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

1. 转到模板编辑器(在AEM的全局导航中,选择常规>模板).
2. 选择全局文件夹(或您的站点特定文件夹).
3. 点击"创建"按钮,选择"HTML5页面",点击"下一步",给你的模板命名,如"简单页面",然后点击"创建",选择"打开".

添加客户端库

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

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

添加结构组件

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

8. 在页面上,选择空的parsys并在其工具栏中,选择第一个图标("Policy")来编辑策略.
9. 在"策略"对话框中,复制"默认布局容器"策略并将其重命名为"模板配置".这将是配置的名称,该配置告知该页面级布局容器的模板中可用的组件.保存.
10. 在页面重新加载时,再次选择空的parsys,这次选择第二个图标("Design")来编辑设计配置.
11. 在打开的设计对话框中,选择要在模板编辑器中提供的所有组件(例如,除了已选择的少数常规组件外,还要选择"We.Retail"和"We.Retail".结构"列表底部的组件组,或者您使用componentGroup属性分配给组件的组名称" .确保选择了"布局容器"组件,因为这是我们稍后需要使页面可编辑的段落系统(也称为parsys).保存.
12. 您现在应该看到您的组件显示在左侧"组件"栏中,它允许将页眉和页脚组件拖放到页面中(对于We.Retail,页眉名为"We.Retail Page Header"并且位于组件列表的最底部,它与页脚类似.
13. 还可以在页眉和页脚组件之间拖动"布局容器"组件,这是我们将为页面作者编辑的实际解析.所以在你的页面上,你现在应该至少有以下组件:你的标题(例如"We.Retail页面标题"),"布局容器"和你的页脚(例如"We.Retail页脚").

使模板可编辑

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

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

使用模板

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

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

您现在应该看到具有已定义的页眉和页脚的页面,但只有两者之间的可编辑的解析.此外,所需组件应显示在第二个"组件"选项卡下的左侧导轨中.

创建模板类型

为了避免在每次想要创建新模板时重复所有这些步骤(主要是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