Show Menu
主题×

创建组件

扩展组件的示例使用注释系统,该系统实际上由两个组件组成
  • 注释——包含的注释系统,它是放置在页面上的组件。
  • 评论——用于捕获已发布评论的实例的组件。
这两个组件都需要到位,尤其是自定义已发布注释的外观时。
每个站点页面只允许使用一个评论系统。
许多Communities功能已经包括一个注释系统,其resourceType可以修改为引用扩展注释系统。

创建注释组件

这些方向指定 组值 ,而不是 .hidden 使组件可以从组件浏览器(Sidekick)中使用。
删除自动创建的JSP文件是因为将改用默认的HBS文件。
  1. 浏览 到CRXDE|Lite ( http://localhost:4502/crx/de/index.jsp )
  2. 为自定义应用程序创建一个位置:
    • 选择节 /apps
      • 创建名为 custom的文 件夹
    • 选择节 /apps/custom
      • 创建名为组 件的文 件夹
  3. 选择节 /apps/custom/components
    • 创建>组件……
      • 标签 : 注释
      • 标题 : 替换注释
      • 描述 : 备用注释样式
      • 超级类型 : social/commons/components/hbs/comments
      • : 自定义
    • Select Next
    • Select Next
    • Select Next
    • 选择确
  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/comments/comments
      • : *.hidden*
    • Select Next
    • Select Next
    • Select Next
    • 选择确
  3. 展开刚刚创建的节点: /apps/custom/components/comments/comment
  4. 选择 全部保存
  5. 右键单击 comment.jsp
  6. 选择删
  7. 选择 全部保存

复制和修改默认HBS脚本

使用 CRXDE Lite :

创建客户端库文件夹

为避免必须显式包含此客户端库,可以使用默认注释系统的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
  • 输入“customcommentsystem.js”作为 js.txt
  • 选择 全部保存

注册SCF模型和视图

在扩展(覆盖)SCF组件时,resourceType是不同的(覆盖利用以前搜索的相对搜索机制 /apps , /libs 以使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);

  • 选择 全部保存

发布应用程序

为了在发布环境中体验扩展组件,必须复制自定义组件。
一种方法是
  • 从全局导航
    • Select Tools > Deployment > Replication
    • 选择 激活树
    • 设置 Start Path /apps/custom
    • 取消选 中仅已修改
    • 选择“ 激活 ”按钮