内容片段预览
AEM Headless应用程序支持集成的创作预览。 预览体验将AEM作者的内容片段编辑器与您的自定义应用程序链接(可通过HTTP寻址),允许深层链接进入应用程序,以呈现正在预览的内容片段。
要使用内容片段预览,必须满足多个条件:
- 必须将应用程序部署到作者可访问的URL中
- 必须将应用程序配置为连接到AEM创作服务(而不是AEM Publish服务)
- 应用程序必须设计为可使用的URL或路由 内容片段路径或ID 以选择要显示的内容片段,以便在应用程序体验中预览。
预览URL
预览URL,使用 URL表达式,在内容片段模型的属性上设置。
- 以管理员身份登录AEM Author服务
- 导航到 工具>常规>内容片段模型
- 选择 内容片段模型 并选择 属性 形成顶部操作栏。
- 使用以下方式输入内容片段模型的预览URL URL表达式
- 预览URL必须指向连接到AEM Author服务的应用程序的部署。
URL表达式
每个内容片段模型都可以设置预览URL。 可以使用下表中列出的URL表达式,为每个内容片段参数化预览URL。 可以在单个预览URL中使用多个URL表达式。
${contentFragment.path}
/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
${contentFragment.id}
12c34567-8901-2aa3-45b6-d7890aa1c23c
${contentFragment.variation}
main
${contentFragment.model.path}
/conf/wknd-shared/settings/dam/cfm/models/adventure
${contentFragment.model.name}
adventure
示例预览URL:
- 上的预览URL 冒险 模型可能显示为
https://preview.app.wknd.site/adventure${contentFragment.path}
解析为https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
- 上的预览URL 文章 模型可能显示为
https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation}
解析https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main
应用程序内预览
任何使用配置的内容片段模型的内容片段都具有预览按钮。 预览按钮可打开内容片段模型的预览URL,并将打开的内容片段的值注入到 URL表达式.
在预览应用程序中的内容片段更改时,执行硬刷新(清除浏览器的本地缓存)。
React示例
让我们来探索WKND应用程序,它是一个简单的React应用程序,使用AEM Headless GraphQL API显示AEM的冒险。
示例代码位于 Github.com.
URL和路由
用于预览内容片段的URL或路由必须使用进行组合 URL表达式. 在这个启用预览的WKND应用程序版本中,冒险内容片段通过 AdventureDetail
绑定到路由的组件 /adventure<CONTENT FRAGMENT PATH>
. 因此,WKND Adventure模型的预览URL必须设置为 https://preview.app.wknd.site:3000/adventure${contentFragment.path}
以解决此路由。
仅当应用程序具有可寻址路由(可填充)时,内容片段预览才有效 URL表达式 以可预览方式在应用程序中呈现内容片段。
src/App.js
...
function App() {
return (
<Router>
<div className="App">
<header>
<Link to={"/"}>
<img src={logo} className="logo" alt="WKND Logo"/>
</Link>
<hr />
</header>
<Routes>
{/* The route's path must match the Adventure Model's Preview URL expression. In React since the path has `/` you must use wildcards to match instead of the usual `:path` */}
<Route path='/adventure/*' element={<AdventureDetail />}/>
<Route path="/" element={<Home />}/>
</Routes>
</div>
</Router>
);
}
export default App;
显示创作的内容
此 AdventureDetail
组件只需解析内容片段路径,通过插入预览URL中 ${contentFragment.path}
URL表达式,并使用它来收集和渲染WKND Adventure。
src/components/AdventureDetail.js
...
function AdventureDetail() {
// Read the `path` value which is the parameter used to query for the adventure's details
// since the params value captures the `*` wildcard in `/adventure/*`, or everything after the first `/` in the Content Fragment path.
const params = useParams();
const pathParam = params["*"];
// Add the leading '/' back on
const path = '/' + pathParam;
// Query AEM for the Adventures's details, using the Content Fragment's `path`
const { adventure, references, error } = useAdventureByPath(path);
// Handle error and loading conditions
if (error) {
return <Error errorMessage={error} />;
} else if (!adventure) {
return <Loading />;
}
return (<div className="adventure-detail">
...
<AdventureDetailRender {...adventure} references={references} />
</div>);
}
...