在本章中,我们启用两种动态冒险详细信息路由来支持可编辑组件; 巴厘岛冲浪营 和 贝尔瓦纳在波特兰.
Adventure Detail SPA路由定义为 /adventure/:slug
位置 slug
是冒险内容片段上的唯一标识符属性。
在前两章中,我们将可编辑的组件内容从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的请求,可通过以下方式配置映射: setupProxy
配置完成于 BootstrapSPA.
通过SPA SPA Editor打开SPA时AEM请求的映射可通过在中完成的Sling映射配置进行配置 配置AEM.
首先,创建中介 adventure
页面区段:
adventure
然后,创建与每个需要可编辑区域的SPA URL相对应的AEM页面。
bali-surf-camp
beervana-in-portland
这两个AEM页包含其匹配的SPA路由的各自编写的内容。 如果其他SPA路由需要创作,则必须在远程AEMSPA SPA页面的根页面(/content/wknd-app/us/en/home
AEM )。
我们来放置 <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 Author
导航到 Sites > WKND应用程序>我们> en
编辑 该 WKND应用程序主页 页面
选择 预览 从右上角的模式选择器中
点击 巴厘岛冲浪营 SPA中用于导航到其路由的卡
选择 编辑 从模式选择器中
找到 布局容器 上方的可编辑区域 日程表
打开 页面编辑器的侧栏,然后选择 “组件”视图
将某些启用的组件拖动到 布局容器
并创建一些促销营销材料。 它可能会看起来像这样:
预览 在AEM页面编辑器中进行的更改
刷新本地运行的WKND应用程序 http://localhost:3000,导航到 巴厘岛冲浪营 查看已编写更改的路由!
当导航到没有映射AEM页面的冒险详细信息路由时,该路由实例没有创作功能。 AEM要在这些页面上启用创作功能,只需在 冒险 页!
恭喜!您已添加在SPA中动态路由的创作功能!
您现在已经完成了探索如何使用AEM SPA Editor将特定可编辑区域添加到远程SPA的第一步!