內容片段預覽
AEM Headless應用程式支援整合式撰寫預覽。 預覽體驗會連結AEM作者的內容片段編輯器與您的自訂應用程式(可透過HTTP定址),允許應用程式的深層連結,以產生正在預覽的內容片段。
若要使用內容片段預覽,必須符合數個條件:
- 應用程式必須部署至作者可存取的URL
- 應用程式必須設定為連線至AEM作者服務(而非AEM發佈服務)
- 應用程式在設計時必須搭配可使用的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>);
}
...