包含客戶端庫

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

可傳遞至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

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

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

本頁內容