添加Clientlibs

新增ClientLibraryFolder(clientlibs)

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

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

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

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

    • 名稱: clientlibs
    • 類型: cq:ClientLibraryFolder
  3. 按一下​確定

chlimage_1-220

在新clientlibs節點的​屬性​頁籤中,輸入​categories​屬性:

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

注意:使用「應用程式」來預設類別值。 是將「擁有的應用程式」識別為位於/apps資料夾而非/libs的慣例。 重要:添加佔位符js.txtcss.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

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

body {

background-color: #b0c4de;

}

嵌入SCF Clientlibs

clientlibs節點的​屬性​標籤中,輸入多值字串屬性​embed。 這將嵌入SCF元件](client-customize.md#clientlibs-for-scf)所需的[客戶端庫(clientlibs)。 在本教學課程中,我們將新增Communities元件所需的許多clientlib。

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

如果僅在單一頁面上使用一項功能,您可以直接在頁面上包含該功能的完整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
    • 按一下​確定
  • 按一下​保存全部

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. 按一下右鍵並選擇​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?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"/>

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

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>
    • 按一下​確定
  • 按一下​編輯

    • 選擇​Filters​頁籤

      • 按一下​添加filter
      • 根路徑:<browse to /apps/an-scf-sandbox
      • 按一下​完成
      • 按一下​添加filter
      • 根路徑:<browse to /etc/designs/an-scf-sandbox
      • 按一下​完成
      • 按一下​添加filter
      • 根路徑:<browse to /content/an-scf-sandbox
      • 按一下​完成
    • 按一下​保存

  • 按一下​Build

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

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now