新增Clientlibs

新增ClientLibraryFolder(clientlibs)

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

categories予此用戶端程式庫的屬性值是用來直接從內容頁面包含此clientlib,或將其內嵌在其他clientlib中的識別碼。

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

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

    • 名稱: clientlibs
    • 類型: cq:ClientLibraryFolder
  3. Click OK

chlimage_1-220

在新節 點的 「屬性」選 clientlibs 項卡中,輸入 categories 屬性:

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

注意:使用「應用程式」來預設類別值。 是將「擁有的應用程式」識別為位於/apps資料夾而非/libs的慣例。 重要:新增預留位 js.txt 置和 css.txt 檔案。 (沒有cq:ClientLibraryFolder,它並非正式。)

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

  2. 選擇 建立檔案……

  3. Enter Name: css.txt

  4. 選擇 建立檔案……

  5. Enter Name: js.txt

  6. 按一下「 全部儲存」

chlimage_1-221

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

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

#base=.
 style.css

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

body {

background-color: #b0c4de;

}

嵌入SCF客戶端

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

請注意 ,這可能是生產網站所需使用的方法,因為有考慮到每個頁面所下載的clientlib的便利性與大小/速度。

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

在本例中,我們將它們全部包括在內,因此,我們希望使用更基本的SCF客戶端libs,即作者clientlibs:

  • 名稱: 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
    • Click 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語句屬於指令碼 <head> 的部 <html> 分。 預設值 foundation head.jsp 包含可重疊的指令碼: headlibs.jsp.

複製headlibs.jsp並包含clientlibs:

  1. 使用 CRXDE Lite,選取 /libs/foundation/components/page/headlibs.jsp

  2. 按一下右鍵並選 擇「複製 」(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"/>

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

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

chlimage_1-226

保存您的作品

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

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

要建立包:

  • CRXDE Lite,按一下「套 件」圖示

  • 按一下「 建立套件」

    • 封裝名稱: an-scf-sandbox-minimal-pkg
    • 版本: 0.1
    • 群組:<leave as default>
    • Click OK
  • 按一下「 編輯」

    • 「選擇篩 選器 」頁籤

      • 按一下「 新增篩選」
      • 根路徑:<browse to /apps/an-scf-sandbox>
      • 按一下「完 成」
      • 按一下「 新增篩選」
      • 根路徑:<browse to /etc/designs/an-scf-sandbox>
      • 按一下「完 成」
      • 按一下「 新增篩選」
      • 根路徑:<browse to /content/an-scf-sandbox>
      • 按一下「完 成」
    • Click Save

  • 按一下「建 立」

現在,您可以選取「 Download 」(下載)以儲存至磁碟並將它上傳至其他位置的「 Upload Package 」(上傳套件),並選取「 More」(更多)>「Replicate 」(複製),將沙盒推送至localhost發佈例項,以擴展沙盒的領域。

本頁內容