在本章中,我们启用了两条动态冒险详细信息路径,以支持可编辑的组件; 巴厘岛冲浪营 和 贝尔瓦娜在波特兰.
Adventure Detail SPA路由定义为 /adventure/:slug
where slug
是冒险内容片段中的唯一标识符属性。
在前两章中,我们将可编辑的组件内容从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的请求映射通过 setupProxy
配置完成 BootstrapSPA.
通过AEM SPA编辑器打开SPA时,SPA请求的映射是通过 配置AEM.
首先,创建中间人 adventure
页面区段:
adventure
然后,创建与每个需要可编辑区域的SPA URL对应的AEM页面。
bali-surf-camp
beervana-in-portland
这两个AEM页面包含其各自创作的内容,以供其匹配的SPA路由使用。 如果其他SPA路由需要创作,则必须在其SPA URL的远程SPA页面根页面(/content/wknd-app/us/en/home
)。
我们把 <ResponsiveGrid...>
在中创建的组件 最后一章,到 AdventureDetail
SPA组件,创建可编辑的容器。
将 <ResponsiveGrid...>
在 AdventureDetail
组件会在该路径中创建一个可编辑的容器。 诀窍在于多条路线使用 AdventureDetail
要渲染的组件,我们必须动态调整 <ResponsiveGrid...>'s pagePath
属性。 的 pagePath
必须根据路由实例显示的历程派生,指向相应的AEM页面。
打开和编辑 react-app-/src/components/AdventureDetail.js
导入 ResponsiveGrid
组件并将其放在 <h2>Itinerary</h2>
组件。
在 <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
文件应该如下所示:
使用 <ResponsiveGrid...>
就位,以及 pagePath
我们会根据所呈现的历程进行动态设置,并尝试在其中创作内容。
登录到AEM作者
导航到 站点> WKND应用程序>美国> en
编辑 the WKND应用程序主页 页面
选择 预览 从右上方的模式选择器中
点按 巴厘岛冲浪营 卡以导航到SPA的路线
选择 编辑 从模式选择器
找到 布局容器 可编辑区域,就在 行程
打开 页面编辑器的侧栏,然后选择 组件视图
将一些已启用的组件拖到 布局容器
并制作一些促销营销材料。 它可能如下所示:
预览 您对AEM页面编辑器所做的更改
刷新在本地运行的WKND应用程序 http://localhost:3000,导航到 巴厘岛冲浪营 路由以查看创作的更改!
当导航到没有映射AEM页面的探险详细信息路由时,该路由实例上没有创作功能。 要在这些页面上启用创作功能,只需在 冒险 页面!
恭喜!您在SPA中为动态路由添加了创作功能!
您现在已完成探索如何使用AEM SPA Editor向远程SPA添加特定可编辑区域的首要步骤!