Creating Component using sightly

We have to follow basic two differences while creating the sightly component:

1. Extension of the file should be .Html
2. No inclusion of the global.jsp in the component file.

Follow those above steps while creating the component and create a component in the normal fashion

Project Structure:

Then include some of the data-sly attributes for the samples as below

Hello Welcome to sightly Components
<div data-sly-test="${currentPage.name}"> currenPageName:${currentPage.name} </div>


<div data-sly-test.author="${wcmmode.edit || wcmmode.design}">
Show this to the author in Edit and Design Mode
</div>
<div data-sly-test="${!author}">
    Show this in Publish Mode
</div>

In the Component you created 

Then next create a page with some template drag and drop the component into the template then you can see the output as Shown below 

This is how you can create a new sample sightly component..


Important Links:

https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl
https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl/releases/download/aem-sightly-repl-1.0.2/com.adobe.granite.sightly.repl-1.0.2.zip
https://docs.adobe.com/docs/en/aem/6-1/develop/sightly.html
http://adobeaemclub.com/guide-for-working-with-templates-and-call-in-sightly-aem-6-1/
http://adobeaemclub.com/movie-component-using-sightly-and-wcmuse-api-in-aem-6-1/

https://github.com/edubey1/atesightly
http://bit.ly/AEMHelpForum
http://bit.ly/AEMTechGroup
http://bit.ly/GzKDsp
http://adobeaemclub.com/sightly-pagination-component-using-sling-model-and-javascript-use-api-in-aem-6-1/
http://adobe-marketing-cloud.github.io/tag/aem/