Dokumentation

Integrieren der globalen Kopf- und Fußzeile von AEM in React-Apps

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

Die Integration der globalen Kopf- und Fußzeile von Adobe Experience Manager (AEM) in eine React-App kann zu Stil- und Funktionsproblemen führen. Das standardmäßige AEM-Setup unterstützt React Single Page Applications (SPAs) nicht standardmäßig, insbesondere bei Verwendung von Experience Fragments (XFs). Um dies zu beheben, rufen Sie die richtigen HTML-Fragmente ab und konfigurieren Sie Dispatcher-Regeln, um Pfadprobleme zu vermeiden.

Beschreibung description

Umgebung

  • Produkt: Adobe Experience Manager (AEM) as a Cloud Service - Sites
  • instance: Development

Problem/Symptome

  • Die Verwendung der URL-Einbettungskomponente unterstützt nur Video-Links und nicht das Einbetten von Seiten-URLs.
  • Die Bereitstellung des Inhalts der Kopf- und Fußzeile als JSON (z. B. model.json) verursacht Funktionsprobleme. AEM-native Klassen funktionieren nicht ordnungsgemäß und Funktionen wie Suchen und Übersetzen sind nicht funktionsfähig.
  • Die bestehende AEM-Architektur ist Headful (components/sightly), die keine SPA-React-Implementierung für Vorlagen und Komponenten unterstützt.

Auflösung resolution

Gehen Sie wie folgt vor, um die globale Kopf- und Fußzeile von AEM in Ihre React-App zu integrieren und gleichzeitig native Stile und Funktionen beizubehalten:

  1. Rufen Sie den HTML der Experience Fragments (XFs) mithilfe der .head.nocloudconfig.html- und .body.nocloudconfig.html ab. Diese Selektoren entfernen Cloud-Konfigurationsdaten, sodass der HTML mit externen Apps kompatibel ist.

  2. Überprüfen Sie Ihre web server rewrite rules. Stellen Sie sicher, dass keine ungültigen Pfade vor den Experience Fragment-URLs angehängt werden. Stellen Sie beispielsweise sicher, dass Pfade wie /content/<my_project>/content/experience-fragments/... korrekt konfiguriert sind, um 404 Fehler vermeiden.

  3. Wenn beim Zugriff auf Experience Fragments Probleme auftreten:

    • Überprüfen Sie die AEM-Protokolle auf pfadbezogene Fehler oder Änderungen.
    • Aktualisieren Sie die Dispatcher-Regeln, um das Hinzufügen unnötiger Präfixe zu Experience Fragment-Pfaden zu stoppen.

Verwandtes Lesen

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