新增Clientlibs add-clientlibs

CAUTION
AEM 6.4已結束延伸支援,本檔案不再更新。 如需詳細資訊,請參閱 技術支援期. 尋找支援的版本 此處.

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

建立名為 clientlibs其中包含用於轉譯您網站頁面的JS和CSS。

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

  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」為類別值加上前置詞。 是將「擁有的應用程式」標識為位於/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

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

body {

background-color: #b0c4de;

}

內嵌SCF Clientlib embed-scf-clientlibs

屬性 標籤 clientlibs 節點,輸入多值字串屬性 內嵌. 這會內嵌必要 用於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
    • 按一下 確定
  • 按一下 全部儲存

chlimage_1-222

這就是方法 /etc/designs/an-scf-sandbox/clientlibs 現在應會顯示在存放庫中:

chlimage_1-223

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

不含 apps.an-scf-sandbox 在頁面上,SCF元件將無法工作,也無法設定樣式,因為必要的Javascript和樣式將不可用。

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

chlimage_1-224

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

chlimage_1-225

包含陳述式屬於 <head> 區段 <html> 指令碼。 預設 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

省下你的工作 saving-your-work-so-far

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

此包存在於 建立範例頁面 教學課程,讓那些迫不及待地跳入並開始播放的人……

要建立包:

  • CRXDE Lite,按一下 包表徵圖

  • 按一下 建立套件

    • 封裝名稱: an-scf-sandbox-minimal-pkg
    • 版本: 0.1
    • 組: <leave as="" default="">
    • 按一下 確定
  • 按一下 編輯

    • 選擇 篩選器 標籤

      • 按一下 新增篩選
      • 根路徑: <browse to="" span="" id="0" translate="no" />>/apps/an-scf-sandbox
      • 按一下 完成
      • 按一下 新增篩選
      • 根路徑: <browse to="" span="" id="0" translate="no" />>/etc/designs/an-scf-sandbox
      • 按一下 完成
      • 按一下 新增篩選
      • 根路徑: <browse to="" span="" id="0" translate="no" />>/content/an-scf-sandbox
      • 按一下 完成
    • 按一下 儲存

  • 按一下 建置

現在您可以選取 下載 保存到磁碟和 上傳套件 在其他地方,以及選取 更多>複製 以便將沙箱推送至localhost發佈例項,以展開沙箱的領域。

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6