包含客戶端庫

根據您的使用案例,有許多不同的方式可包含用戶端程式庫。 本檔案提供範例和每個範例的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?lang=zh-Hant"
    + item01
        - element=["link"|"script"|"meta"]
        - location=["header"|"footer"]
        + attributes
            - attributeName01="attributeValue01"
            - attributeName02="attributeValue02"
            ...
    + item02
        ...
    ...

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

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now