建立名為clientlibs
的ClientLibraryFolder,其中包含用於呈現網站頁面的JS和CSS。
指定給此客戶端庫的categories
屬性值是用於直接從內容頁面包括此clientlib或將其嵌入到其他客戶端庫的標識符。
使用CRXDE Lite,展開/etc/designs
按一下右鍵an-scf-sandbox
並選擇Create Node
clientlibs
cq:ClientLibraryFolder
按一下OK
在新clientlibs
節點的屬性頁簽中,輸入categories屬性:
注意:使用「apps」為類別值加上前置詞。 是將「擁有的應用程式」標識為位於/apps資料夾(而非/libs)的慣例。 重要:添加佔位符js.tx
t和css.txt
檔案。 (若沒有cq:ClientLibraryFolder,則不是正式的。)
/etc/designs/an-scf-sandbox/clientlibs
css.txt
js.txt
css.txt和js.txt的第一行標識了從中找到下列檔案清單的基本位置。
請嘗試將css.txt的內容設定為
#base=.
style.css
然後在clientlibs下建立名為style.css的檔案,並將內容設定為
body {
background-color: #b0c4de;
}
在clientlibs
節點的屬性標籤中,輸入多值字串屬性embed。 這嵌入了SCF元件🔗所需的客戶端庫(clientlibs)。 在本教學課程中,新增了Communities元件所需的許多clientlib。
請注意,由於考量到為每個頁面下載的clientlib的方便性與大小/速度,因此這可能或不是生產網站所需的方法。
如果只在一個頁面上使用一個功能,您可以直接在頁面上包含該功能的完整clientlib,例如
% ui:includeClientLib categories=cq.social.hbs.forum" %
在這種情況下,包括所有的,因此,更基本的SCF客戶端庫(即作者客戶端庫)被推薦:
名稱 : embed
類型 : String
按一下 Multi
值: cq.social.scf
它會彈出對話,
按一下每個項目後的+
以新增下列clientlib類別:
cq.ckeditor
cq.social.author.hbs.comments
cq.social.author.hbs.forum
cq.social.author.hbs.rating
cq.social.author.hbs.reviews
cq.social.author.hbs.voting
按一下「全部保存」
以下說明/etc/designs/an-scf-sandbox/clientlibs
現在在存放庫中的顯示方式:
如果頁面上未包含apps.an-scf-sandbox
ClientLibraryFolder類別,則SCF元件將無法工作,也無法設定樣式,因為必要的Javascript和樣式將不可用。
例如,在不包含clientlib的情況下,SCF注釋元件將顯示為未設定樣式:
納入apps.an-scf-sandbox clientlibs後,SCF注釋元件就會顯示樣式:
include語句屬於html
指令碼的head
部分。 預設foundation head.jsp
包含可重疊的指令碼:headlibs.jsp
。
複製headlibs.jsp並包含clientlibs:
使用CRXDE Lite,選擇/libs/foundation/components/page/headlibs.jsp
按一下右鍵並選擇複製(或從工具欄選擇複製)
選取 /apps/an-scf-sandbox/components/playpage
按一下右鍵並選擇貼上(或從工具欄選擇貼上)
按兩下headlibs.jsp
以開啟它
將下列行附加到檔案的結尾
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
按一下「全部保存」
<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
在瀏覽器中載入您的網站,查看背景是否不是藍色。
https://localhost:4502/content/an-scf-sandbox/en/play.html
此時,存在一個極簡的沙箱,因此,在播放時,如果您的儲存庫已損壞且您希望重新開始,您可以關閉伺服器、更名或刪除資料夾crx-quickstart/、開啟伺服器、上傳和安裝此保存的包,而不必重複這些最基本的步驟。
此套件存在於建立範例頁面教學課程中,供迫不及待要跳入並開始播放的使用者使用!…
要建立包:
從CRXDE Lite按一下包表徵圖
按一下建立包
leave as default
按一下編輯
選擇Filters頁簽
/apps/an-scf-sandbox
/etc/designs/an-scf-sandbox
/content/an-scf-sandbox**
按一下儲存
按一下Build
現在,您可以選取Download將其儲存至磁碟,並在其他位置選取Upload Package,以及選取More > Replicate,以便將沙箱推送至localhost發佈例項,以擴展沙箱的領域。