扩展组件的示例使用注释系统,该系统实际上由两个组件组成
这两个组件都需要到位,尤其是自定义已发布注释的外观时。
每个站点页面只允许使用一个评论系统。
许多Communities功能已经包括一个注释系统,其resourceType可以修改为引用扩展注释系统。
这些方向指定了除.hidden
之外的Group值,因此可以从组件浏览器(Sidekick)中使用组件。
删除自动创建的JSP文件是因为将改用默认的HBS文件。
浏览至CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)
为自定义应用程序创建一个位置:
选择/apps
节点
选择/apps/custom
节点
选择/apps/custom/components
节点
创建>组件……
选择下一步
选择下一步
选择下一步
选择确定
展开刚刚创建的节点:/apps/custom/components/comments
选择保存全部
右键单击comments.jsp
选择删除
选择保存全部
这些方向将Group设置为.hidden
,因为页面中应仅包含父组件。
删除自动创建的JSP文件是因为将改用默认的HBS文件。
导航到/apps/custom/components/comments
节点
右键单击节点
选择创建>组件……
*.hidden*
选择下一步
选择下一步
选择下一步
选择确定
展开刚刚创建的节点:/apps/custom/components/comments/comment
选择保存全部
右键单击comment.jsp
选择删除
选择保存全部
使用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
编辑为:
更改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(在客户端库中)来注册自定义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
按钮