內容片段預覽

AEM Headless應用程式支援整合式撰寫預覽。 預覽體驗會連結AEM作者的內容片段編輯器與您的自訂應用程式(可透過HTTP定址),允許應用程式的深層連結,以產生正在預覽的內容片段。

若要使用內容片段預覽,必須符合數個條件:

  1. 應用程式必須部署至作者可存取的URL
  2. 應用程式必須設定為連線至AEM作者服務(而非AEM Publish服務)
  3. 應用程式必須設計有可使用內容片段路徑或ID的URL或路由,以選取要顯示在應用程式體驗中預覽的內容片段。

預覽URL

在內容片段模型的屬性上設定使用URL運算式的預覽URL。

內容片段模型預覽URL

  1. 以管理員身分登入AEM Author服務
  2. 導覽至​ 工具>一般>內容片段模型
  3. 選取​ 內容片段模型,並從上方動作列選取​ 屬性
  4. 使用URL運算式輸入內容片段模型的預覽URL
    • 預覽URL必須指向連線至AEM Author服務的應用程式部署。

URL運算式

每個內容片段模式都可以設定預覽URL。 您可以使用下表列出的URL運算式,為每個內容片段引數化預覽URL。 可在單一預覽URL中使用多個URL運算式。

URL運算式
內容片段路徑
${contentFragment.path}
/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
內容片段ID
${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
  • Article ​模型上的預覽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應用程式版本中,冒險內容片段會透過繫結至路由/adventure<CONTENT FRAGMENT PATH>AdventureDetail元件顯示。 因此,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運算式插入預覽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>);
}
...
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4