概述

欢迎参加多部分教程,面向希望使用AEM SPA编辑器将现有的基于React的(或Next.js)远程SPA内容与可编辑的AEM内容进行扩充的开发人员。

本教程以WKND GraphQL应用程序为基础,该应用程序是一个React应用程序,用于通过AEM GraphQL API使用AEM内容片段内容,但不提供SPA内容的任何上下文内部创作。

关于教程

本教程旨在说明如何更新远程SPA或在AEM上下文外运行的SPA,以使用和交付在AEM中创作的内容。

本教程中的大多数活动重点介绍JavaScript开发,但涉及的关键方面涉及AEM。 这些方面包括定义在AEM中创作和存储内容的位置,以及将SPA路由映射到AEM页面。

本教程旨在将​AEM作为Cloud Service​使用,并且包含两个项目:

  1. AEM Project​包含必须部署到AEM的配置和内容。
  2. WKND Appproject是要与AEM SPA编辑器集成的SPA

最新代码

  • 可以在feature/spa-editor分支的GitHub上找到本教程的代码。

前提条件

本教程需要满足以下条件:

本教程假定:

  • Microsoft® Visual Studio代 码作为IDE
  • ~/Code/wknd-app的工作目录
  • http://localhost:4502上作为创作服务运行AEM SDK
  • 使用本地admin帐户运行密码为admin的AEM SDK
  • http://localhost:3000上运行SPA
注意

需要有关设置本地开发环境的帮助? 请参阅以 下指南,以使用AEM as a Cloud ServiceSDK设置本地开发环境

快速设置

快速设置可在15分钟内使用WKND应用程序SPA和AEM SPA编辑器启动并运行。 此加速设置将直接转到教程的结束状态,从而允许您探索在AEM SPA编辑器中创作SPA。

1.为AEM编辑器配置SPA

需要AEM配置才能将SPA与AEM SPA编辑器集成。 这些配置通过AEM项目进行管理和部署。 在本章中,了解需要哪些配置以及如何定义这些配置。

2.BootstrapSPA

AEM SPA Editor要将SPA集成到其创作上下文中,必须在SPA中添加一些内容。

3.可编辑的固定组件

首先,探索向SPA中添加可编辑的“固定组件”。 这说明了开发人员如何在SPA中放置特定的可编辑组件。 虽然作者可以更改组件的内容,但无法删除组件或更改其位置、位置或大小。

4.可编辑的容器组件

接下来,探索向SPA中添加一个可编辑的“容器组件”。 这说明了开发人员如何将容器组件放入SPA。 容器组件允许作者将允许的组件放置在其中,并调整组件的布局。

5.动态路由和可编辑的组件

最后,将前几章中阐述的概念用于动态路由;根据路由参数显示不同内容的路由。 这说明了如何使用AEM SPA Editor在以编程方式驱动和派生的路由上创作内容。

其他资源

在此页面上