Show Menu
トピック×

ククライアントライブラリを含める

使用事例に応じて クライアントライブラリ を含める方法は多数あります。このドキュメントでは、それぞれの例とサンプル HTL スニペット を紹介します。

基本的な使用方法

クライアントライブラリカテゴリの JS と CSS の両方を含める基本構文は、次のとおりです。この構文は、対応するすべての CSS link 要素または JS script 要素を生成します。
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

複数のクライアントライブラリカテゴリに対して、同じ処理を一度に行うには、文字列の配列を categories パラメーターに渡します。
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories=['wknd.base', 'cq.foundation']}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

CSS または JS のみ

HTML head 要素に CSS インクルードを配置し、 body 要素を閉じる直前に JS インクルードを配置することがよくあります。
JS ではなく CSS のみを含めるには、 head cssIncludes を使用します。
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssIncludes @ context="unsafe"}
</sly>

CSS ではなく JS のみを含めるには、 body を閉じる前に jsIncludes を使用します。
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsIncludes @ context="unsafe"}
</sly>

属性

生成される CSS link 要素や JS script 要素に属性を適用するには、次のように多数のパラメーターを使用できます。
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories='wknd.base',
    media='print',
    async=true,
    defer=true,
    onload='console.log(\'loaded: \' + this.src)',
    crossorigin='anonymous'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

jsAndCssIncludes および cssIncludes に渡すことができる CSS link 属性:
  • media jsAndCssIncludes および jsIncludes に渡すことができる文字列 JS script 属性:
  • async :ブール型
  • defer :ブール型
  • onload :文字列
  • crossorigin :文字列

インライン

場合によっては、最適化用、または電子メールまたは AMP 用として、CSS または JS を HTML の出力にインライン化する必要が出ることがあります。
CSS をインライン化するには、 cssInline を使用できますが、その場合は前後に style 要素を記述する必要があります。
<style type="text/css"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssInline @ context="unsafe"}
</style>

同様に、 jsInline を使用して JS をインライン化できますが、前後に script 要素を記述する必要があります。
<script type="text/javascript"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsInline @ context="unsafe"}
</script>