使用事例に応じてクライアントライブラリを含める方法は多数あります。このドキュメントでは、それぞれの例とサンプル HTL スニペットを紹介します。
状況に何が最適かを調べる時間がない場合は、次の HTL 行をページ head
要素内に配置して、クライアントライブラリを含めます。
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
categories='wknd.base', defer=true}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
これにより、ページ head
に CSS と JS の両方が含まれますが、JS script
インクルードに defer
属性が追加されるので、ブラウザーは DOM は準備が完了するのを待ってスクリプトを実行し、ページの読み込み速度を最適化します。
クライアントライブラリカテゴリの 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>
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>
ページコンポーネントでは、開発者定義のコンテキスト対応 CSS、JavaScript、メタタグの読み込みもサポートしています。
これをおこなうには、次の構造を使用して com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
のコンテキスト対応リソースを作成します。
com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
- prefixPath="/some/path"
+ item01
- element=["link"|"script"|"meta"]
- location=["header"|"footer"]
+ attributes
- attributeName01="attributeValue01"
- attributeName02="attributeValue02"
...
+ item02
...
...