扩展组件的示例使用了注释系统,注释系统实际上由两个组件组成
需要同时设置这两个组件,尤其是当自定义已发布评论的外观时。
每个网站页面只允许一个评论系统。
许多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