创建组件

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

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

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

注意

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

许多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. 选择​保存全部

chlimage_1-70

创建子注释组件

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

chlimage_1-71 chlimage_1-72

复制和修改默认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的内容

  • 选择​保存全部

chlimage_1-73

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

发布应用程序

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

一种方法是

  • 从全局导航

    • 选择​工具>部署>复制
    • 选择 Activate Tree
    • 设置Start Path:至/apps/custom
    • 取消选中Only Modified
    • 选择Activate按钮

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now