社区组件指南

社区组件指南是社交组件框架(SCF)的交互式开发工具。 它提供可用的AEM Communities组件列表或由多个组件构建的更复杂的功能。

除了每个组件的基本信息,该指南还允许对SCF组件/功能的工作方式以及配置或自定义它们的方式进行试验。

有关每个组件相关的开发必备工具的信息,请参阅功能和组件必备工具

入门

本指南适用于作者(localhost:4502)和发布(localhost:4503)实例的开发安装。

通过浏览到

与社区组件的交互将因以下各项而异:

  • 服务器(作者或发布)
  • 站点访客是否已登录
  • 如果已登录,则分配给成员的权限
  • 是否使用默认SRP(JSRP)

在创作时,要进入编辑模式,请在服务器名后插入editor.htmlcf#作为第一个路径段:

注意

在“编辑”模式下进行创作时,页面上的链接不处于活动状态。

要导航到组件页面,请首先选择预览模式以激活链接。

在浏览器中显示组件页面时,返回编辑模式以打开组件的编辑对话框。

有关一般创作信息,请视图页面创作快速指南

如果不熟悉AEM,请视图有关基本操作的文档。

主页

本指南提供了一系列SCF组件,可用于预览和沿页面左侧进行原型设计。

组件指南,如在编辑模式下在作者实例上查看:

chlimage_1-404

组件页

从页面左侧的列表中选择组件。

chlimage_1-405

向导的主体显示:

  1. 标题:所选组件的名称

  2. 客户端库:列表一个或多个必需类别

  3. 包括:如果组件可以动态包含,则可以在作者编辑模式下切换状态:

    • 如果添加,则显示的文本为:“此组件通过其par节点提供。”
    • 如果包括,则显示的文本为:“此组件是动态包含的。”
    • 如果不包括,则不显示任何文本
  4. 示例组件或功能:组件或功能的活动实例。 如果某个组件,则可能会随着对选项卡部分中提供的模板、CSS和数据所做的更改而改变它。

注意

从左侧进行选择后,当浏览器窗口过窄时,组件将显示在组件列表的下方而不是旁边。

创作交互

在创作实例上使用指南时,可以通过打开组件对话框来体验配置组件的过程。 文档的组件和功能要素部分提供开发人员信息,而创作的社区组件部分介绍了对话框设置。

对于“社区组件”指南,某些组件对话框设置会以Includable切换状态覆盖。 要在使用现有资源或动态包含的资源之间进行切换,请在编辑模式下同时选择组件和可包含文本,并单击多次以打开编辑对话框:

chlimage_1-406

在​模板​选项卡下:

chlimage_1-407

  • 通过 sling:include 包含子组件

    如果未选中,组件指南将使用存储库(jcr节点,它是par节点的子节点)中的现有资源。

    • 显示的文本:“此组件通过其par节点提供。”

    如果选中此项,组件指南将使用sling动态包含子节点的resourceType(非现有资源)的组件。

    • 显示的文本:“此组件是动态包含的。”

    默认为未选中。

发布交互

在发布实例上使用指南时,可以将组件和功能作为站点访客(未登录)以及登录时具有各种权限的成员进行体验。

注意

请注意,如果SRP默认为JSRP,则在发布实例上输入的UGC仅在发布时可见,并且*不会从创作实例上的仲裁控制台中可见。

客户端库

每个组件列出的客户端库(clientlibs)是将组件放置到页面上时需要引用的​必需。 客户端库提供了管理和优化在浏览器中呈现组件时使用的Javascript和CSS下载的方法。

有关详细信息,请访问Clientlibs for Communities Components

模拟

在作者实例中,一个用户通常以管理员或开发人员身份登录,为了体验以其他用户身份登录的组件,请使用​模拟​按钮左侧的文本框键入用户名或从下拉列表中进行选择,然后单击按钮。 单击“还原”以注销并结束模拟。

发布实例无需模拟。 只需使用“登录/注销”链接模拟各种用户,如demo用户

自定义

启用后,每个SCF组件都可通过临时修改组件的模板、CSS和数据来为可能的自定义创建原型。

启用自定义

注意

此工具为只读。对模板、CSS或数据所做的任何编辑都不会保存到存储库中。

要快速试验自定义,必须将scg:showIde属性添加到组件页的内容JCR节点并设置为true。

以注释组件为例,在作者实例或发布实例上,使用管理员权限登录:

  1. 浏览至CRXDE Lite

    例如,http://localhost:4503/crx/de

  2. 选择组件的jcr:content节点

    例如,/content/community-components/en/comments/jcr:content

  3. 添加属性

    • 名称 scg:showIde
    • 类型 String
    • true
  4. 选择​保存全部

  5. 重新加载指南中的“注释”页

    http://localhost:4503/content/community-components/en/comments.html

  6. 请注意,现在有3个用于模板、CSS和数据的选项卡。

chlimage_1-408 chlimage_1-409

模板选项卡

选择模板选项卡以查看与组件关联的模板。

模板编辑器允许编译本地编辑并将其应用于页面顶部的示例组件实例,而不会影响存储库中的组件。

在本地编辑时运行编译将突出显示所有错误,方法是在装订线中放置一个点并将文本标记为红色。

CSS选项卡

选择CSS选项卡以查看与组件关联的CSS。

如果组件是多个组件的组合,则某些CSS可能列在其中一个组件下。

CSS编辑器允许修改CSS并将其应用于页面顶部的示例组件实例。

可以选择一条规则,通过单击装订线中规则旁边,使用该规则突出显示DOM的各个部分。

数据选项卡

选择“数据”选项卡以显示。social.json端点数据。 此数据是可编辑的,并应用于示例组件实例。

语法错误可在装订线中标记,也可在编辑器中突出显示。

在此页面上

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