Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to include client libraries using Sightly?

Avatar

Level 9

Hi All,

We are using sightly to develop components and we want to include client libraries.

How to do this using sightly?

Thanks,

Kishore

desktop_exl_promo_600x100_weempoweryou.png

1 Accepted Solution

Avatar

Correct answer by
Level 10

See this AEM documentation topic:

http://docs.adobe.com/content/docs/en/aem/6-0/develop/sightly.html#Loading Client Libraries

Hope this helps...

View solution in original post

7 Replies

Avatar

Correct answer by
Level 10

See this AEM documentation topic:

http://docs.adobe.com/content/docs/en/aem/6-0/develop/sightly.html#Loading Client Libraries

Hope this helps...

Avatar

Level 9

I have configured clientlib as below but client libraries are not effecting on the page.

<head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">
    <clientlib data-sly-call="${clientLib.all @ categories='apps.elibrary.common'}" data-sly-unwrap/>
    <div data-sly-resource="${'logo' @ resourceType='elibrary/components/page/logo'}"></div>
</head>

What's the issue?Please help me.

Thanks,

Kishore

Avatar

Level 10

When you look at the page in the browser - is there an error message or missing CSS styles? 

Avatar

Level 9

issue got resoled.

I have added css file names  with , separated in css.txt file.I have removed them and now css are applying.

Avatar

Level 9

i don't see any error on the page.

is there any example which added client libs using Sightly?

Avatar

Level 5

Best Answer: https://gist.github.com/yupadhyay/a7348e7fbf98590f176c

<head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">

<!--for css+js --><meta data-sly-call="${clientLib.all @ categories='your.clientlib'}" data-sly-unwrap></meta>

<!-- only js --><meta data-sly-call="${clientLib.js @ categories='your.clientlib'}" data-sly-unwrap></meta>

<!-- only css --><meta data-sly-call="${clientLib.css @ categories='your.clientlib'}" data-sly-unwrap></meta>

</head>

Avatar

Level 5

In AEM 6.5 we can also include clientLibs like this.

 

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' 
@ categories='components.custom.embed.v1'}"> ${clientlibs.jsAndCssIncludes @ context="unsafe"} </sly>