根據您的使用案例,有許多不同的方式可包含用戶端程式庫。 本檔案提供範例和每個範例的HTL程式碼片段。
如果您沒有時間調查最適合您的情況,請在頁面head
元素中放置下列HTL行,加入您的用戶端程式庫:
<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,但會將defer
屬性新增至您的JS script
包含,如此瀏覽器就會等到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>
通常,您會想要將CSS包含置於HTML head
元素中,而JS包含在body
元素關閉之前。
在head
中,若要僅包含CSS而非JS,請使用cssIncludes
:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.cssIncludes @ context="unsafe"}
</sly>
在body
關閉之前,若要僅包含JS,而非CSS,請使用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
:字串JS script
屬性,可傳遞至 jsAndCssIncludes
和 jsIncludes
: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>
同樣地,若要內嵌JS,可使用jsInline
,在此情況下,您必須寫入周圍的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
...
...