使用者端程式庫與核心元件 client-libraries

核心元件隨附許多使用者端資料庫,並提供包含您自己的資料庫的功能。

提供的使用者端資料庫 provided

核心元件提供下列現成可用的使用者端程式庫。

  • 網站 clientlibs提供要套用至網站的元件之最小功能行為。
    • 它們可作為加速專案的起點,並鼓勵實施延伸並自訂它們以獲得想要的外觀和功能。
  • 編輯器 clientlibs已套用至編寫對話方塊,以確保其預期的功能和外觀。
  • 以編輯模式載入時,editorhook clientlibs會套用至網站。
    • 這些檔案包含在編輯器觸發的事件上執行的JavaScript程式碼,有助於初始化動態功能。
  • 某些元件可能有針對特定情況而設計的特定其他clientlibs,例如搭配Dynamic Media使用時。

包含使用者端資料庫 including

根據您的使用案例,有多種不同的方式來包含使用者端資料庫。 以下範例包含每個的範例HTL代碼片段

建議的預設使用方式 recommended-default-usage

如果您沒時間調查您所處情況下的最佳使用,請將下列HTL行放入頁面head元素中,以包含使用者端資料庫:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories='wknd.base', defer=true}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

這會將CSS和JS納入您的頁面head,但將defer屬性新增至您的JS script include,讓瀏覽器等候DOM就緒後再執行指令碼,進而最佳化頁面載入速度。

基本用途 basic-usage

包含使用者端程式庫類別之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-js-only

通常,需要將CSS includes放在HTMLhead元素中,並將JS includes放在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>

屬性 attributes

若要將屬性套用至產生的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:字串

內嵌 inlining

在某些情況下,針對最佳化、電子郵件或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 context-aware-loading

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

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

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c