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

上次更新: 2024-02-01
  • 建立對象:
  • Developer
    Admin

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

提供的使用者端資料庫

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

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

包含使用者端資料庫

要包含的方法有很多種 使用者端資料庫 視您的使用案例而定。 以下是範例的範例 HTL代碼片段 (每個)。

如果您沒時間調查您所處情況下的最佳使用,請在頁面中放入下列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 包含,讓瀏覽器等候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>

CSS link 可傳遞到的屬性 jsAndCssIncludescssIncludes

  • 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
        ...
    ...

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

本頁內容