How to include client libraries using Sightly? | Community
Skip to main content
GK-007
GK-007
Level 9
October 16, 2015
Solved

How to include client libraries using Sightly?

  • October 16, 2015
  • 6 replies
  • 28142 views

Hi All,

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

How to do this using sightly?

Thanks,

Kishore

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by smacdonald2008

    See this AEM documentation topic:

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

    Hope this helps...

    6 replies

    GK-007
    GK-007Author
    Level 9
    October 16, 2015

    i don't see any error on the page.

    is there any example which added client libs using Sightly?

    GK-007
    GK-007Author
    Level 9
    October 16, 2015

    issue got resoled.

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

    smacdonald2008
    smacdonald2008
    Level 10
    October 16, 2015

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

    GK-007
    GK-007Author
    Level 9
    October 16, 2015

    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

    smacdonald2008
    smacdonald2008Accepted solution
    Level 10
    October 16, 2015

    See this AEM documentation topic:

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

    Hope this helps...

    RashidJorvee
    RashidJorvee
    Level 4
    April 20, 2017

    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>

      RashidJorvee
      RashidJorvee
      Level 4
      March 24, 2022

      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>
        Terms & ConditionsAccessibility statement

        Loading footer...