3、模板

发布于:2026-07-08 Adobe AEM 0条评论

——————————目录大纲——————————

————————————————————————

一、说明

本文进行说明AEM系统中模板与页面创建及使用的流程。

由于AEM中创建页面必须要选择对应的模板,同时页面上能使用的组件也取决于引用模板中给布局设置的policy。


二、模板

1、创建模板

1.1 通过后台UI创建

路径:Tools - General - Templates,点击Templates

点击进入Lenovo Platform AEM Project目录

点击右上角【Create】按钮

选择模板类型,直接选择已有的类型即可,点【Next】

输入模板名称,点击【Create】

提示如下,即创建成功:

注意:如果在本地实例上通过该种方式创建了Template,那么需要从Code层级通过repo等方式拉去到项目中,并最终提交到Git上以便持久化。

1.2 通过Code创建(推荐)

找到对应的模板所在目录,如:

# 根目录可能存在不一样的情况,但是子目录都是万变不离其宗
lenovo-www/ui.content/src/main/content/jcr_root/conf/lenovo-www/settings/wcm/templates

在该目录下,copy现有模板或者新建对应的模板目录,按照之前模板的规则进行创建即可,创建完毕需要对目录执行clean install操作才能发布到local instance实例当中

子目录说明:

目录名称目录说明
initial初始化基本上是限制一旦创建页面将是什么样的。
policies策略是应用在页面上的策略,比如clientlibs应该是什么、什么样的组件能被应用到页面上、什么系统样式等
structure就是页面的结构

2、模板编辑

2.1 三种模式:

模板编辑页面有三种模式,不同模式的分工不同,大致如下:

  • Structure模式,编辑模板的策略及模板的内容结构
  • Initial Content模式,使用策略中配置的组件对页面的内容进行初始化
  • Layout模式,对页面的大小及尺寸进行配置

2.1.1 Structure模式

编辑模板策略,配置在此模板中可以使用的组件,如(标题、文本等)

2.1.2 Initial Content模式

进入初始化内容编辑模式,在每个页面都会出现固定的内容,点击Drag按钮选择需要的组件

2.1.3 Layout模式

进入Layout模式进行页面的布局调整,可以通过对布局的调整讲组件位置进行摆放

2.2 模板中添加内容

注意,如果没有地方添加组件或者一片空白,可以参考这里面尝试解决:9、问题及其他汇总

点击中部拖拽组件容器,点击右下角图标

点击policy

这里可以通过直接选择左侧policy,也可以手动勾选右侧组件Group,决定哪些组件可以被使用:

设置完毕后刷新页面,可以看到左侧已经能有可选的组件了(需要注意的是如果右边无法拖入组件,那么需要点击Root Container然后点击Unlock图标进行解锁):

此时能通过点击+号或者拖拽的方式加入组件:

尝试为碎片添加导航:

点击浏览选择对应的碎片:

依次展开:

选择碎片(experience fragment):

点击【Done】进行确认:

效果:

3、模板启用

只有Enable之后的模板,才能被页面所使用。

返回前一个页面,选中创建好的模板,点击【Enable】

启用完毕:

4、模板文件结构

首先可以在装修模板的URL地址中,找到模板的路径:

也可以在查看模板属性的时候URL地址中找到:

通过路径:/conf/lenovo-platform/settings/wcm/templates/m_test_template_001,可以在CRX里面找到模板

这里可以查看主属性:

这里可以查看模板里面的结构:

这里表明了当前正在使用网格

模板的policy路径即对应所在地,如:wcm/foundation/components/responsivegrid/policy_1701040807120

5、模板关联

AEM中站点和模板是需要进行关联,才可以在对应站点下创建的时候选择对应的模板。

5.1 从模板上设置允许在哪些路径上使用(常用)

可以在模板上增加属性,设置关联,大致如下:

属性名:allowedPaths

属性值:/content/lenovo(/.*)?

说明:通过正则进行匹配,如:/content/project/en/[^/]+(/.*)?  或者 /content/project/en/xyz/abc/

示例:

也可以添加多个:

对应在代码上提现如下:

设置完毕后别忘记点击左上角保存:

5.2 从站点上设置允许使用哪些模板

在后台选中站点,点击【Properties】

进入【Advanced】标签:

在Template Settings - Allow Templates里面可以添加允许的模板路径:

如:

但是这样会覆盖之前的规则,具体的更广泛的规则还有待研究……

6、使用模板

关联完毕后,选中站点,点击【Create】选择页面:

找到自己的模板,即可创建使用对应模板的页面:

三、模板类型

模板类型相当于一个总集,结构与模板是一样的,但是创建模板的时候选择了对应的模板类型,那么那个模板类型的设置会自动被继承到当前模板下。

1、创建模板类型

在CRXDE平台,进入模板类型目录:/conf/lenovo-www/settings/wcm/template-types,选择一个现有的模板,右击【Copy】:

右击【Paste】:

Copy出来的模板类型:

重命名该模板类型:

修改模板类型的名称和描述:

在 /conf/lenovo-www/settings/wcm/template-types/m-test-base-page/initial/jcr:content 这里可以去修改初始化使用的组件路径

在 /conf/lenovo-www/settings/wcm/template-types/m-test-base-page/structure/jcr:content 这里也需要保持跟上方一致

别忘记操作了都点击【Save all】:

去后台创建模板的时候,可以看到已经能够选择该类型:

2、结构说明

模板类型地址:lenovo-www/ui.content/src/main/content/jcr_root/conf/lenovo-www/settings/wcm/template-types


特定于站点的模板类型应存储在类似位置:

  • /apps/settings/wcm/template-types

自定义模板类型的定义应存储在用户定义的文件夹中(推荐)或者存储在 global. 例如:

  • /conf/<my-folder-01>/<my-folder-02>/settings/wcm/template-types
  • /conf/<my-folder>/settings/wcm/template-types
  • /conf/global/settings/wcm/template-types

模板类型必须遵循正确的文件夹结构(即, /settings/wcm/...),否则未找到模板类型。

里面包含3个重要因素:initial、policies、structure


目录说明参考上文中的”通过Code创建模板“
模板类型是将要选择的页面组件的大纲,也就是模板类型只是为了去筛选页面组件的,因此必须基于模板类型来选择模板,因为限制了实际页面的组件,每个模板类型都与页面组件相关联,模板类型的initial属性里面有个sling:resourceType,对应在apps下面页面组件的设置也是这个,所以模板类型限制了关联页面上可以使用的组件,
所以每个页面,比如客户限制将使用什么,它的结构是什么,如果我们有任何分析配置或页面布局,一切都是由页面组件定义的,但是页面的结构和外观是在模板中定义的。

四、模板、页面、模板类型关系网

1、模板与页面

页面的jcr:content中的cq:template即页面所使用的模板,如:/conf/lenovo-base/settings/wcm/templates/lenovo-solutions-template

2、模板与模板类型

模板的jcr:content中的cq:templateType即为所用的模板类型,如:/conf/lenovo-base/settings/wcm/template-types/solutions-page


上一篇

2、环境搭建

下一篇

4、页面

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理