擴展元件的示例使用注釋系統,該系統實際上由兩個元件組成
這兩個元件都必須到位,尤其是當自訂已張貼留言的外觀時。
每個網站頁面僅允許一個評論系統。
許多Communities功能已包括注釋系統,其resourceType可被修改以引用擴展注釋系統。
這些方向指定組值,而不是.hidden
值,以便元件可從元件瀏覽器(sidekick)使用。
刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。
瀏覽至CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)
為自訂應用程式建立位置:
選擇/apps
節點
選擇/apps/custom
節點
選擇/apps/custom/components
節點
建立>元件……
選擇Next
選擇Next
選擇Next
選擇OK
展開剛建立的節點:/apps/custom/components/comments
選擇保存全部
按一下右鍵comments.jsp
選擇Delete
選擇保存全部
這些指示將Group設定為.hidden
,因為頁面中應僅包含父元件。
刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。
導覽至/apps/custom/components/comments
節點
以滑鼠右鍵按一下節點
選擇建立>元件……
*.hidden*
選擇Next
選擇Next
選擇Next
選擇OK
展開剛建立的節點:/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
修改以包含自訂註解元件(~第75行):
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
{{include this resourceType='/apps/custom/components/comments/comment'}}
複製 comment.hbs
將comment.hbs
編輯為:
更改資料 — scf-component屬性的值(~行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
添加到Properties頁簽:
categories
String
NameTypeValue cq.social.author.hbs.comments
Multi
dependencies
String
NameTypeValue 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(在客戶端庫中)來註冊自訂resourceType的SCF 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
:至/apps/custom
Only Modified
Activate
按鈕