创建组件 create-the-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
社区

创建对象：

开发人员

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

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

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

NOTE

每个站点页面只允许一个注释系统。

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

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

这些说明指定了.hidden以外的组值，以便组件可以从组件浏览器(sidekick)中获取。

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

浏览至 CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
为自定义应用程序创建位置：
- 选择/apps节点
  - 创建名为 自定义 的文件夹
- 选择/apps/custom节点
  - 创建名为 组件 的文件夹
选择/apps/custom/components节点
- 创建>组件……
  - 标签：评论
  - 标题： 替代评论
  - 描述： 替代评论样式
  - 超级类型： social/commons/components/hbs/comments
  - 组： 自定义
- 选择 下一步
- 选择 下一步
- 选择 下一步
- 选择确定
展开已创建的节点： /apps/custom/components/comments
选择 全部保存
右键单击comments.jsp
选择删除
选择 全部保存

create-component

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

这些方向将组设置为.hidden，因为页面中只能包含父组件。

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

导航到/apps/custom/components/comments节点
右键单击节点
- 选择创建 > 组件……
  - 标签：评论
  - 标题： 替代评论
  - 描述： 替代评论样式
  - 超级类型：social/commons/components/hbs/comments/comment
  - 组： *.hidden*
- 选择 下一步
- 选择 下一步
- 选择 下一步
- 选择确定
展开已创建的节点： /apps/custom/components/comments/comment
选择 全部保存
右键单击comment.jsp
选择删除
选择 全部保存

create-child-component

create-component-crxde

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

使用CRXDE Lite：

复制comments.hbs
- 来自/libs/social/commons/components/hbs/comments
- 至/apps/custom/components/comments
编辑comments.hbs至：
- 更改data-scf-component属性的值（第20行）：
  - 从social/commons/components/hbs/comments
  - 至/apps/custom/components/comments
- 修改以包含自定义注释组件（第75行）：
  - 替换{{include this resourceType='social/commons/components/hbs/comments/comment'}}
  - 与{{include this resourceType='/apps/custom/components/comments/comment'}}
复制comment.hbs
- 从/libs/social/commons/components/hbs/comments/comment
- 至/apps/custom/components/comments/comment
编辑comment.hbs至：
- 更改data-scf-component属性的值（~第19行）
  - 从social/commons/components/hbs/comments/comment
  - 至/apps/custom/components/comments/comment
选择/apps/custom节点
选择 全部保存

创建客户端库文件夹 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