【质疑HTL、理解HTL、加入HTL】

最新推荐文章于 2024-09-13 07:50:45 发布

尚未秃头的农工

最新推荐文章于 2024-09-13 07:50:45 发布

阅读量859

点赞数 26

文章标签： javascript java

本文链接：https://blog.csdn.net/Youmiko/article/details/137913784

版权

在第一章时候我们了解了对方的大致情况，在对方那么优秀的情况下我们应该同时武装自己让自己更配得上对方。🍈

🌈了解HTL及使用方法

看到HTL难免让人想到HTML，首先我们要了解HTL和HTML的区别

HTL (HTML Template Language)

HTL 是一种在 Adobe Experience Manager (AEM) 中广泛使用的模板语言。
它允许开发人员在 AEM 中创建动态网页模板，结合 HTML 结构与逻辑代码。
HTL 具有嵌入式表达式和逻辑，以及用于处理动态内容的功能。

HTML(Hyper Text Markup Language)

HTML 是一种标记语言，用于创建网页的结构和内容。
它由一系列标签组成，每个标签用于定义页面的不同部分或元素，如标题、段落、链接等。
HTML 是网页开发中最基本的语言之一，它负责定义网页的结构。

1. HTL Sightly(SLY)

1.1 data-sly-test

理解：
类似于于if-else判断显示隐藏

使用方法:

properties.jcr:title是配置项中的，下一期会更新一篇有关配置项的文章。
如果properties.jcr:title存在不为空的情况最终在页面呈现的是-----张三不懂法

<h1 data-sly-test="${properties.jcr:title}">
    <p>张三不懂法</p>
</h1>

1.2 data-sly-use

理解：
表示可以在模板中直接调用Java类的方法、访问属性、以及执行一些与Java相关的操作。

使用方法:
首先有一个名为MyFirstJava类，里面定义了一个sayHello方法，就可以通过data-sly-use去调用。

public class MyFirstJava {
    public String sayHello(){
        return "大家好我是练习时长两年半的，个人练习生张三！"
    }
}

<div data-sly-use.introduct="com.example.MyFirstJava">
    <p>${introduct.sayHello}</p>
</div>

表示从com.example.MyFirstJava（com.example:包名，MyFirstJava:被调用的类名）中调用MyFirstJava类然后赋值给introduction（可以随便命名）。
在通过${introduct.sayHello}去调用，最终呈现出来-----大家好我是练习时长两年半的，个人练习生张三！。

1.3 data-sly-unwrap

理解：
表示不输出当前的标签，只输出标签里的内容。

使用方法:

控制HTML输出的结构，避免生成一些不需要的标签。在特定的情况下，可以使模板更加清晰、简洁。

<div data-sly-unwrap>
    <p>猴赛雷</p>
</div>
此时输出不会有外层的div标签,可以查看DOM结构审查。

1.4 data-sly-text

理解：
可以将后端数据动态呈现到页面上。

使用方法:

<h1 data-sly-text="${currentPage.title}"></h1>

通过将动态内容放置在指令中，可以将后端数据动态的呈现到页面上。

1.5 data-sly-attribute

理解：
动态设置html元素的属性。

使用方法:

<tagName data-sly-attribute.attributeName="${expression}"></tagName>

例如 条件性添加或删除其他属性
假设我们有一个带标题的元素，根据条件是否添加title属性
<div data-sly-attribute.title="${properties.showTitle ? 'This is the title' : null}">
    Content goes here
</div>

如果properties.showTitle为真则会添加title属性，值为This is the title。类似于vue中的动态绑定通过:class进行判断展示对应的属性。

1.6 data-sly-element

理解：
动态创建 HTML 元素。

使用方法:

<div data-sly-element="${'h1'}">牛云</div>

输出
<h1>牛云</h1>

元素名称会自动使用elementName上下文进行xss保护，但是不允许使用<script>、<style>、<form>、<input>

1.7 data-sly-repeat

理解：
用于在模板中迭代数组或者集合，生成相应数量的HTML元素类似于for循环。

使用方法:

<ul>
  <li data-sly-repeat="${properties.items}">${item}</li> 
</ul>

集合的第一项是从索引为0开始

1.8 data-sly-list

理解：
对数组或集合进行迭代，并在迭代过程中生成 HTML 结构。

使用方法:

<ul data-sly-list="${properties.items}">
  <li>${item}</li>
</ul>

与data-sly-repeat一致，对于Iterable类型的集合。${item}直接表示集合中元素，对于Map类型的集合，${item}就是一个对象，可以通过${item.key}或者${item.value}分别访问键和值。

data-sly-repeat与data-sly-list的区别

data-sly-repeat特点：
适用于处理数组或类似于数组的集合。
提供$index变量，表示当前迭代的索引。
适用于生成一系列相似结构的HTML元素。
会在没有数据时生成一个占位符。

data-sly-list特点：
适用于处理Map、Iterable、Iterator等非数组类型的集合。
不提供$index变量，只能获取元素本身。
适用于处理键值对或非索引类型的集合。
仅在存在数据时才会生成 HTML 结构。

1.9 data-sly-resource

理解：
用于在模板中包含和引用其他的 AEM 资源（如组件、页面等）。它允许你将一个资源（通常是一个组件）嵌入到另一个资源中，并且可以传递参数给被包含的资源。

使用方法:

<div data-sly-resource="${'path/to/resource'}"></div>

其中还有一些相关的属性

resourceType -- 使用映射到覆盖资源类型的脚本强制渲染传递的路径.
<section data-sly-resource="${'./path' @ resourceType='my/resource/type'}"></section>

selectors -- 在包含传递的路径之前，将原始请求中的所有选择器替换为选择器字符串或选择器数组中传递的选择器.
<section data-sly-resource="${'my/path' @ selectors='selector1.selector2'}"></section>
<section data-sly-resource="${'my/path' @ selectors=['selector1', 'selector2']}"></section>

1.10 data-sly-include

理解：
用于在HTL（HTML Template Language）模板中包含其他模板或组件。允许开发者将其他HTL模板或组件嵌入到当前模板中，实现代码的重用和模块化。

使用方法:

<div data-sly-include="path/to/template"></div> 其中template主要为模板或组件的路径。

可以配合data-sly-attribute进行传参
template.html
<header>
    <h1>${introduction}</h1>
</header>

<div class="page">
        <div data-sly-indclude="template.html" data-sly-attribute.introduction="${introduction}"></div>
</div>

1.10 data-sly-template

理解：
用于定义和调用模板。允许创建可以重用的模板片段，并在需要的地方调用，减少重复代码量。
允许定义参数，这些参数可以在调用模板时传递。这使得模板可以根据不同的情况进行定制化。
使用 data-sly-call 指令来调用模板，并传递相应的参数

使用方法:

<!-- 定义模板 -->

<div data-sly-template.myTemplate="${'path/to/your/template.html'}">

    <!-- 模板内容 -->

    <h1>${title}</h1>

    <p>${description}</p>

</div>

 

<!-- 调用模板 -->

<div data-sly-call="${myTemplate @ title='Hello', description='Welcome to AEM'}"></div>

首先定义了一个myTemplate的模板，并指定了模板文件的路径，然后通过data-sly-call调用了myTemplate的模板，并传递了参数title和description