Integrare intestazione e piè di pagina globali di AEM nelle app React
L’integrazione di intestazione e piè di pagina globali di Adobe Experience Manager (AEM) in un’applicazione React può causare problemi di stile e funzionalità. La configurazione predefinita di AEM non supporta le applicazioni a pagina singola (SPA) React pronte all’uso, in particolare quando si utilizzano frammenti di esperienza (XF). Per risolvere questo problema, richiama i frammenti HTML giusti e configura le regole del dispatcher per evitare problemi di percorso.
Descrizione description
Ambiente
- Prodotto: Adobe Experience Manager (AEM) as a Cloud Service - Sites
- Istanza: Sviluppo
Problema/Sintomi
- L’utilizzo del componente URL incorpora supporta solo collegamenti video e non consente di incorporare gli URL delle pagine.
- La distribuzione del contenuto di intestazione e piè di pagina come JSON (ad esempio,
model.json) causa problemi di funzionalità. Le classi native per AEM non funzionano correttamente e le funzioni di ricerca e traduzione non funzionano. - L’architettura AEM esistente è headful (components/sight), che non supporta l’implementazione di SPA React per modelli e componenti.
Risoluzione resolution
Per integrare l’intestazione e il piè di pagina globali di AEM nell’applicazione React mantenendo al contempo gli stili e le funzionalità nativi, effettua le seguenti operazioni:
-
Recupera il HTML dei frammenti esperienza (XF) utilizzando i selettori
.head.nocloudconfig.htmle.body.nocloudconfig.html. Questi selettori rimuovono i dati di configurazione cloud, rendendo il HTML compatibile con le app esterne. -
Controlla
web server rewrite rules. Assicurati che non aggiungano percorsi non validi prima degli URL dei frammenti di esperienza. Ad esempio, assicurati che percorsi come/content/<my_project>/content/experience-fragments/...siano configurati correttamente per evitare errori di 404. -
In caso di problemi durante l’accesso ai frammenti di esperienza:
- Esamina i registri di AEM per individuare errori o modifiche relativi al percorso.
- Aggiorna le regole del dispatcher per interrompere l’aggiunta di prefissi non necessari ai percorsi dei frammenti esperienza.
Lettura correlata
- Utilizzo di frammenti di esperienza nelle esercitazioni di AEM Sites
- Distribuzioni di applicazioni a pagina singola AEM headless nell'esercitazione AEM Headless