Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Front-End Adventures in AEM: Part III | AEM Community Blog Seeding

Avatar

Administrator

BlogImage.jpg

Front-End Adventures in AEM: Part III by Benjamin Solum

Abstract

In Parts I and II, I wrote about Clientlibs and then how they’re composed. In Part III, I want to get back to the markup and talk in-depth about AEM’s HTML Template Language or “HTL”, which is often referred to as Sightly. I’ll also be referring to HTL as Sightly for the rest of the series to avoid confusion with “HTML”. This part includes tips on working within Sightly, common Front-End gotchas working with Sightly, and loading our Clientlibs within our templates.

As a reminder, this article series is broken into several parts as seen below. Feel free to jump around to the parts that seem interesting to you and please feel free to ask any questions you have about the material covered.
*note* — This article series is written with AEM 6.4 and 6.5 in mind but the concepts should apply to future versions and even some older (6.2) Touch UI versions.
*note* — Adobe is notorious for moving their documentation around and their helpx docs and forums often have broken links. I’ll occasionally link to their docs so if the links stop working let me know and I’ll try and update the article.

Sightly Syntax
Sightly’s documentation can be found here and it’s definitely a must-read for the first time Sightly author. You can also download an installable REPL to play around within your local environment.
Instead of regurgitating all of the information found in the documentation, I instead want to contrast Sightly with features from other common templating frameworks/languages. Sightly is a step-up from working with JSP but it also leaves a lot to be desired in comparison to the competition.

The  element
The  element should be used in instances where you need to use Sightly’s Block Statements but do not want to output an HTML element. Ideally, our Sightly template’s markup will match the final DOM as much as possible. Therefore, whenever a block statement should output an HTML element, prefer that element over .  does not require a closing tag; it can be self-closed.



Hello World

Read Full Blog

Front-End Adventures in AEM: Part III

Q&A

Please use this thread to ask the related questions.



Kautuk Sahni
0 Replies