數字型驗在很大程度上依賴於由複雜的JavaScript和CSS代碼驅動的客戶端處理。 客AEM戶端庫(客戶端庫)允許您在儲存庫中組織和集中儲存這些客戶端庫。 與 在項目原型中AEM, 管理項目的前端代碼AEM變得簡單。
在中使用客戶端的優AEM點包括:
客戶端是用於從中提供CSS和Javascript的內置解決AEM方案。
為項目建立CSS和Javascript的前AEM端開發人員也應熟悉 AEMProject Archetype及其自動前端構建流程。
站點要求在客戶端處理JavaScript和CSS以及靜態資源(如表徵圖和Web字型)。 客戶端庫是AEM參考(如果需要,按類別)和為此類資源提供服務的機制。
將站AEM點的CSS和Javascript收集到一個位於中央位置的單個檔案中,以確保在HTML輸出中只包含任何資源的一個副本。 這將最大限度地提高交付效率,並允許通過代理將此類資源集中維護在儲存庫中,從而保持訪問安全。
所有JavaScript、CSS和其他前端資產應在 項目原型的ui.AEMfronted模組。 原型的靈活性允許您使用您選擇的現代Web工具建立和管理這些資源。
然後,原型可以將資源編譯為單個CSS和JS檔案,並將它們自動嵌入到 cq:clientLibraryFolder
的下界。
客戶端庫資料夾是類型的儲存庫節點 cq:ClientLibraryFolder
。 其定義 CND表示法 是
[cq:ClientLibraryFolder] > sling:Folder
- dependencies (string) multiple
- categories (string) multiple
- embed (string) multiple
- channels (string) multiple
cq:ClientLibraryFolder
節點可以放在任意位置 /apps
儲存庫的子樹。categories
用於標識其所屬庫類別的節點的屬性。每個 cq:ClientLibraryFolder
將填充一組JS和/或CSS檔案,以及幾個支援檔案(請參閱下面)。 的重要屬性 cq:ClientLibraryFolder
配置如下:
allowProxy
:因為所有客戶端必須儲存在 apps
,此屬性允許訪問客戶端庫代理servlet。 請參閱 查找客戶端庫資料夾並使用代理客戶端庫Servlet 下。categories
:標識此內的JS和/或CSS檔案集的類別 cq:ClientLibraryFolder
摔倒。 的 categories
屬性是多值的,它允許庫資料夾成為多個類別的一部分(有關此類別可能有用的資訊,請參閱下面)。如果客戶端庫資料夾包含一個或多個在運行時合併到單個JS和/或CSS檔案的源檔案。 生成的檔案的名稱是節點名稱,其中 .js
或 .css
檔案副檔名。 例如,名為 cq.jquery
生成名為 cq.jquery.js
或 cq.jquery.css
。
客戶端庫資料夾包含以下項:
js.txt
檔案和/或一個 css.txt
標識要合併到生成的JS和/或CSS檔案中的源檔案的檔案客戶端庫必須位於 /apps
。 這是為了更好地將代碼與內容和配置隔離開來。
為了在 /apps
若要訪問,請使用代理伺服器。 ACL仍在客戶端庫資料夾上強制實施,但Servlet允許通過 /etc.clientlibs/
的 allowProxy
屬性設定為 true
。
https://<host>:<port>/crx/de
)。/apps
資料夾,按一下 「建立」>「建立節點」。cq:ClientLibraryFolder
。 按一下 確定 然後按一下 全部保存。cq:ClientLibraryFolder
節點,添加以下屬性,然後按一下 全部保存:
categories
/etc.clientlibs
,選擇 cq:ClientLibraryFolder
節點,添加以下屬性,然後按一下 全部保存:
allowProxy
true
resources
位於客戶端庫資料夾下。
resources
,無法在發佈實例上引用它們。js.txt
: 使用此檔案名生成JavaScript檔案。css.txt
: 使用此檔案名可生成級聯樣式表。#base=*[root]*
[root]
與TXT檔案相對的資料夾路徑。 例如,當源檔案與TXT檔案位於同一資料夾中時,請使用以下文本:
#base=.
cq:ClientLibraryFolder
節點:
#base=mobile
#base=[root]
,鍵入源檔案相對於根目錄的路徑。 將每個檔案名置於單獨的行上。一旦客戶端庫資料夾 根據需要配置, 客戶端可通過代理請求。 例如:
/apps/myproject/clientlibs/foo
/apps/myprojects/clientlibs/foo/resources/icon.png
的 allowProxy
屬性允許您請求:
/etc.clientlibs/myprojects/clientlibs/foo.js
/etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png
一旦客戶端在其客戶端庫資料夾中成功儲存和管理,就可以通過HTL訪問它們。
客戶端庫通過由提供的幫助模板加AEM載,可通過 data-sly-use
。 幫助程式模板在此檔案中可用,可通過 data-sly-call
。
每個幫助程式模板都需要 categories
的子菜單。 該選項可以是字串值的陣列,也可以是包含逗號分隔值清單的字串。
請參閱HTL文檔 的子菜單。
發佈實例上需要大AEM多數客戶端。 也就是說,大多數客戶端的目的是提供內容的最終用戶體驗。 對於發佈實例上的客戶端, 前端構建工具 可通過 客戶端庫資料夾,如上所述。
但有時可能需要客戶端庫來自定義創作體驗。 例如,自定義對話框可能需要將CSS或JS的小位部署到創AEM作實例。
如果需要在作者中使用客戶端庫,可以在 /apps
使用與發佈相同的方法,但直接將其寫入 /apps/.../clientlibs/foo
而不是建立整個項目來管理它。
然後,通過將客戶端庫添加到現成的客戶端庫類別中,可以「掛接」到創作JS中。
提AEM供了幾種調試和測試客戶端庫資料夾的工具。
的 /libs/cq/granite/components/dumplibs/dumplibs
元件生成關於系統上所有客戶端庫資料夾的資訊頁面。 的 /libs/granite/ui/content/dumplibs
節點將元件作為資源類型。 要開啟該頁,請使用以下URL(根據需要更改主機和埠):
https://<host>:<port>/libs/granite/ui/content/dumplibs.test.html
該資訊包括庫路徑和類型(CSS或JS)以及庫屬性的值,如類別和依賴項。 該頁上的後續表顯示了每個類別和通道中的庫。
的 dumplibs
元件包括test選擇器,該選擇器顯示為 ui:includeClientLib
標籤。 該頁包括js、css和主題屬性的不同組合的代碼。
dumplibs.html
中,按一下 按一下這裡進行輸出測試 的子菜單。http://<host>:<port>/libs/granite/ui/content/dumplibs.html
categories
屬性,按一下 提交查詢。中的客戶端庫資料夾支援許多其他功AEM能。 但是,在as a Cloud Service上不AEM需要這些,因此不鼓勵使用。 這裡列出了它們以實現完整性。
as a Cloud Service上不需要客戶端庫資料夾的這些附AEM加功能,因此不鼓勵使用。 這裡列出了它們以實現完整性。
可以通過 Adobe花崗岩HTML庫經理 位於的系統控制檯面板 https://<host>:<port>/system/console/configMgr
)。
其他資料夾屬性包括允許控制依賴項和嵌入,但通常不再需要這些屬性,也不鼓勵使用它們:
dependencies
:這是此庫資料夾所依賴的其他客戶端庫類別的清單。 例如,給出兩個 cq:ClientLibraryFolder
節點 F
和 G
,如果檔案在 F
需要另一個檔案 G
為了能正常工作,那麼 categories
共 G
應該是 dependencies
共 F
。embed
:用於從其他庫中嵌入代碼。 如果節點 F
嵌入節點 G
和 H
,生成的HTML將是節點中內容的連接 G
和 H
。當客戶端庫資料夾中的代碼引用其他庫時,將其他庫標識為依賴項。 的 ui:includeClientLib
引用客戶端庫資料夾的標籤會導致HTML代碼包含到生成的庫檔案的連結以及依賴關係。
依賴項必須是另一個 cq:ClientLibraryFolder
。 要確定依賴項,請向 cq:ClientLibraryFolder
具有以下屬性的節點:
例如, /etc/clientlibs/myclientlibs/publicmain
對 cq.jquery
的下界。 引用主客戶端庫的頁面生成包含以下代碼的HTML:
<script src="/etc/clientlibs/foundation/cq.jquery.js" type="text/javascript">
<script src="/etc/clientlibs/mylibs/publicmain.js" type="text/javascript">
您可以將代碼從客戶端庫嵌入到另一個客戶端庫。 在運行時,嵌入庫的生成JS和CSS檔案包括嵌入庫的代碼。
嵌入代碼對於提供對儲存在儲存庫的安全區域中的庫的訪問是有用的。
最好將所有與應用程式相關的檔案保留在以下應用程式資料夾中 /app
。 拒絕網站訪問者訪問 /app
的子菜單。 要滿足這兩種最佳做法,請在 /etc
位於下面的客戶端庫中的資料夾 /app
。
使用categories屬性標識要嵌入的客戶端庫資料夾。 要嵌入庫,請向嵌入添加屬性 cq:ClientLibraryFolder
節點,使用以下屬性屬性:
cq:ClientLibraryFolder
要嵌入的節點。在某些情況下,您可能會發現發佈實例為典型頁面生成的最終HTML包含相對大量 <script>
元素。
在這種情況下,將所有所需的客戶端庫代碼合併到單個檔案中是非常有用的,因此減少了頁面負載上來回請求的數量。 為此,您可以 embed
使用應用程式的embed屬性將所需的庫放入特定於應用程式的客戶端庫 cq:ClientLibraryFolder
的下界。
嵌入CSS檔案時,生成的CSS代碼使用與嵌入庫相關的資源的路徑。 例如,可公開訪問的庫 /etc/client/libraries/myclientlibs/publicmain
嵌入 /apps/myapp/clientlib
客戶端庫:
的 main.css
檔案包含以下樣式:
body {
padding: 0;
margin: 0;
background: url(images/bg-full.jpg) no-repeat center top;
width: 100%;
}
CSS檔案 publicmain
節點使用原始影像的URL生成包含以下樣式:
body {
padding: 0;
margin: 0;
background: url(../../../apps/myapp/clientlib/styles/images/bg-full.jpg) no-repeat center top;
width: 100%;
}
要跟蹤嵌入式代碼的源,或確保嵌入式客戶端庫生成預期結果,可以查看運行時嵌入的檔案的名稱。 要查看檔案名,請追加 debugClientLibs=true
的URL。 生成的庫包含 @import
語句而不是嵌入代碼。
在上一個示例中 從其他庫中嵌入代碼 的子菜單。 /etc/client/libraries/myclientlibs/publicmain
客戶端庫資料夾嵌入 /apps/myapp/clientlib
客戶端庫資料夾。 將參數附加到網頁會在網頁的原始碼中生成以下連結:
<link rel="stylesheet" href="/etc/clientlibs/mycientlibs/publicmain.css">
開啟 publicmain.css
檔案顯示以下代碼:
@import url("/apps/myapp/clientlib/styles/main.css");
?debugClientLibs=true
允AEM許可插拔的預處理器,並支援 YUI壓縮機 用於CSS和JavaScript和 Google關閉編譯器(GCC) 將UIY設定為預設預AEM處理器的JavaScript。
可插拔預處理器允許靈活使用,包括:
預設情況下,AEM使用YUI壓縮程式。 查看 UIY壓縮程式GitHub文檔 清單。 切換到特定客戶端的GCC壓縮器可解決使用UYI時觀察到的一些問題。
不要在客戶端庫中放置精簡庫。 而是提供原始庫,如果需要進行精簡,則使用預處理器的選項。
您可以選擇按客戶端庫或系統範圍配置預處理器配置。
cssProcessor
和 jsProcessor
在客戶端庫節點上客戶端庫節點上的預處理程式配置優先於OSGI配置。
config:= mode ":" processorName options*;
mode:= "default" | "min";
processorName := "none" | <name>;
options := ";" option;
option := name "=" value;
cssProcessor: ["default:none", "min:yui"]
jsProcessor: ["default:none", "min:gcc;compilationLevel=advanced"]
jsProcessor: [
"default:typescript",
"min:typescript",
"min:gcc;obfuscate=true"
]
failOnWarning (defaults to "false")
languageIn (defaults to "ECMASCRIPT5")
languageOut (defaults to "ECMASCRIPT5")
compilationLevel (defaults to "simple") (can be "whitespace", "simple", "advanced")
有關GCC選項的詳細資訊,請參見 GCC文檔。
UIY在中設定為預設管理符AEM。 要將此更改為GCC,請執行以下步驟。
http://<host>:<portY/system/console/configMgr
)min:gcc
。
min:gcc;obfuscate=true
。