动态路由和可编辑组件

在本章中,我们启用两个动态冒险详细信息路线来支持可编辑的组件:Bali Surf Camp ​和​ Beervana in Portland

动态路由和可编辑的组件

冒险详细信息SPA路由定义为/adventure/:slug,其中slug是冒险内容片段上的唯一标识符属性。

将SPA URL映射到AEM页面

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

为SPA动态路由的可编辑组件定义映射类似,但我们必须制定路由实例与AEM页面之间的一对一映射方案。

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

远程SPA路由
AEM页面路径
/
/content/wknd-app/us/en/home
/adventure/bali-surf-camp
/content/wknd-app/us/en/home/adventure/bali-surf-camp
/adventure/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映射

通过BootstrapSPA中的setupProxy配置配置了离开远程SPA的请求的映射。

SPA编辑器映射

通过SPA SPA Editor打开SPA时AEM请求的映射通过配置AEM中完成的Sling映射配置进行配置。

在AEM中创建内容页面

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

  1. 登录AEM Author

  2. 导航到​ Sites > WKND应用程序>我们> en > WKND应用程序主页

    • 此AEM页面被映射为SPA的根,因此我们将在此处开始为其他SPA路由构建AEM页面结构。
  3. 点按​ 创建 ​并选择​ 页面

  4. 选择​ 远程SPA页面 ​模板,然后点按​ 下一步

  5. 填写页面属性

    • 标题:冒险
    • 名称adventure
      • 此值定义AEM页面的URL,因此必须匹配SPA的路由段。
  6. 点按​ 完成

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

  1. 在网站管理员中导航到新的​ 冒险 ​页面

  2. 点按​ 创建 ​并选择​ 页面

  3. 选择​ 远程SPA页面 ​模板,然后点按​ 下一步

  4. 填写页面属性

    • 标题:巴厘岛冲浪营
    • 名称bali-surf-camp
      • 此值定义AEM页面的URL,因此必须匹配SPA路由的最后一个区段
  5. 点按​ 完成

  6. 重复步骤3-6以在Portland 中创建 Beervana页面,其中:

    • 标题:波特兰的贝尔瓦纳
    • 名称beervana-in-portland
      • 此值定义AEM页面的URL,因此必须匹配SPA路由的最后一个区段

这两个AEM页包含其匹配的SPA路由的各自编写的内容。 如果其他SPA路由需要创作,则必须在AEM中远程AEM页面的根页面(/content/wknd-app/us/en/home)下的其SPA URL上创建新的SPA页面。

更新WKND应用程序

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

放置ResponsiveGrid SPA组件

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

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

  2. 导入ResponsiveGrid组件并将其放在<h2>Itinerary</h2>组件上方。

  3. <ResponsiveGrid...>组件上设置以下属性。 请注意,pagePath属性添加当前slug,该当前页面根据上面定义的映射映射到冒险页面。

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

    这会指示ResponsiveGrid组件从AEM资源检索其内容:

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

使用以下行更新AdventureDetail.js

...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function AdventureDetailRender(props) {
    ...
    // Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
    const { slug } = useParams();

    return(
        ...
        // Pass the slug in
        function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
                groupSize, difficulty, price, description, itinerary, references, slug }) {
            ...
            return (
                ...
                <ResponsiveGrid
                    pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
                    itemPath="root/responsivegrid"/>

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

AdventureDetail.js文件应如下所示:

AdventureDetail.js

在AEM中创作容器

在已准备好<ResponsiveGrid...>并且根据呈现的冒险动态设置其pagePath的情况下,我们尝试在其中创作内容。

  1. 登录AEM Author

  2. 导航到​ 站点> WKND应用程序>我们> en

  3. 编辑 WKND应用程序主页 ​页面

    • 导航到SPA中的​ 巴厘岛冲浪营 ​路线以进行编辑
  4. 从右上角的模式选择器中选择​ 预览

  5. 点按SPA中的​ 巴厘岛冲浪营 ​卡以导航到其路径

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

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

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

  9. 将某些启用的组件拖入​ 布局容器

    • 图像
    • 文本
    • 标题

    并创建一些促销营销材料。 它可能会看起来像这样:

    巴厘岛冒险活动详细信息创作

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

  11. 刷新http://localhost:3000上本地运行的WKND应用程序,导航到​ 巴厘岛冲浪营 ​路线以查看所编写的更改!

    远程SPA巴厘岛

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

恭喜!

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

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

您现在已经完成了探索如何使用AEM SPA Editor将特定可编辑区域添加到远程SPA的第一步!

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4