AEM HTL 风格指南教程

AEM HTL 风格指南教程

aem-htl-style-guide A style guide for the HTML Template Language (HTL), the templating language use by the Adobe Experience Manager (AEM). 项目地址: https://gitcode.com/gh_mirrors/ae/aem-htl-style-guide

1. 项目介绍

AEM HTL 风格指南是一个为 Adobe Experience Manager (AEM) 使用的 HTML 模板语言 (HTL) 提供的风格指南。HTL 是 AEM 的模板语言，旨在提供一种简洁、高效的方式来编写 HTML 模板。本项目旨在帮助开发者遵循一致的编码风格，提高代码的可读性和可维护性。

2. 项目快速启动

2.1 安装

首先，克隆项目到本地：

git clone https://github.com/Netcentric/aem-htl-style-guide.git

2.2 使用示例

以下是一个简单的 HTL 模板示例，展示了如何使用 HTL 编写一个基本的 HTML 页面：

<!--/* 使用 HTL 注释 */-->
<sly data-sly-use.teaser="com.example.TeaserComponent"></sly>

<section class="teaser">
    <h2 class="teaser__title">${teaser.title}</h2>
    <div class="teaser__content">${teaser.content}</div>
</section>

2.3 运行

将上述代码保存为 teaser.html，并将其放置在 AEM 项目的适当位置。启动 AEM 服务器后，访问该页面即可看到效果。

3. 应用案例和最佳实践

3.1 避免内联 JavaScript 或 CSS

为了保持代码的清晰和分离，HTL 设计中限制了内联 JavaScript 和 CSS 的使用。建议将 JavaScript 和 CSS 代码分别放置在 .js 和 .css 文件中。

错误示例：

<section class="teaser">
    <h2 class="teaser__title">${teaser.title}</h2>
    <script>
        var teaserConfig = {
            skin: "${teaser.skin @ context='scriptString'}",
            animationSpeed: ${teaser.animationSpeed @ context='number'}
        };
    </script>
    <style>
        .teaser__title {
            font-size: ${teaser.titleFontSize @ context='styleToken'};
        }
    </style>
</section>

正确示例：

<section data-teaser-config="${teaser.jsonConfig}" class="teaser">
    <h2 class="teaser__title teaser__title--font-${teaser.titleFontClass}">${teaser.title}</h2>
</section>

3.2 使用 HTL 注释

HTL 注释不会被渲染到最终的 HTML 中，因此建议使用 HTL 注释来保持 DOM 的整洁。

错误示例：

<!-- 不要使用 HTML 注释 -->

正确示例：

<!--/* 始终使用 HTL 注释 */-->

4. 典型生态项目

4.1 Adobe Experience Manager (AEM)

AEM 是 Adobe 提供的内容管理系统，HTL 是其主要的模板语言。AEM 提供了丰富的功能和工具，帮助开发者构建和管理复杂的内容驱动的网站。

4.2 Apache Sling

Apache Sling 是一个基于 JCR 的内容分发框架，它与 AEM 紧密集成，提供了强大的内容处理和路由功能。

4.3 Sightly

Sightly 是 HTL 的前身，虽然现在已经被 HTL 取代，但了解 Sightly 有助于更好地理解 HTL 的设计理念和使用方法。

通过遵循本教程，您将能够更好地理解和使用 AEM HTL 风格指南，编写出更加规范和高效的 HTL 模板代码。

aem-htl-style-guide A style guide for the HTML Template Language (HTL), the templating language use by the Adobe Experience Manager (AEM). 项目地址: https://gitcode.com/gh_mirrors/ae/aem-htl-style-guide