Import Clientlibs

[mmouraam]

I'm new working with AEM and faced a situation on WKND Tutorial that couldn't figure out how it happens.

When we want to import some clientlibs, many tutorials on onternet explains that is needed to add some code, for example, on customheaderlibs.html file of page component like:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.site'}">
</sly>

However, on aem-guide-wknd project on Github, there is no such code anywhere, but the clientlibs are still loaded. How is it possible?

Besides that, if I create a new page from the empty-page template, no clientlibs are loaded.

What are the others forms of importing clientlibs?

[Kiran_Vedantam · Accepted solution]

Hi @mmouraam 

You can add client libs

1. At the component level: using the below code, you include both CSS and js (all)
   1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
      <sly data-sly-call="${clientlib.all @ categories=''}"/>
2. At template level: Edit template > Page policy
   1. 
3. At the page level
   1. At head.html, include css
      1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
         <sly data-sly-call="${clientlib.css @ categories=''}"/>
   2. At footer.html: Include js
      1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
         <sly data-sly-call="${clientlib.js @ categories=''}"/>