创建组件 create-the-components

CAUTION
AEM 6.4已结束扩展支持,本文档将不再更新。 有关更多详细信息,请参阅 技术支助期. 查找支持的版本 此处.

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

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

两个组件都需要放置到位,尤其是在自定义已发布评论的外观时。

NOTE
每个网站页面只允许一个评论系统。
许多社区功能已经包括一个注释系统,其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. 选择 全部保存

chlimage_1-70

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

这些方向已设置 to .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脚本 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选定s节点后,创建3个文件:

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

  • 选择 全部保存

chlimage_1-73

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

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

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

一种方法是

  • 从全局导航

    • 选择 工具>部署>复制
    • 选择 Activate Tree
    • 已设置 Start Path:to /apps/custom
    • 取消选中 Only Modified
    • 选择 Activate按钮
recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6