新增Clientlibs

新增ClientLibraryFolder(clientlibs)

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

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

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

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

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

  3. 按一下​OK

chlimage_1-220

在新clientlibs節點的​屬性​頁簽中，輸入​categories​屬性：

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

注意：使用「apps」為類別值加上前置詞。 是將「擁有的應用程式」標識為位於/apps資料夾（而非/libs）的慣例。 重要：添加佔位符js.txt和css.txt檔案。 （若沒有cq:ClientLibraryFolder，則不是正式的。）

  1. 按一下右鍵​/etc/designs/an-scf-sandbox/clientlibs

  2. 選擇​建立檔案……

  3. 輸入​名稱:css.txt

  4. 選擇​建立檔案……

  5. 輸入​名稱:js.txt

  6. 按一下「全部保存」

chlimage_1-221

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

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

#base=.
 style.css

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

body {

background-color: #b0c4de;

}

內嵌SCF Clientlibs

在clientlibs節點的​屬性​標籤中，輸入多值字串屬性​embed。 這將為SCF元件🔗嵌入必要的客戶端庫(clientlibs)。 在本教學課程中，我們將新增Communities元件所需的許多clientlib。

​​請注意，由於考量到為每個頁面下載的clientlib的方便性與大小/速度，因此這可能或不是生產網站所需的方法。

如果只在一個頁面上使用一個功能，您可以直接在頁面上包含該功能的完整clientlib，例如<% ui:includeClientLib類別=cq.social.hbs.forum" %>

在這種情況下，我們將它們全部包括在內，因此，我們更希望使用更基本的SCF客戶端，即作者客戶端：

  • 名稱: embed

  • 類型: String

  • 按一下 Multi

  • 值: cq.social.scf

    <enter> 會彈出對話框

    在每​[個項]​目後按一下+以新增下列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
    • 按一下​OK

  • 按一下「全部保存」

chlimage_1-222

以下說明/etc/designs/an-scf-sandbox/clientlibs現在在存放庫中的顯示方式：

chlimage_1-223

在PlayPage範本中包含Clientlibs

如果頁面上未包含apps.an-scf-sandbox ClientLibraryFolder類別，則SCF元件將無法工作，也無法設定樣式，因為必要的Javascript和樣式將不可用。

例如，不包括clientlibs,SCF注釋元件將顯示為未設定樣式：

chlimage_1-224

一旦包含apps.an-scf-sandbox clientlibs後，SCF注釋元件就會顯示樣式：

chlimage_1-225

include語句屬於<html>指令碼的<head>部分。 預設​foundation head.jsp​包含可重疊的指令碼：headlibs.jsp。

複製headlibs.jsp並包含clientlibs:

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

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

  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"/>

在瀏覽器中載入您的網站，查看背景是否不是藍色。

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

到目前為止保存您的工作

此時，存在一個極簡的沙箱，因此，在播放時，如果儲存庫已損壞並且您希望重新啟動，您可以關閉伺服器、更名或刪除資料夾crx-quickstart/、開啟伺服器、上傳並安裝此保存的包，而不必重複這些最基本的步驟。

此套件存在於建立範例頁面教學課程中，供迫不及待要跳入並開始播放的使用者使用！…

要建立包：

  • 從​CRXDE Lite，按一下包表徵圖

  • 按一下​建立包

    • 封裝名稱: an-scf-sandbox-minimal-pkg
    • 版本: 0.1
    • 組：<保留為預設值>
    • 按一下​OK

  • 按一下​編輯

    • 選擇​Filters​頁簽

      • 按一下「新增篩選器」
      • 根路徑：<瀏覽/apps/an-scf-sandbox>
      • 按一下​Done
      • 按一下「新增篩選器」
      • 根路徑：<瀏覽/etc/designs/an-scf-sandbox>
      • 按一下​Done
      • 按一下「新增篩選器」
      • 根路徑：<瀏覽/content/an-scf-sandbox>
      • 按一下​Done

    • 按一下​儲存

  • 按一下​Build

現在，您可以選取​Download​將其儲存至磁碟，並在其他位置選取​Upload Package，以及選取​More > Replicate，以便將沙箱推送至localhost發佈例項，以擴展沙箱的領域。

本頁內容