AEM（Adobe Experience Manager）——模板的开发以及创建

模板（template）

AEM的template总的来说分为两类，Static Templates 和 Editable Templates。

Static Templates 一般都是由开发人员通过代码创建，定义模板上可以呈现的组件，一般static template是存在于crx目录的 /apps下，如果一旦使用此模板创建页面，之后如果我们在Static Templates中进行任何更改，它将不会影响已经创建好的页面。

Editable Templates 开发人员或者非开发人员都可以创建，因为aem提供了可视化的界面。一般Editable Templates是存在于crx目录的/ conf下，使用此模板创建页面，之后如果有共同的需求，只需要更改Static Templates即可，所有用此模板创建的页面都可以自动同步更改。

1.Static Templates的创建

Static Templates模板一般是在conf路径下，所以如下图所示创建相应文件，文件内容可在官网寻找，也可以拷贝项目中自带的样例模板代码，适当修改即可。

这里注意，如果新创建的模板需要自定义页面风格，那么我们需要修改相应的配置文件，

首先我们apps路径下，在apps/test路径下创建一个相应的文件，如下图：

.其中dialog下的content.xml是配置这个模板创建本身需要的属性。如若自定义都可以在这个文件中编写，具体样例代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Test Page"
          sling:resourceType="cq/gui/components/authoring/dialog"
          extraClientlibs="[cq.common.wcm,cq.siteadmin.admin.properties]"
          mode="edit">
    <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/container"
            class="cq-dialog-content-page">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container"
                    rel="cq-siteadmin-admin-properties-tabs">
                <layout
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/layouts/tabs"
                        type="nav"/>
                <items jcr:primaryType="nt:unstructured">
                    <Nuskin
                            jcr:primaryType="nt:unstructured"
                            jcr:title="Custom"
                            sling:resourceType="granite/ui/components/foundation/container">
                        <layout
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <text jcr:primaryType="nt:unstructured"
                                                   sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                   fieldLabel="Text"
                                                   name="./text"/>
                                    <url jcr:primaryType="nt:unstructured"
                                                  sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
                                                  fieldLabel="Select Url"
                                                  name="./defaultImage"
                                                  rootPath="/content/wknd"/>
                                    <pubTime
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                            fieldLabel="Page Publish Date"
                                            name="./pubDate"/>
                                    <types
                                            jcr:primaryType="nt:unstructured"
                                            required="{Boolean}true"
                                            fieldLabel="News Type"
                                            cq-msm-lockable="titlePosition"
                                            name="./newsTypes"
                                            sling:resourceType="granite/ui/components/foundation/form/select">
                                        <items jcr:primaryType="nt:unstructured">
                                            <item1
                                                    jcr:primaryType="nt:unstructured"
                                                    text="类型一"
                                                    selected="{Boolean}true"
                                                    value="1"/>
                                            <item2
                                                    jcr:primaryType="nt:unstructured"
                                                    text="类型二"
                                                    value="2"/>
                                            <item3
                                                    jcr:primaryType="nt:unstructured"
                                                    text="类型三"
                                                    value="3"/>
                                            <item4
                                                    jcr:primaryType="nt:unstructured"
                                                    text="类型四"
                                                    value="4"/>
                                            <item5
                                                    jcr:primaryType="nt:unstructured"
                                                    text="类型五"
                                                    value="5"/>
                                        </items>
                                    </types>
                                    <hideInNewsList
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/checkbox"
                                            text="I am a checkbox"
                                            name="./hideInNewsList"
                                            value="true"
                                            unCheckedValue="false"/>
                                </items>
                            </columns>
                        </items>
                    </Nuskin>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

需要注意的是其中的customfooterlibs.html和customheaderlibs.html这两个文件的名称是固定的，他们的作用是分别为了配置这个page上面的所有元素需要加载的css和js文件。至于具体如何配置css和js我在下文详细介绍。

到这一步，然后我们在重新回到刚才创建的模板处，现在我们分别将templates和template-types两个路径下的initial和structure两个文件夹下的content.xml中的sling:resourceType="test/components/structure/page"修改成我们刚才创建的page路径，即sling:resourceType="test/page/testpage"。

然后部署项目即可创建这个新模板了。