包括客戶端庫

根據您的使用案例，有許多不同的方法可包含用戶端程式庫。 本檔案提供各自的範例和範例 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:字串 script JS屬性，可傳遞至 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
        ...
    ...

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

本頁內容