创建组件 create-the-components

扩展组件的示例使用注释系统,该系统由两个组件组成。

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

必须同时设置这两个组件,尤其是自定义已发布评论的外观时。

NOTE
每个站点页面只允许一个注释系统。
许多Communities功能已经包括注释系统,其resourceType可以修改为引用扩展的注释系统。

创建注释组件 create-the-comments-component

这些说明指定了.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. 选择​ 全部保存

create-component

创建子注释组件 create-the-child-comment-component

这些方向将​ ​设置为.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. 选择​ 全部保存

create-child-component

create-component-crxde

复制和修改默认HBS脚本 copy-and-modify-the-default-hbs-scripts

使用CRXDE Lite

创建客户端库文件夹 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节点后,创建三个文件:

    • 名称css.txt
    • 名称js.txt
    • 名称: customcommentsystem.js
  • 输入“customcommentsystem.js”作为js.txt的内容

  • 选择​ 全部保存

comments-clientlibs

注册SCF模型和视图 register-the-scf-model-view

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

要在发布环境中体验扩展组件,必须复制自定义组件。

这样做的一种方式是:

  • 从全局导航,

    • 选择​ 工具 > 部署 > 复制
    • 选择​ 激活树
    • Start Path设置为/apps/custom
    • 取消选中​ Only Modified
    • 选择​ 激活 ​按钮
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791