包含客戶端庫

根據您的使用案例,有許多不同的方式可包含用戶端程式庫。 本檔案提供範例和每個範例的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或JS

通常,您會想要將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>

可傳遞至jsAndCssIncludescssIncludes的CSS link屬性:

  • media:字串JS script 屬性,可傳遞至 jsAndCssIncludesjsIncludes:
  • 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

頁面元件也支援載入開發人員定義的內容感應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
        ...
    ...

如需詳細資訊,請參閱頁面元件的技術檔案。

本頁內容