Intro to sightly

Objectives of sightly are:

1. Giv­ing back the markup, and not mix­ing it with code.
2. Every­thing is secure, by default.
3. Smoothen the work­flow between the designer and the developer

Some the basic tags used in sightly:

1. <div> currenPageName:${currentPage.name} </div>
2. <div data-sly-test="${wcmode.edit}">This message is only shown in edit mode</div>
3. <div data-sly-test.mode="${wcmmode.edit || wcmmode.design}"> This message is shown in edit and design mode </div><div data-sly-test="${!mode}">This message can be shown for other than edit and design modes</div>
4. <div data-sly-text="${currentPage.title}">Default Title</div>
5. <ul data-sly-list.childpage="${currentPage.listChildren}"><li>${childpage.path}</li><li>${childpage.title}</li></ul>
6. <ul data-sly-list.childpage="${currentPage.listChildren}"><li class="${childpageList.odd ? 'odd' :'even'}"></li></ul>
7. <div data-sly-resource="${ @path='par' , resourceType='foundation/components/parsys'}"></div>
8. <footer data-sly-resource="${@path='usercomponent' , resourceType='project/usercomponent'}"></footer>
9. ${pageProperties.jcr:title || properties.title || "No Title"}
10. <div data-sly-include="{index.html or any index.jsp}"></div>