动态路由和可编辑的组件

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

Adventure Detail SPA路由定义为 /adventure/:slug where slug 是冒险内容片段中的唯一标识符属性。

将SPA URL映射到AEM页面

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

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

在本教程中，我们将WKND冒险内容片段（路径的最后一段）的名称映射到下的简单路径 /content/wknd-app/us/en/adventure.

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

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

远程SPA映射

离开远程SPA的请求映射通过 setupProxy 配置完成 BootstrapSPA.

SPA编辑器映射

通过AEM SPA编辑器打开SPA时，SPA请求的映射是通过 配置AEM.

在AEM中创建内容页面

首先，创建中间人 adventure 页面区段：

1. 登录到AEM作者
2. 导航到 站点> 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以创建 贝尔瓦娜在波特兰 页面，其中：
   • 标题:贝尔瓦娜在波特兰
   • 名称: beervana-in-portland
     • 此值定义AEM页面的URL，因此必须匹配SPA路径的最后一个区段

这两个AEM页面包含其各自创作的内容，以供其匹配的SPA路由使用。 如果其他SPA路由需要创作，则必须在其SPA URL的远程SPA页面根页面(/content/wknd-app/us/en/home)。

更新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 文件应该如下所示：

在AEM中创作容器

使用 <ResponsiveGrid...> 就位，以及 pagePath 我们会根据所呈现的历程进行动态设置，并尝试在其中创作内容。

1. 登录到AEM作者

2. 导航到 站点> WKND应用程序>美国> en

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

   • 导航到 巴厘岛冲浪营 在SPA中路由以对其进行编辑

4. 选择 预览 从右上方的模式选择器中

5. 点按 巴厘岛冲浪营 卡以导航到SPA的路线

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

7. 找到 布局容器 可编辑区域，就在 行程

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

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

   • 图像
   • 文本
   • 标题

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

   

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

11. 刷新在本地运行的WKND应用程序 http://localhost:3000，导航到 巴厘岛冲浪营 路由以查看创作的更改！

    

当导航到没有映射AEM页面的探险详细信息路由时，该路由实例上没有创作功能。 要在这些页面上启用创作功能，只需在 冒险 页面！

恭喜！

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

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

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

Business.Adobe.com 资源