文件

將AEM全域頁首和頁尾整合至React應用程式

Last update: Thu Aug 07 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

將Adobe Experience Manager (AEM)全域頁首和頁尾整合至React應用程式可能會導致樣式和功能問題。 預設的AEM設定不支援立即可用的React單頁應用程式(SPA)，尤其是使用體驗片段(XF)時。 若要解決此問題，請提取正確的HTML片段並設定Dispatcher規則以避免路徑問題。

說明 description

環境

  • 產品： Adobe Experience Manager (AEM) as a Cloud Service — 網站
  • 執行個體： 開發

問題/症狀

  • 使用URL內嵌元件僅支援視訊連結，不允許內嵌頁面URL。
  • 以JSON提供頁首和頁尾內容（例如model.json）會造成功能問題。 AEM原生類別無法正常運作，且搜尋和翻譯等功能無法運作。
  • 現有的AEM架構是headful （元件/sightly），不支援針對範本和元件實作SPA React。

解決方法 resolution

若要將AEM全域頁首和頁尾整合至您的React應用程式，同時保留原生樣式和功能，請遵循下列步驟：

  1. 使用.head.nocloudconfig.html和.body.nocloudconfig.html選擇器提取體驗片段(XF)的HTML。 這些選取器會移除雲端設定資料，使HTML與外部應用程式相容。

  2. 檢查您的web server rewrite rules。 請確定他們在體驗片段URL之前沒有附加無效路徑。 例如，請確定類似/content/<my_project>/content/experience-fragments/...的路徑已正確設定，以避免​ 404 ​錯誤。

  3. 如果您在存取體驗片段時遇到問題：

    • 請檢閱AEM記錄檔，瞭解路徑相關的錯誤或變更。
    • 更新Dispatcher規則以停止在體驗片段路徑中新增不必要的首碼。

相關閱讀

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f