Adobe Experience Manager(AEM)支持的HTML模板语言(HTL)取代了JSP(JavaServer Pages)作为AEM中HTML的首选和推荐的服务器端模板系统。
1 HTL的基本概念
HTML模板语言使用表达式语言将内容片段插入到呈现的标记中,使用HTML5数据属性来定义标记块上的语句(如条件或迭代)。当HTL编译成Java Servlet时,表达式和HTL数据属性都完全在服务器端进行评估,并且在生成的HTML中没有任何内容可见。
1.1 块和表达式
实例:
<h1 data-sly-test="${properties.jcr:title}">
${properties.jcr:title}
</h1>
data-sly-test: 有条件地删除主机元素及其内容。值 false将删除元素; 值 true保留元素。
- 块语句
为有条件地显示<h1>元素,使用data-sly-testHTML5数据属性。HTL提供了多个这样的属性,允许将行为附加到任何HTML元素,并且所有属性都以data-sly为前缀。 - 表达式语言
HTL表达式由字符 $ { 和 }分隔。在运行时,将评估这些表达式,并将它们的值注入到传出的HTML流中。
1.2 SLY元素
HTL的核心概念是提供重用现有HTML元素来定义块语句的可能性,这避免了插入额外分隔符以定义语句开始和结束位置的需要。将静态HTML转换为正常运行的动态模板的标记的这种不引人注目的注释提供了不破坏HTML代码的有效性的优点,因此即使作为静态文件仍可正确显示。
但是,有时可能不会在必须插入块语句的确切位置存在现有元素。对于这种情况,可以插入一个特殊的SLY元素,该元素将自动从输出中删除,同时执行附加的块语句并相应地显示其内容。
<sly data-sly-test="${properties.jcr:title && properties.jcr:description}">
<h1>${properties.jcr:title}</h1>
<p>${properties.jcr:description}</p>
</sly>
将输出类似于HTML的内容,但只有在同时存在jcr:title和jcr:decription属性的情况下,如果它们都不为空:
<h1>MY TITLE</h1>
<p>MY DESCRIPTION</p>
需要注意的一件事是,当没有现有元素可以用块语句注释时,只使用SLY元素,因为SLY元素阻止语言提供的值在动态时不改变静态HTML。
1.3 元素和属性名称
表达式只能放在HTML文本或属性值中,但不能放在元素名称或属性名称中,或者它不再是有效的HTML。为了动态设置元素名称, 可以在所需元素上使用data-sly-element语句,并动态设置属性名称,甚至一次设置多个属性, 可以使用data-sly-attribute语句。
<h1 data-sly-element="${myElementName}" data-sly-attribute="${myAttributeMap}">...</h1>
未完待续...
注:
请求属性
在data-sly-include和data-sly-resource中,您现在可以传递requestAttributes,以便在接收HTL脚本中使用它们。
这允许您将参数正确传递到脚本或组件中。
<sly data-sly-use.settings="com.adobe.examples.htl.core.hashmap.Settings"
data-sly-include="${ 'productdetails.html' @ requestAttributes=settings.settings}" />
Settings类的Java代码,Map用于传递requestAttributes:
public class Settings extends WCMUsePojo {
// used to pass is requestAttributes to data-sly-resource
public Map<String, Object> settings = new HashMap<String, Object>();
@Override
public void activate() throws Exception {
settings.put("layout", "flex");
}
}
例如,通过Sling-Model,您可以使用指定的requestAttributes的值。
在此示例中,布局是通过Use-class中的Map注入的:
@Model(adaptables=SlingHttpServletRequest.class)
public class ProductSettings {
@Inject @Optional @Default(values="empty")
public String layout;
}
${request.requestParameterMap['test'][0].toString}
网友评论