创建组件

扩展组件的示例使用注释系统，该系统实际上由两个组件组成

注释——包含的注释系统，它是放置在页面上的组件
评论——用于捕获已发布评论的实例的组件

这两个组件都需要到位，尤其是自定义已发布注释的外观时。

注意

每个站点页面只允许使用一个评论系统。

许多Communities功能已经包括一个注释系统，其resourceType可以修改为引用扩展注释系统。

创建注释组件

这些方向指定了除.hidden之外的Group值，因此可以从组件浏览器(Sidekick)中使用组件。

删除自动创建的JSP文件是因为将改用默认的HBS文件。

浏览至CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)
为自定义应用程序创建一个位置：
- 选择/apps节点
  - 创建文 件夹名 自定义
- 选择/apps/custom节点
  - 创建文 件夹名组件
选择/apps/custom/components节点
- 创建>组件……
  - 标签: 注释
  - 标题: 替换注释
  - 描述: 备用注释样式
  - 超级类型: social/commons/components/hbs/comments
  - 组: 自定义
- 选择下一步
- 选择下一步
- 选择下一步
- 选择确定
展开刚刚创建的节点：/apps/custom/components/comments
选择保存全部
右键单击comments.jsp
选择删除
选择保存全部

chlimage_1-70

创建子注释组件

这些方向将Group设置为.hidden，因为页面中应仅包含父组件。

删除自动创建的JSP文件是因为将改用默认的HBS文件。

导航到/apps/custom/components/comments节点
右键单击节点
- 选择创建>组件……
  - 标签: 评论
  - 标题: 替换注释
  - 描述: 备用注释样式
  - 超级类型: social/commons/components/hbs/comments/comments/comments
  - 组: *.hidden*
- 选择下一步
- 选择下一步
- 选择下一步
- 选择确定
展开刚刚创建的节点：/apps/custom/components/comments/comment
选择保存全部
右键单击comment.jsp
选择删除
选择保存全部

chlimage_1-71 chlimage_1-72

复制和修改默认HBS脚本

使用CRXDE Lite:

复制 comments.hbs
- 从/libs/social/commons/components/hbs/comments
- 至/apps/custom/components/comments
将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
- 从/libs/social/commons/components/hbs/comments/comments
- 至/apps/custom/components/comments/comment
将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
- 添加到属性选项卡：
  - NameTypeValue categories String cq.social.author.hbs.comments Multi
  - NameTypeValue dependencies String cq.social.scf Multi
选择保存全部
选择/apps/custom/components/comments/clientlibs节点后，创建3个文件：
- 名称: css.txt
- 名称: js.txt
- 名称:customcommentsystem.js
输入“customcommentsystem.js”作为js.txt的内容
选择保存全部

chlimage_1-73

注册SCF型号和视图

在扩展（覆盖）SCF组件时，resourceType是不同的（覆盖使用在/libs之前通过/apps搜索的相对搜索机制，以使resourceType保持相同）。因此，必须编写JavaScript（在客户端库中）来注册自定义resourceType的SCF JS模型和视图。

输入以下文本作为customcommentsystem.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);