aemclient-library

How to generate clientlib for each and every component and place them respective component folder under ui.apps

Generate clientlibraries for each component and place them in respective component folder under ui apps instead of single folder clientlibs

Solution

  • Example folder structure:

    /myComponent
  /clientlib
    /css
      styles.css
    /js
      setup.js
    css.txt
    js.txt
    .content.xml
  .content.xml
  myComponent.html

    css.txt

    #base=css
styles.css

    js.txt

    #base=js
setup.js

    /clientlib/.content.xml

    <?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[myProject.myComponent]"/>

    /myComponent/myComponent.html

    <div>
  ...
<div>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories='myProject.myComponent'}"/>

    This will put the CSS & JS files below the HTML of the component. Alternatively, you could include the client-library in another client-library:

    <?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[myProject.all]"
    embed="[myProject.myComponent]"/>

    You could have this myProject.all client-library included in the <head> of your site or wherever else you want.