动态路由和可编辑的组件

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

动态路由和可编辑的组件

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.

远程SPA路由 AEM页面路径
/ /content/wknd-app/us/en/home
/adventure/巴厘岛冲浪营 /content/wknd-app/us/en/home/adventure/巴厘岛冲浪营
/adventure/贝尔瓦纳 — 波特兰 /content/wknd-app/us/en/home/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 文件应该如下所示:

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,导航到 巴厘岛冲浪营 路由以查看创作的更改!

    远程SPA Bali

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

恭喜!

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

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

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

在此页面上