Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTL - Coggle Diagram
HTL
data-sly-use
html file
<html data-sly-use.logic="logic.js">
<ul data-sly-list="${logic.navRoot.listChildren}">
<li><a href="${item.path}.html">${item.title}</a></li>
</ul>
logic.js
use(function(){
return {
navRoot : pageManager.getPage('content/we-retail')
};
});
invoke helper file
data-sly-include
<div data-sly-include="header.html"></div>
<div> header.html </div>
<sly data-sly-include="header.html"></sly>
header.html
data-sly-text
Replaces the content of HTML element with the specified text
<div data-sly-test="${currentPage.Title}">Title Page</div>
data-sly-list
repeats the children (child elements)
<ul data-sly-list.child="${currentPage.listChildren}">
<li>${child.title}</li>
</ul>
data-sly-repeat
repeats the element
<ul>
<li data-sly-repeat.child="${currentPage.children}">${child.title}</li>
</ul>
data-sly-test
conditionally show or hide an element
<div data-sly-test="${wcmmode.edit}">You are in edit mode</div>
data-sly-call
to call/invoke client library in your component
data-sly-call="${clientlib.all @ cateories='cq.jquery'}"
data-sly-resource
<sly data-sly-resource="${'par' @ resourceType = 'foundation/components/parsys'}></sly>