创建组件 create-the-components
扩展组件的示例使用注释系统,该系统由两个组件组成。
- 注释 — 包含注释系统,是放置在页面上的组件。
- 评论 — 捕获已发布评论的实例的组件。
必须同时设置这两个组件,尤其是自定义已发布评论的外观时。
创建注释组件 create-the-comments-component
这些方向指定 组 值除 .hidden
因此,组件可以从组件浏览器(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
-
选择 删除
-
选择 全部保存
创建子注释组件 create-the-child-comment-component
这些方向设置 组 到 .hidden
因为页面中只应包含父组件。
删除自动创建的JSP文件是因为改用了默认的HBS文件。
-
导航至
/apps/custom/components/comments
节点 -
右键单击节点
-
选择 创建 > 组件……
- 标签: 注释
- 标题: 替代批注
- 描述: 替代注释样式
- 超级类型: social/commons/components/hbs/comments/comment
- 组:
*.hidden*
-
选择 下一个
-
选择 下一个
-
选择 下一个
-
选择 确定
-
-
展开已创建的节点:
/apps/custom/components/comments/comment
-
选择 全部保存
-
右键单击
comment.jsp
-
选择 删除
-
选择 全部保存
复制和修改默认HBS脚本 copy-and-modify-the-default-hbs-scripts
使用 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
节点 -
选择 全部保存
创建客户端库文件夹 create-a-client-library-folder
要避免包含此客户端库,可以使用默认注释系统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节点已选中,请创建三个文件:- 名称:
css.txt
- 名称:
js.txt
- 名称:customcommentsystem.js
- 名称:
-
输入'customcommentsystem.js'作为的内容
js.txt
-
选择 全部保存
注册SCF模型和视图 register-the-scf-model-view
扩展(覆盖)SCF组件时,resourceType不同(覆盖使用搜索到的相对搜索机制) /apps
早于 /libs
以使resourceType保持不变)。 这就是为什么有必要编写JavaScript(在客户端库中)来注册SCF JS模型和查看自定义resourceType的原因。
输入以下文本作为的内容 customcommentsystem.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);
- 选择 全部保存
发布应用程序 publish-the-app
要在发布环境中体验扩展组件,必须复制自定义组件。
这样做的一种方式是:
-
从全局导航,
- 选择 工具 > 部署 > 复制
- 选择 激活树
- 设置
Start Path
到/apps/custom
- 取消选中 仅已修改
- 选择 激活 按钮