建立元件 create-the-components

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
社群

建立對象：

開發人員

延伸元件的範例使用由兩個元件組成的註解系統。

註解 — 放在頁面上的元件所構成的註解系統。
評論 — 擷取已張貼評論之例項的元件。

兩個元件都必須放置到位，尤其是如果自訂張貼的註解的外觀。

NOTE

每個網站頁面只允許一個註解系統。

許多Communities功能已經包含註解系統，其resourceType可以修改為參考擴充的註解系統。

建立註解元件 create-the-comments-component

這些指示會指定.hidden以外的群組值，以便元件可以從元件瀏覽器(sidekick)使用。

刪除自動建立的JSP檔案是因為會改用預設的HBS檔案。

瀏覽至 CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
建立自訂應用程式的位置：
- 選取/apps節點
  - 建立名為 自訂 的資料夾
- 選取/apps/custom節點
  - 建立名為 元件 的資料夾
選取/apps/custom/components節點
- 建立>元件……
  - 標籤：註解
  - 標題： 替代註解
  - 描述： 替代註解樣式
  - 超級型別： social/commons/components/hbs/comments
  - 群組：自訂
- 選取 下一步
- 選取 下一步
- 選取 下一步
- 選取確定
展開已建立的節點： /apps/custom/components/comments
選取 全部儲存
用滑鼠右鍵按一下comments.jsp
選取刪除
選取 全部儲存

create-component

建立子註解元件 create-the-child-comment-component

這些方向將群組設定為.hidden，因為只有父元件應包含在頁面中。

刪除自動建立的JSP檔案是因為會改用預設的HBS檔案。

導覽至/apps/custom/components/comments節點
以滑鼠右鍵按一下節點
- 選取建立 > 元件……
  - 標籤：註解
  - 標題： 替代註解
  - 描述： 替代註解樣式
  - 超級型別： social/commons/components/hbs/comments/comment
  - 群組： *.hidden*
- 選取 下一步
- 選取 下一步
- 選取 下一步
- 選取確定
展開已建立的節點： /apps/custom/components/comments/comment
選取 全部儲存
用滑鼠右鍵按一下comment.jsp
選取刪除
選取 全部儲存

create-child-component

create-component-crxde

複製及修改預設HBS指令碼 copy-and-modify-the-default-hbs-scripts

使用CRXDE Lite：

複製comments.hbs
- 來自/libs/social/commons/components/hbs/comments
- 至/apps/custom/components/comments
編輯comments.hbs至：
- 變更data-scf-component屬性的值（~第20行）：
  - 來自social/commons/components/hbs/comments
  - 至/apps/custom/components/comments
- 修改以包含自訂註解元件（第75行）：
  - 取代{{include this resourceType='social/commons/components/hbs/comments/comment'}}
  - 與{{include this resourceType='/apps/custom/components/comments/comment'}}
複製comment.hbs
- 從/libs/social/commons/components/hbs/comments/comment
- 至/apps/custom/components/comments/comment
編輯comment.hbs至：
- 變更data-scf-component屬性的值（~第19行）
  - 來自social/commons/components/hbs/comments/comment
  - 至/apps/custom/components/comments/comment
選取/apps/custom節點
選取 全部儲存

建立使用者端資源庫資料夾 create-a-client-library-folder

若要避免包含此使用者端程式庫，可以使用預設註解系統clientlib的類別值( cq.social.author.hbs.comments)。不過，此clientlib隨後也必須包含在預設元件的所有執行個體中。

使用CRXDE Lite：

選取/apps/custom/components/comments節點
選取 建立節點
- 名稱：clientlibs
- 類型：cq:ClientLibraryFolder
- 新增至屬性標籤：
  - 名稱 categories 型別 String 值 cq.social.author.hbs.comments Multi
  - 名稱 dependencies 型別 String 值 cq.social.scf Multi
選取 全部儲存
選取/apps/custom/components/comments/clientlib節點後，建立三個檔案：
- 名稱：css.txt
- 名稱：js.txt
- 名稱： customcommentsystem.js
輸入'customcommentsystem.js'作為js.txt的內容
選取 全部儲存

comments-clientlibs

註冊SCF模型與檢視 register-the-scf-model-view

延伸（覆寫） SCF元件時，resourceType不同（覆寫使用相對搜尋機制，在/libs前搜尋/apps，使resourceType保持相同）。這就是為什麼需要編寫JavaScript （在使用者端程式庫中）來註冊SCF JS模型和檢視自訂resourceType的原因。

輸入下列文字作為customcommentsystem.js的內容：

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);

選取 全部儲存

應用程式Publish publish-the-app

若要在發佈環境中體驗擴充元件，必須複製自訂元件。

其中一個方法是：

從全域導覽，
- 選取工具 > 部署 > 復寫
- 選取 啟動樹狀結構
- 將Start Path設為/apps/custom
- 取消核取 Only Modified
- 選取啟動按鈕

recommendation-more-help

81e2cd9d-0789-409d-b87c-2a8ce4f28791