Summary: Your first Sightly template

This post provides a summary of what you learnt in the previous posts.



Before going to the next step, creating components, let us first take a quick recap of all that we learned so far.

AEM users generally belong to one of the following roles:

• Authors: create web pages. They use templates which provides the layout of the pages; they use components to add information to be displayed on the pages.
• Developers: create templates and components based on the various requirements of the organization.

We then learned the following web consoles:

• SiteAdmin: http://localhost:4502/siteadmin : Used by authors to create web pages.
• CRXDELite: http://localhost:4502/crx/de : Used by developers to explore CRX repository (Oak repository). Used to create template and components.
• Package Manager: http://localhost:4502/crx/packmgr/ : Used by developers to share the codes they develop.

Following are the default folders we should be aware of:

• content : All pages authors create go here.
• app : Developers create their company pages here.
• etc/design : Developers store the design pages.

Inside the app folder, developers can create their company folder. Inside the company folder, the folder for components and templates are placed.

Create template inside the templates folder. A template has the resourceType property which points to a component inside the components folder. This component is called a page component, because it’s used to create the layout of the page. It has a resourceSuperType property which points to a page component inside libs/foundation/components/page. You inherit this page component, while overriding only the body.html. This is an important concept. I suggest you revisit my blog post on it.

We create the body.html in HTML format, because we want to use Sightly, which is much simpler than JSP. We pasted the HTML content; We added the data-sly-resource tag to include parsys component to a web page. The Parsys component helps to drag and drop components while authoring the web page. We placed the css and inside the etc/design folder. We added the design using the page property.

Authors need to go to the Design mode and add the required components to drag and drop to the web pages.

We are ready to go to the next phase – Creating components. If you have not yet downloaded and installed the packages, please do so. See you soon.