添加Clientlibs

新增ClientLibraryFolder(clientlibs)

建立名為clientlibs的ClientLibraryFolder，其中包含用於呈現您網站頁面的JS和CSS。

給予此客戶端庫的categories屬性值是用於直接從內容頁面包含此客戶端庫或將其嵌入到其他客戶端庫的標識符。

1. 使用​CRXDE Lite​展開/etc/designs

2. 按一下右鍵an-scf-sandbox並選擇Create Node

   • 名稱 : clientlibs
   • 類型 : cq:ClientLibraryFolder

3. 按一下​確定

在新clientlibs節點的​屬性​頁籤中，輸入​類別​屬性：

• 名稱：類別
• 類型：字串
• 值：apps.an-scf-sandbox
• 按一下​添加
• 按一下​保存全部

注意：使用「應用程式」來預設類別值。 是將「擁有的應用程式」識別為位於/apps資料夾而非/libs的慣例。 重要：添加佔位符js.txt和​css.txt​檔案。 （沒有cq:ClientLibraryFolder，它並非正式。）

1. 按一下右鍵​/etc/designs/an-scf-sandbox/clientlibs
2. 選擇​建立檔案……
3. 輸入​名稱： css.txt
4. 選擇​建立檔案……
5. 輸入​名稱： js.txt
6. 按一下​保存全部

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

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

#base=.
 style.css

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

body {

background-color: #b0c4de;

}

嵌入SCF Clientlibs

在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現在應如何出現在資料庫中：

在PlayPage範本中包含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:

1. 使用​CRXDE Lite，選擇​/libs/foundation/components/page/headlibs.jsp

2. 按一下右鍵並選擇​Copy（或從工具欄中選擇Copy）

3. 選取 /apps/an-scf-sandbox/components/playpage

4. 按一下右鍵並選擇​貼上（或從工具欄中選擇貼上）

5. 按兩下​headlibs.jsp​將其開啟

6. 在檔案結尾附加下列行
   <ui:includeClientLib categories="apps.an-scf-sandbox"/>

7. 按一下​保存全部

<%@ 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按一下包表徵圖

• 按一下​建立包

  • 包名：an-scf-sandbox-minimal-pkg
  • 版本：0.1
  • 群組: leave as default
  • 按一下​確定

• 按一下​編輯

  • 選擇​Filters​頁籤

    • 按一下​添加filter
    • 根路徑：瀏覽/apps/an-scf-sandbox
    • 按一下​完成
    • 按一下​添加filter
    • 根路徑：瀏覽/etc/designs/an-scf-sandbox
    • 按一下​完成
    • 按一下​添加filter
    • 根路徑：瀏覽/content/an-scf-sandbox**
    • 按一下​完成

  • 按一下​保存

• 按一下​Build

現在，您可以選取​Download​將它儲存至磁碟和​Upload Package​其他地方，並選取​More > Replicate，將沙盒推送至localhost發佈例項，以擴展您的沙盒領域。