建立元件

擴展元件的示例使用注釋系統，該系統實際上由兩個元件組成

注釋——包含的注釋系統，該系統是放置在頁面上的元件。
Comment —— 擷取已張貼留言之例項的元件。

這兩個元件都必須到位，尤其是自訂已張貼留言的外觀時。

注意

每個網站頁面僅允許一個注釋系統。

許多Communities功能已包含注釋系統，其resourceType可修改以參考擴充的注釋系統。

建立注釋元件

這些方向指定除.hidden外的Group值，以便從元件瀏覽器(sidekick)使元件可用。

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

瀏覽至CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)
建立自訂應用程式的位置：
- 選擇/apps節點
  - 建立 Foldernamed自訂
- 選擇/apps/custom節點
  - 建立 Foldernamed元件
選擇/apps/custom/components節點
- 「建立>元件……」
  - 標籤: 留言
  - 標題: 替代注釋
  - 說明: 替代注釋樣式
  - 超類型: social/commons/components/hbs/comments
  - 群組: 自訂
- 選擇Next
- 選擇Next
- 選擇Next
- 選擇確定
展開剛建立的節點：/apps/custom/components/comments
選擇全部保存
按一下右鍵comments.jsp
選擇Delete
選擇全部保存

create-component

建立子注釋元件

這些方向將Group設為.hidden，因為頁面中應僅包含父元件。

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

導航至/apps/custom/components/comments節點
按一下右鍵節點
- 選擇建立 > 元件……
  - 標籤: 評論
  - 標題: 替代注釋
  - 說明: 替代注釋樣式
  - 超類型: social/commons/components/hbs/comments/comments
  - 群組: *.hidden*
- 選擇Next
- 選擇Next
- 選擇Next
- 選擇確定
展開剛建立的節點：/apps/custom/components/comments/comment
選擇全部保存
按一下右鍵comment.jsp
選擇Delete
選擇全部保存

create-child-component

create-component-crxde

複製和修改預設HBS指令碼

使用CRXDE Lite:

複製 comments.hbs
- 從/libs/social/commons/components/hbs/comments
- 至/apps/custom/components/comments
將comments.hbs編輯為：
- 更改data-scf-component屬性的值(~line 20):
  - 從 social/commons/components/hbs/comments
  - 至 /apps/custom/components/comments
- 修改以包含自訂注釋元件(~line 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屬性的值(~ line 19)
  - 從 social/commons/components/hbs/comments/comment
  - 至 /apps/custom/components/comments/comment
選擇/apps/custom節點
選擇全部保存

建立客戶端庫資料夾

為避免明確包含此客戶端庫，可使用預設注釋系統的clientlib的類別值(cq.social.author.hbs.comments)，但是，預設元件的所有實例也將包含此clientlib。

使用CRXDE Lite:

選擇/apps/custom/components/comments節點
選擇建立節點
- 名稱: clientlibs
- 類型: cq:ClientLibraryFolder
- 添加到屬性頁籤：
  - NameTypeValue categories String cq.social.author.hbs.comments Multi
  - NameTypeValue dependencies String cq.social.scf Multi
選擇全部保存
選擇/apps/custom/components/comments/clientlibs節點後，建立3個檔案：
- 名稱: css.txt
- 名稱: js.txt
- 名稱:customcommentsystem.js
輸入'customcommentsystem.js'作為js.txt的內容
選擇全部保存

comments-clientlibs

註冊SCF型號並查看

在擴展（覆蓋）SCF元件時，resourceType不同（覆蓋使用在/libs之前通過/apps搜索的相對搜索機制，以使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);