內容片段預覽

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

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

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

預覽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
  • 上的預覽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>);
}
...
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4