创建组件

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

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

需要同时设置这两个组件，尤其是当自定义已发布评论的外观时。

创建注释组件

这些方向指定 组 值除外 .hidden 因此，组件可以从组件浏览器(sidekick)中获取。

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

1. 浏览到 CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

2. 为自定义应用程序创建位置：

   • 选择 /apps 节点

     • 创建文件夹 已命名 自定义

   • 选择 /apps/custom 节点

     • 创建文件夹 已命名 组件

3. 选择 /apps/custom/components 节点

   • 创建>组件……

     • 标签： 评论
     • 标题： 替代注释
     • 描述： 替代注释样式
     • 超级类型： social/commons/components/hbs/comments
     • 组： 自定义

   • 选择 下一个

   • 选择 下一个

   • 选择 下一个

   • 选择 确定

4. 展开刚刚创建的节点： /apps/custom/components/comments

5. 选择 全部保存

6. 右键单击 comments.jsp

7. 选择 删除

8. 选择 全部保存

创建子注释组件

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

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

1. 导航到 /apps/custom/components/comments 节点

2. 右键单击节点

   • 选择 创建 > 组件……

     • 标签： 注释
     • 标题： 替代批注
     • 描述： 替代注释样式
     • 超级类型： social/commons/components/hbs/comments/comment
     • 组: *.hidden*

   • 选择 下一个

   • 选择 下一个

   • 选择 下一个

   • 选择 确定

3. 展开刚刚创建的节点： /apps/custom/components/comments/comment

4. 选择 全部保存

5. 右键单击 comment.jsp

6. 选择 删除

7. 选择 全部保存

复制和修改默认HBS脚本

使用 CRXDE Lite：

• 复制 comments.hbs

  • 起始日期 /libs/social/commons/components/hbs/comments
  • 至 /apps/custom/components/comments

• 编辑 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

  • 起始日期 /libs/social/commons/components/hbs/comments/comment
  • 至 /apps/custom/components/comments/comment

• 编辑 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/clientlibs节点已选定，请创建3个文件：

  • 名称: css.txt
  • 名称: js.txt
  • 名称：customcommentsystem.js

• 输入'customcommentsystem.js'作为的内容 js.txt

• 选择 全部保存

注册SCF模型和视图

扩展（覆盖）SCF组件时，resourceType不同（覆盖使用搜索到的相对搜索机制） /apps 早于 /libs 以使resourceType保持不变)。 这就是为什么有必要编写JavaScript（在客户端库中）来注册SCF JS模型和查看自定义resourceType的原因。

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

• 选择 全部保存

发布应用程序

为了在发布环境中体验扩展组件，需要复制自定义组件。

实现目标的一种方法是：

• 从全局导航，

  • 选择 工具 > 部署 > 复制
  • 选择 激活树
  • 设置 Start Path 到 /apps/custom
  • 取消选中 仅已修改
  • 选择 激活 按钮

Business.Adobe.com 资源

Cms Cloud Targeted Content Personalized Communications Customer Experience Management Content Management Digital Asset Management