新增Clientlibs add-clientlibs

新增ClientLibraryFolder (clientlibs) add-a-clientlibraryfolder-clientlibs

建立名為的ClientLibraryFolder clientlibs ，其中包含用於呈現網站頁面的JavaScript (JS)和階層式樣式表(CSS)。

此 categories 指定給此使用者端程式庫的屬性值是識別碼，用來直接從內容頁面包含此clientlib或將其嵌入其他clientlibs。

在 屬性 索引標籤以新 clientlibs 節點，輸入 類別 屬性：

注意：在類別值前面加上「apps」。 是將「擁有的應用程式」識別為/apps資料夾中的慣例，而非/libs。 重要：新增預留位置 js.txt和 css.txt 檔案。 （這並非正式的cq：ClientLibraryFolder缺少它們。）

css.txt和js.txt的第一行會識別要尋找下列檔案清單的基本位置。

嘗試將css.txt的內容設定為

#base=.
 style.css

接著，在clientlibs下建立名為style.css的檔案，並將內容設為

body {

background-color: #b0c4de;

}

內嵌SCF Clientlibs embed-scf-clientlibs

在 屬性 的索引標籤 clientlibs 節點，輸入多值字串屬性 內嵌. 這會嵌入必要的 適用於SCF元件的使用者端程式庫(clientlibs). 在本教學課程中，已新增Communities元件所需的許多clientlibs。

這可能是或不可能是用於生產網站的理想方法，因為考量便利性與每個頁面下載的clientlibs的大小/速度而定。

如果在一個頁面上只使用一個功能，您可以直接在頁面上包含該功能的完整clientlib，例如，

% ui:includeClientLib categories=cq.social.hbs.forum" %

在此情況下，請將它們全部納入，因此偏好使用作者clientlibs且更基本的SCF clientlibs：

這就是方式 /etc/designs/an-scf-sandbox/clientlibs 現在應該會出現在存放庫中：

在PlayPage範本中包含Clientlibs include-clientlibs-in-playpage-template

不包括 apps.an-scf-sandbox ClientLibraryFolder類別時，SCF元件無法正常運作，且樣式無法設為必要的JavaScript和CSS樣式。

例如，若不包含clientlibs，SCF註解元件會以無樣式顯示：

納入apps.an-scf-sandbox clientlibs後，SCF註解元件會以樣式顯示：

include陳述式屬於 head 的區段 html 指令碼。 預設 foundation head.jsp 包含可覆蓋的指令碼： headlibs.jsp.

複製headlibs.jsp並包含clientlibs：

<%@ 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

目前儲存您的工作 saving-your-work-so-far

此時，存在最低限度的沙箱。 或許值得另存為套件，這樣在播放時，如果您的存放庫損毀，而您想要重新開始，您可以關閉伺服器。 然後重新命名或刪除資料夾crx-quickstart/、開啟伺服器、上傳並安裝此儲存的套件，且不必重複這些最基本的步驟。

此套件存在於 建立範例頁面 教學課程適用於無法等待跳入並開始播放的讀者。

若要建立封裝：

現在您可以選取 下載 以儲存至磁碟及 上傳套裝 在其他位置，並選取 更多>復寫 將沙箱推送至localhost publish執行個體，以擴展沙箱的範圍。