Show Menu
主题×

使用核心组件

要在您自己的项目中开始使用核心组件,有四个步骤,具体请参阅以下各节:
或者,有关如何从头开始使用项目设置、核心组件、可编辑模板、客户端库和组件开发的更多说明,以下多部分教程可能会受到关注: AEM Sites入门- WKND教程

下载和安装

核心组件背后的驱动思想之一是灵活性。 通过更频繁地发布新版核心组件,Adobe在提供新功能方面更加灵活。 开发人员也可以灵活选择将组件集成到其项目中以及希望更新它们的频率。
因此,在生产模式下启动时,核心组件不是快速启动的一部分(没有示例内容)。 因此,您的第一步是从GitHub 下载最新发布的内容包 ,并将其安装在AEM环境中。
可以通过多种方式实现自动化,但在实例上快速安装内容包的最简单方法是使用包管理器;请参 阅安装包 。 此外,一旦您的发布实例也在运行,您需要将该包复制到发布者;请参阅 复制包

创建代理组件

由于“代理组件模 式”部分中所述的原因 ,核心组件不得直接从内容中引用。 为避免出现这种情况,它们都属于隐藏的组件组( .core-wcm .core-wcm-form ),这将阻止它们直接显示在编辑器中。
而是必须创建站点特定的组件,这些组件定义要向页面作者显示的所需组件名称和组,并将每个组件引用到核心组件作为其超类型。 这些站点特定的组件有时称为“代理组件”,因为它们不需要包含任何内容并且主要用于定义要用于站点的组件的版本。 但是,在自定义核 心组件时 ,这些代理组件在标记和逻辑自定义方面起着重要作用。
因此,对于每个希望用于站点的核心组件,您必须:
  1. 在站点的组件文件夹中创建一个相应的代理组件。
    示例 ​在 /apps/my-site/components 创建类型的标题节点下 cq:Component
  2. 使用超类型指向相应的核心组件版本。
    示例 ​添加以下属性: sling:resourceSuperType="core/wcm/components/title/v1/title"
  3. 定义组件的组、标题和(可选)说明。 这些值是特定于项目的,它们指示组件如何向作者公开。
    示例 ​添加以下属性:
    componentGroup="My Site"
    jcr:title="Title"  
    jcr:description="Section Heading"
    
    
例如,查看We. Retail参考站点的标题组件 ,它是这样构建的代理组件的一个很好的示例。

加载核心样式

  1. 如果尚未完成,请创建一 个客户端库 ,其中包含站点所需的所有CSS和JS文件。
  2. 在站点的客户端库上,将依赖项添加到可能需要的核心组件。 这是通过添加属性来完 embed 成的。
    例如,要包含所有v1核心组件的客户端库,要添加的属性应为:
    embed="[  
    core.wcm.components.image.v1,  
    core.wcm.components.list.v1,  
    core.wcm.components.breadcrumb.v1,  
    core.wcm.components.form.container.v1,  
    core.wcm.components.form.text.v1  
    ]"
    
    
在转到下一节之前,请确保您的代理组件和客户端库已部署到AEM环境。

允许组件

在模板编辑器中执行以 下步骤
  1. 在模板编辑器中,选择布局容器,然后打开其策略。
  2. 在允许的组件列表中,选择以前创建的代理组件,代理组件应显示在分配给它们的组件组下。 完成后,应用更改。
  3. (可选)对于具有设计对话框的组件,可以预配置这些组件。
够了! 在从已编辑的模板创建的页面中,您现在应能使用新创建的组件。
阅读下一篇文章: