动态路由和可编辑的组件

在本章中,我们启用了两条动态冒险详细信息路径,以支持可编辑的组件;波特兰的巴厘岛冲浪营​和​贝尔瓦纳

动态路由和可编辑的组件

冒险详细信息SPA路由定义为/adventure:path,其中path是WKND冒险(内容片段)的路径,用于显示有关的详细信息。

将SPA URL映射到AEM页面

在前两章中,我们将可编辑的组件内容从SPA主页视图映射到AEM中/content/wknd-app/us/en/的相应Remote SPA根页面。

为SPA动态路由的可编辑组件定义映射相似,但我们必须在路由实例和AEM页面之间提出1:1映射方案。

在本教程中,我们将采用WKND冒险内容片段的名称(路径的最后一段),并将其映射到/content/wknd-app/us/en/adventure下的简单路径。

远程SPA路由 AEM页面路径
/ /content/wknd-app/us/en/home
/adventure:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp /content/wknd-app/us/en/home/adventure/bali-surf-camp
/adventure:/content/dam/wknd/en/adventures/beervana-portland/beervana-portland /content/wknd-app/us/en/home/adventure/beervana-in-portland

因此,根据此映射,我们必须在以下位置创建两个新的AEM页面:

  • /content/wknd-app/us/en/home/adventure/bali-surf-camp
  • /content/wknd-app/us/en/home/adventure/beervana-in-portland

远程SPA映射

离开远程SPA的请求的映射是通过在中BootstrapSPA中完成的setupProxy配置进行的。

SPA编辑器映射

通过AEM SPA编辑器打开SPA时,SPA请求的映射是通过在Configure AEM中完成的Sling映射配置来配置的。

在AEM中创建内容页面

首先,创建中间adventure页面区段:

  1. 登录到AEM作者
  2. 导航到​站点> WKND应用程序>使用> en > WKND应用程序主页
    • 此AEM页面被映射为SPA的根,因此我们开始在此构建其他SPA路由的AEM页面结构。
  3. 点按​创建​并选择​页面
  4. 选择​远程SPA页面​模板,然后点按​下一步
  5. 填写页面属性
    • 标题:冒险
    • 名称: adventure
      • 此值定义AEM页面的URL,因此必须匹配SPA的路由区段。
  6. 点按​Done

然后,创建与每个需要可编辑区域的SPA URL对应的AEM页面。

  1. 导航到站点管理员中新的​Adventure​页面
  2. 点按​创建​并选择​页面
  3. 选择​远程SPA页面​模板,然后点按​下一步
  4. 填写页面属性
    • 标题:巴厘岛冲浪营
    • 名称: bali-surf-camp
      • 此值定义AEM页面的URL,因此必须匹配SPA路径的最后一个区段
  5. 点按​Done
  6. 重复步骤3-6以在Portland 中创建 Beervana页面,其中:
    • 标题:贝尔瓦娜在波特兰
    • 名称: beervana-in-portland
      • 此值定义AEM页面的URL,因此必须匹配SPA路径的最后一个区段

这两个AEM页面分别保存其匹配SPA路由的创作内容。 如果其他SPA路由需要创作,则必须在其SPA URL的AEM远程SPA页面的根页面(/content/wknd-app/us/en/home)下创建新的AEM页面。

更新WKND应用程序

让我们将在最后一章中创建的<AEMResponsiveGrid...>组件放入我们的AdventureDetail SPA组件中,创建一个可编辑的容器。

放置AEMResponsiveGrid SPA组件

<AEMResponsiveGrid...>放置在AdventureDetail组件中,将在该路由中创建一个可编辑的容器。 诀窍在于,由于多条路由使用AdventureDetail组件进行渲染,因此我们必须动态调整<AEMResponsiveGrid...>'s pagePath属性。 必须根据路由实例显示的历程,派生pagePath以指向相应的AEM页面。

  1. 打开并编辑react-app/src/components/AdventureDetail.js

  2. AdventureDetail(..)'s第二个return(..)语句之前添加以下行,该语句从内容片段路径派生冒险名称。

    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();
    ...
    
  3. 导入AEMResponsiveGrid组件,并将其放在<h2>Itinerary</h2>组件上方。

  4. <AEMResponsiveGrid...>组件中设置以下属性

    • pagePath = '/content/wknd-app/us/en/home/adventure/${adventureName}'
    • itemPath = 'root/responsivegrid'

    它会指示AEMResponsiveGrid组件从AEM资源中检索其内容:

    • /content/wknd-app/us/en/home/adventure/${adventureName}/jcr:content/root/responsivegrid

使用以下行更新AdventureDetail.js:

...
import AEMResponsiveGrid from '../components/aem/AEMResponsiveGrid';
...

function AdventureDetail(props) {
    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();

    return(
        ...
        <AEMResponsiveGrid
            pagePath={`/content/wknd-app/us/en/home/adventure/${adventureName}`}
            itemPath="root/responsivegrid"/>

        <h2>Itinerary</h2>
        ...
    )
}

AdventureDetail.js文件应该如下所示:

AdventureDetail.js

在AEM中创作容器

<AEMResponsiveGrid...>到位且其pagePath根据所呈现的历程动态设置后,我们会尝试在其中创作内容。

  1. 登录到AEM作者

  2. 导航至​站点> WKND应用程序>使用> en

  3. ____ 编辑WKND 应用程序主

    • 导航到SPA中的​Bali Surf Camp​路由以对其进行编辑
  4. 从右上方的模式选择器中选择​预览

  5. 点按SPA中的​Bali Surf Camp​卡以导航到其路径

  6. 从模式选择器中选择​编辑

  7. 在​行程​的正上方找到​布局容器​可编辑区域

  8. 打开​页面编辑器的侧栏,然后选择​组件视图

  9. 将一些已启用的组件拖到​布局容器​中

    • 图像
    • 文本
    • 标题

    并制作一些促销营销材料。 它可能如下所示:

    《巴厘岛冒险细节创作》

  10. ____ 在AEM页面编辑器中预览所做的更改

  11. 刷新在http://localhost:3000上本地运行的WKND应用程序,导航到​Bali Surf Camp​路由以查看创作的更改!

    远程SPA Bali

当导航到没有映射AEM页面的探险详细信息路由时,该路由实例将不具备创作功能。 要在这些页面上启用创作功能,只需在​Adventure​页面下创建一个具有匹配名称的AEM页面!

恭喜!

恭喜! 您在SPA中为动态路由添加了创作功能!

  • 将AEM React可编辑组件的ResponsiveGrid组件添加到动态路由
  • 创建AEM页面,以支持在SPA中创作两条特定路线(Bali Surf Camp和Beervana,波特兰)
  • 在动态的巴厘岛冲浪营路线上创作了内容!

您现在已完成探索如何使用AEM SPA Editor向远程SPA添加特定可编辑区域的首要步骤!

注意

继续看! 本教程将扩展,涵盖Adobe有关如何将SPA Editor解决方案部署到AEM as a Cloud Service和生产环境的最佳实践和建议。

在此页面上