Show Menu
主題×

建立元件

擴展元件的示例使用注釋系統,該系統實際上由兩個元件組成
  • 注釋——包含的注釋系統,是放置在頁面上的元件
  • Comment —— 擷取已張貼留言之例項的元件
這兩個元件都必須到位,尤其是自訂已張貼留言的外觀時。
每個網站頁面僅允許一個注釋系統。
許多Communities功能已包含注釋系統,其resourceType可修改以參考擴充的注釋系統。

建立注釋元件

這些方向會指 定Group (群組)值, .hidden 以便從元件瀏覽器(sidekick)使用元件。
刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。
  1. 建立自訂應用程式的位置:
    • 選擇節 /apps
      • 建立名為 custom的資 料夾
    • 選擇節 /apps/custom
      • 建立名為元件的資料夾 (Create Folder )
  2. 選擇節 /apps/custom/components
    • 「建立>元件……」
      • 標籤 :注
      • 標題 :替 代注釋
      • 說明 :替 代注釋樣式
      • 超類型 : social/commons/components/hbs/comments
      • 群組 :自
    • 選擇下 一步
    • 選擇下 一步
    • 選擇下 一步
    • 選擇「確 定」
  3. 展開剛建立的節點: /apps/custom/components/comments
  4. 選擇「 全部保存」
  5. 按一下滑鼠右鍵 comments.jsp
  6. 選擇刪
  7. 選擇「 全部保存」

建立子注釋元件

這些指示將 Group ( .hidden 群組)設為僅應包含在頁面中的父元件。
刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。
  1. 導航到節 /apps/custom/components/comments
  2. 按一下右鍵節點
    • 選擇「 建立」>「元件……」。
      • 標籤 :評
      • 標題 :替 代注釋
      • 說明 :替代 注釋樣式
      • 超類型 : social/commons/components/hbs/comments/comments
      • 群組 : *.hidden*
    • 選擇下 一步
    • 選擇下 一步
    • 選擇下 一步
    • 選擇「確 定」
  3. 展開剛建立的節點: /apps/custom/components/comments/comment
  4. 選擇「 全部保存」
  5. 按一下滑鼠右鍵 comment.jsp
  6. 選擇刪
  7. 選擇「 全部保存」

複製和修改預設HBS指令碼

使用 CRXDE Lite :

建立客戶端庫資料夾

為避免明確包含此客戶端庫,可以使用( cq.social.author.hbs.comments )預設注釋系統的clientlib的類別值,但預設元件的所有實例也將包含此clientlib。
使用 CRXDE Lite :
  • 選擇節 /apps/custom/components/comments
  • 選擇 建立節點
    • 名稱 : clientlibs
    • 類型 : cq:ClientLibraryFolder
    • 「添加到屬 」頁籤:
      • 名稱 Type categories Value Zhing String cq.social.author.hbs.comments``Multi
      • 名稱 Type dependencies Value Zhing String cq.social.scf``Multi
  • 選擇「 全部保存」
  • 在選 /apps/custom/components/comments/clientlib 取s節點後,建立3個檔案:
    • 名稱 : css.txt
    • 名稱 : js.txt
    • 名稱 :customcommentsystem.js
  • 輸入'customcommentsystem.js'作為 js.txt
  • 選擇「 全部保存」

註冊SCF模型和視圖

在擴展(覆蓋)SCF元件時,resourceType不同(覆蓋使用以前搜索的相對搜索機制,以 /apps 使 /libs resourceType保持不變)。 這就是為什麼必須編寫JavaScript(在用戶端程式庫中)來註冊SCF JS模型並檢視自訂resourceType。
輸入以下文本作為內容 customcommentsystem.js :

customcommentsystem.js

(function($CQ, _, Backbone, SCF) {
    "use strict";

    var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
    var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;

    var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
    var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;

    SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
    SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);

})($CQ, _, Backbone, SCF);

  • 選擇「 全部保存」

發佈應用程式

為了在發佈環境中體驗擴展元件,需要複製自定義元件。
一種方法是
  • 從全域導覽
    • 選擇 工具>部署>複製
    • 選取 Activate Tree
    • 設定 Start Path :to /apps/custom
    • 取消選中 Only Modified
    • 「選擇」 Activate 按鈕