Clientlibs for Communities组件

简介

本文档的本节介绍如何将客户端库(clientlibs)添加到社区组件的页面。

有关基本信息，请访问：

• 使用客户端库 ，它提供使用详细信息和调试工具
• 用于SCF的客户端 ，它在自定义SCF组件时提供有用信息
• 博客：AEM Client Libraries（示例说明）

为何需要Clientlibs

需要Clientlibs才能使组件正常工作(JavaScript)和样式(CSS)。

当某个功 能存在社区功 能时，所有必需的组件和配置（包括必需的客户端库）都将出现在社区站点中。 仅当作者可以使用其他组件时，才需要添加其他客户端库。

当缺少所需的clientlib时， 向页面添加Communities组件 ，可能会导致javascript错误和意外外观。

示例：无客户端库的置入审阅

示例：使用Clientlibs进行置入的审阅

识别所需的客户端库

开发人员的基本功能信息可标识所需的客户端库。

此外，从AEM实例浏览到“社区组件指 南” ，还可以访问组件所需的clientlib类别列表。

例如，在“审阅”页面的最 顶部 ，列出的所需客户端库

• cq.ckeditor
• cq.social.hbs.reviews

添加必需的客户端库

当需要向页面添加社区组件时，如果组件尚不存在，则需要为该组件添加所需的客户端库。

使 用CRXDE|Lite ，可修改社区站点页面的现有clientlibslist。

要使用CRXDE Lite为社区站点添加clientlib，请执 行:

• 浏览 到https://<server>:<port>/crx/de。

• 找到 clientlibslist 要添加组件的页面的节点：

  • /content/sites/sample/en/page/jcr:content/clientlibslist

• 选择 clientlibslist 节点后：

  • 找到String属性[] 。 scg:requiredClientLibs

  • 选择其 Value 以访问字符串数组对话框。

    • 如有必要，向下滚动。

    • 选择+以进入新的客户端库。

      • 重复此操作可添加更多客户端库。

      • 选择 确定。

  • 选择 全部保存。

使用“ AEM Communities入门 ”示例(其 site-name 中为 参与)，在添加评论组件时，clientliblist的显示方式如下：