动态路由和可编辑组件

上次更新: 2023-12-04
  • 创建对象:
  • Beginner
    Developer

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

动态路由和可编辑组件

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

将SPA URL映射到AEM页面

在前两章中,我们将可编辑的组件内容从SPA主页视图映射到AEM中对应的远程SPA根页面,网址为 /content/wknd-app/us/en/.

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

在本教程中,我们将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编辑器映射

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

在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以创建 贝尔瓦纳在波特兰 页面,替换为:
    • 标题:贝尔瓦纳在波特兰
    • 名称beervana-in-portland
      • 此值定义AEM页面的URL,因此必须匹配SPA路由的最后一个区段

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

更新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. 导航到 Sites > WKND应用程序>我们> en

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

    • 导航至 巴厘岛冲浪营 在SPA中路由以编辑它
  4. 选择 预览 从右上角的模式选择器中

  5. 点击 巴厘岛冲浪营 SPA中用于导航到其路由的卡

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

  7. 找到 布局容器 上方的可编辑区域 日程表

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

  9. 将某些启用的组件拖动到 布局容器

    • 图像
    • 文本
    • 标题

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

    Bali Adventure Detail创作

  10. 预览 在AEM页面编辑器中进行的更改

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

    远程SPA巴厘岛

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

恭喜!

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

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

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

在此页面上