建立名為clientlibs
的ClientLibraryFolder,其中包含用於呈現您網站頁面的JS和CSS。
給予此客戶端庫的categories
屬性值是用於直接從內容頁面包含此客戶端庫或將其嵌入到其他客戶端庫的標識符。
使用CRXDE Lite展開/etc/designs
按一下右鍵an-scf-sandbox
並選擇Create Node
clientlibs
cq:ClientLibraryFolder
按一下確定
在新clientlibs
節點的屬性頁籤中,輸入類別屬性:
注意:使用「應用程式」來預設類別值。 是將「擁有的應用程式」識別為位於/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元件](/docs/experience-manager-65/communities/client-customize.html?lang=zh-Hant#clientlibs-for-scf)所需的[客戶端庫(clientlibs)。 在本教程中,將添加Communities元件所需的許多客戶端。
請注 意,這可能是生產網站所需的方法,因為有考慮到每個頁面所下載的clientlibs的便利性與大小/速度。
如果僅在單一頁面上使用一項功能,您可以直接在頁面上包含該功能的完整clientlib,例如
% ui:includeClientLib categories=cq.social.hbs.forum" %
在本例中,包括所有的SCF客戶端,因此,作者clientlibs的更基本的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和樣式將不可用。
例如,如果不包含clientlibs,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
按一下右鍵並選擇Copy(或從工具欄中選擇Copy)
選取 /apps/an-scf-sandbox/components/playpage
按一下右鍵並選擇貼上(或從工具欄中選擇貼上)
按兩下headlibs.jsp
將其開啟
在檔案結尾附加下列行
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
按一下保存全部
<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp?lang=zh-Hant" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp?lang=zh-Hant"/>
<% 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發佈例項,以擴展您的沙盒領域。