延伸元件的範例使用註解系統,它實際上由兩個元件組成
兩個元件都需要放置,尤其是當自訂張貼的註解的外觀時。
每個網站頁面只允許一個評論系統。
許多Communities功能已經包含註解系統,其resourceType可以修改為參照擴充的註解系統。
這些方向會指定 群組 以外的值 .hidden
因此,元件可從元件瀏覽器(sidekick)取得。
刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。
瀏覽至 CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
建立自訂應用程式的位置:
選取 /apps
節點
選取 /apps/custom
節點
選取 /apps/custom/components
節點
建立>元件……
選取 下一個
選取 下一個
選取 下一個
選取 確定
展開剛剛建立的節點: /apps/custom/components/comments
選取 全部儲存
按一下右鍵 comments.jsp
選取 刪除
選取 全部儲存
這些方向已設定 群組 至 .hidden
因為頁面中僅應包含父元件。
刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。
導覽至 /apps/custom/components/comments
節點
以滑鼠右鍵按一下節點
選取 建立 > 元件……
*.hidden*
選取 下一個
選取 下一個
選取 下一個
選取 確定
展開剛剛建立的節點: /apps/custom/components/comments/comment
選取 全部儲存
按一下右鍵 comment.jsp
選取 刪除
選取 全部儲存
使用 CRXDE Lite:
複製 comments.hbs
編輯 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
編輯 comment.hbs
至:
變更data-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
新增至 屬性 標籤:
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會不同(覆蓋會使用搜尋到的相對搜尋機制) /apps
早於 /libs
以使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