使用者端程式庫與核心元件 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>
可傳遞至jsAndCssIncludes和cssIncludes的CSS link屬性：
media：字串JSscript屬性，可傳遞至jsAndCssIncludes和jsIncludes：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
...
...