将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应用程序中，同时保留本机样式和功能，请执行以下步骤：

使用.head.nocloudconfig.html和.body.nocloudconfig.html选择器提取体验片段(XF)的HTML。这些选择器可删除云配置数据，从而使HTML与外部应用程序兼容。
检查您的web server rewrite rules。请确保它们未在体验片段URL之前附加无效路径。例如，确保正确配置诸如/content/<my_project>/content/experience-fragments/...之类的路径以避免 404 错误。
如果您在访问体验片段时遇到问题：
- 查看AEM日志，了解与路径相关的错误或更改。
- 更新Dispatcher规则以停止向体验片段路径添加不必要的前缀。

将AEM全局页眉和页脚集成到React应用程序中

描述 description

环境

问题/症状

解决方法 resolution

相关阅读