创建组件

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

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

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

注意

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

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

创建注释组件

这些方向指定了除.hidden之外的​Group​值,因此可以从组件浏览器(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

创建子注释组件

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

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

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

  2. 右键单击节点

    • 选择​创建 > 组件……

      • 标签: 评论
      • 标题: 替换注释
      • 描述: 备用注释样式
      • 超级类型: social/commons/components/hbs/comments/comments/comments
      • : *.hidden*
    • 选择​下一步

    • 选择​下一步

    • 选择​下一步

    • 选择​确定

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

  4. 选择​保存全部

  5. 右键单击comment.jsp

  6. 选择​删除

  7. 选择​保存全部

create-child-component

create-component-crxde

复制和修改默认HBS脚本

使用CRXDE Lite:

创建客户端库文件夹

为避免必须显式包含此客户端库,可以使用默认注释系统的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的内容

  • 选择​保存全部

comments-clientlibs

注册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);
  • 选择​保存全部

发布应用程序

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

一种方法是:

  • 从全局导航,

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

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free