Vault Clipse Set up

Hello, There are some steps that has to be followed to set up vault clipse to synchronize the content between eclipse and aem crx.

Note:: Your AEM jar can be anywhere in the file system of your computer. The below paths are just for reference.
Step 1::

Download the 2.4 version of file vault from the below link.
https://www.adobeaemcloud.com/content/companies/public/adobe/filevault/filevault.html

For my windows the below archive worked perfect
 vault-cli-2.4.40-bin.tar.gz
Download as .tar.gz archive

Step 2::

*Copy the downloaded archive at C:\Users\anshuman\AEM\crx-quickstart\opt\filevault\vault-cli-2.4.40-bin.tar.gz

*This is the crx folder generated when we execute the AEM jar

*unzip the file here

Step 3::

Now download vault clipse 2.4 form eclipse market place and set vault directory one level above bin.

Vault Directory::C:\Users\anshuman\AEM\crx-quickstart\opt\filevault\vault-cli-2.4.40-bin.tar\vault-cli-2.4.40

You can also change your temporary directory to
C:\Temp

Step 4::

Also set the "path" of the system environment variable to
C:\Users\anshuman\AEM\crx-quickstart\opt\filevault\vault-cli-2.4.40-bin.tar\vault-cli-2.4.40\bin

Note:: If the export or import operation is throwing out some error then try to delete everything from the temporary folder.

Import:: Pushes the content from eclipse to Crx.
Export:: Pulls the content from Crx to eclipse.

How to fetch the values stored at page's jcr:content node

This fetches the page name.

<h1>${currentPage.Name}</h1>

This fetches title of the page.

<h2>${pageProperties['jcr:title']}</h2>

How to include clientlib in the html file using sightly

The client library can be included by using the below code::
The first line declares a clientlib object, which is implemented as a template. Then css or js is called based on the categories.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"></sly>
<sly data-sly-call="${clientlib.css @ categories='category.name'}"></sly>

To call css
data-sly-call="${clientlib.js @ categories='clientlib1,clientlib2'}" 

data-sly-call="${clientlib.css @ categories='clientlib1,clientlib2'}"

To call both css and js
data-sly-call="${clientlib.all @ categories='clientlib1,clientlib2'}"/>