擴展元件的示例使用注釋系統,該系統實際上由兩個元件組成
這兩個元件都必須到位,尤其是自訂已張貼留言的外觀時。
每個網站頁面僅允許一個注釋系統。
許多Communities功能已包含注釋系統,其resourceType可修改以參考擴充的注釋系統。
這些方向指定除.hidden
外的Group值,以便從元件瀏覽器(sidekick)使元件可用。
刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。
瀏覽至CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)
建立自訂應用程式的位置:
選擇/apps
節點
選擇/apps/custom
節點
選擇/apps/custom/components
節點
「建立>元件……」
選擇Next
選擇Next
選擇Next
選擇確定
展開剛建立的節點:/apps/custom/components/comments
選擇全部保存
按一下右鍵comments.jsp
選擇Delete
選擇全部保存
這些方向將Group設為.hidden
,因為頁面中應僅包含父元件。
刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。
導航至/apps/custom/components/comments
節點
按一下右鍵節點
選擇建立 > 元件……
*.hidden*
選擇Next
選擇Next
選擇Next
選擇確定
展開剛建立的節點:/apps/custom/components/comments/comment
選擇全部保存
按一下右鍵comment.jsp
選擇Delete
選擇全部保存
使用CRXDE Lite:
複製 comments.hbs
將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
將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
添加到屬性頁籤:
categories
String
cq.social.author.hbs.comments
Multi
dependencies
String
cq.social.scf
Multi
選擇全部保存
選擇/apps/custom/components/comments/clientlib
s節點後,建立3個檔案:
css.txt
js.txt
輸入'customcommentsystem.js'作為js.txt
的內容
選擇全部保存
在擴展(覆蓋)SCF元件時,resourceType不同(覆蓋使用在/libs
之前通過/apps
搜索的相對搜索機制,以使resourceType保持不變)。 這就是為什麼必須編寫JavaScript(在用戶端程式庫中)來註冊SCF JS模型並檢視自訂resourceType。
輸入以下文本作為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);
為了在發佈環境中體驗擴展元件,需要複製自定義元件。
一種方法是:
從全域導覽,
Start Path
設為/apps/custom