DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurs om AEM Headless

Dynamiska vägar och redigerbara komponenter

Last update: Mon Jun 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Gäller:
  • Experience Manager 6.5
  • Experience Manager as a Cloud Service

Skapat för:

  • Nybörjare
  • Utvecklare
IMPORTANT
SPA-redigeraren har tagits bort för nya projekt. Det stöds fortfarande av Adobe för befintliga projekt, men bör inte användas för nya projekt. De redigerare som rekommenderas för hantering av headless-innehåll i AEM är nu:

I det här kapitlet aktiverar vi två dynamiska Adventure Detail-vägar som stöder redigerbara komponenter: Bali Surf Camp och Beervana i Portland.

Dynamiska vägar och redigerbara komponenter

SPA-vägen för Adventure Detail definieras som /adventure/:slug där slug är en unik identifieraregenskap i Adventure Content Fragment.

Mappa SPA-URL:er till AEM Pages

I de föregående två kapitlen mappades redigerbart komponentinnehåll från SPA:s hemvy till motsvarande fjärr-SPA-rotsida i AEM på /content/wknd-app/us/en/.

Att definiera mappning för redigerbara komponenter för SPA:s dynamiska vägar är likartat, men vi måste skapa ett 1:1-mappningsschema mellan instanser av flödet och AEM-sidor.

I den här självstudiekursen tar vi namnet på WKND Adventure Content Fragment, som är det sista segmentet i sökvägen, och mappar det till en enkel sökväg under /content/wknd-app/us/en/adventure.

Fjärr-SPA-väg
AEM-sidsökväg
/
/content/wknd-app/us/en/home
/adventure/bali-surf-camp
/content/wknd-app/us/en/home/adventure/bali-surf-camp
/adventure/beervana-portland
/content/wknd-app/us/en/home/adventure/beervana-in-portland

Därför måste vi utifrån denna karta skapa två nya AEM-sidor:

  • /content/wknd-app/us/en/home/adventure/bali-surf-camp
  • /content/wknd-app/us/en/home/adventure/beervana-in-portland

Fjärr-SPA-mappning

Mappningen för begäranden som lämnar fjärr-SPA konfigureras via konfigurationen setupProxy som görs i Bootstrap i SPA.

Mappning av SPA-redigerare

Mappningen för SPA-begäranden när SPA öppnas via AEM SPA Editor konfigureras via konfigurationen för Sling Mappings i Konfigurera AEM.

Skapa innehållssidor i AEM

Skapa först mellanliggande sidsegment adventure:

  1. Logga in på AEM Author

  2. Navigera till Webbplatser > WKND-app > oss > en > WKND-appens startsida

    1. Denna AEM-sida är mappad som rot till SPA, så här börjar vi bygga ut AEM sidstruktur för andra SPA-vägar.

  3. Tryck på Skapa och välj Sida

  4. Välj mallen Fjärrsida för SPA-sidor och tryck på Nästa

  5. Fyll i Sidegenskaper

    1. Titel: Äventyr
    2. Namn: adventure
      1. Det här värdet definierar AEM-sidans URL och måste därför matcha SPA-ruttsegmentet.

  6. Tryck på Klar

Skapa sedan de AEM-sidor som motsvarar de URL:er till SPA som kräver redigerbara områden.

  1. Navigera till den nya sidan Adventure i Webbplatsadministratören

  2. Tryck på Skapa och välj Sida

  3. Välj mallen Fjärrsida för SPA-sidor och tryck på Nästa

  4. Fyll i Sidegenskaper

    1. Titel: Bali Surf Camp
    2. Namn: bali-surf-camp
      1. Detta värde definierar AEM-sidans URL och måste därför matcha SPA-ruttens sista segment

  5. Tryck på Klar

  6. Upprepa steg 3-6 för att skapa sidan Beervana i Portland med:

    1. Titel: Beervana i Portland
    2. Namn: beervana-in-portland
      1. Detta värde definierar AEM-sidans URL och måste därför matcha SPA-ruttens sista segment

Dessa två AEM-sidor innehåller det innehåll som skapats för respektive matchande SPA-vägar. Om andra SPA-vägar kräver redigering måste nya AEM-sidor skapas på deras SPA-URL under fjärr-SPA-sidans rotsida (/content/wknd-app/us/en/home) i AEM.

Uppdatera WKND-appen

Låt oss placera komponenten <ResponsiveGrid...> som skapades i det sista kapitlet i vår AdventureDetail SPA-komponent och skapa en redigerbar behållare.

Placera SPA-komponenten för ResponsiveGrid

Om du placerar <ResponsiveGrid...> i komponenten AdventureDetail skapas en redigerbar behållare i den vägen. Tricket är att eftersom flera vägar använder komponenten AdventureDetail för att återge, måste vi justera attributet <ResponsiveGrid...>'s pagePath dynamiskt. pagePath måste härledas till att peka på motsvarande AEM-sida, baserat på äventyret som flödesinstansen visar.

  1. Öppna och redigera react-app-/src/components/AdventureDetail.js

  2. Importera komponenten ResponsiveGrid och placera den ovanför komponenten <h2>Itinerary</h2>.

  3. Ange följande attribut för komponenten <ResponsiveGrid...>. Observera att attributet pagePath lägger till den aktuella slug som mappar till äventyrssidan enligt mappningen som definieras ovan.

    1. pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'
    2. itemPath = 'root/responsivegrid'

    Detta instruerar komponenten ResponsiveGrid att hämta sitt innehåll från AEM-resursen:

    1. /content/wknd-app/us/en/home/adventure/${slug}/jcr:content/root/responsivegrid

Uppdatera AdventureDetail.js med följande rader:

...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function AdventureDetailRender(props) {
    ...
    // Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
    const { slug } = useParams();

    return(
        ...
        // Pass the slug in
        function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
                groupSize, difficulty, price, description, itinerary, references, slug }) {
            ...
            return (
                ...
                <ResponsiveGrid
                    pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
                    itemPath="root/responsivegrid"/>

                <h2>Itinerary</h2>
                ...
            )
        }
    )
}

Filen AdventureDetail.js ska se ut så här:

AdventureDetail.js

Skapa behållaren i AEM

När <ResponsiveGrid...> är på plats och dess pagePath dynamiskt anges baserat på det äventyr som återges, försöker vi att skapa innehåll i den.

  1. Logga in på AEM Author

  2. Navigera till Sites > WKND App > us > en

  3. Redigera WKND-appens startsida

    1. Navigera till Bali Surf Camp-vägen i SPA för att redigera den

  4. Välj Förhandsgranska i lägesväljaren i det övre högra hörnet

  5. Tryck på Bali Surf Camp -kortet i SPA för att navigera till dess väg

  6. Välj Redigera i lägesväljaren

  7. Leta reda på det redigerbara området Layoutbehållare precis ovanför Intervär

  8. Öppna sidredigerarens sidfält och välj vyn Komponenter

  9. Dra några av de aktiverade komponenterna till layoutbehållaren

    1. Bild
    2. Text
    3. Titel

    Och skapa marknadsföringsmaterial. Det skulle kunna se ut ungefär så här:

    Bali Adventure Detail Authoring

  10. Förhandsgranska dina ändringar i AEM Page Editor

  11. Uppdatera WKND-appen som körs lokalt på http://localhost:3000, navigera till Bali Surf Camp för att se de redigerade ändringarna!

    Fjärr-SPA-bali

När du navigerar till en äventyrsinformationsväg som inte har någon mappad AEM Page finns det ingen redigeringsmöjlighet för den väginstansen. Om du vill aktivera redigering på de här sidorna skapar du bara en AEM-sida med det matchande namnet på sidan Adventure!

Grattis!

Grattis! Du har lagt till redigeringsmöjligheter för dynamiska vägar i SPA!

  • Komponenten ResponsiveGrid för den ändringsbara komponenten för AEM React har lagts till på en dynamisk väg
  • Skapade AEM-sidor med stöd för utveckling av två specifika rutter i SPA (Bali Surf Camp och Beervana i Portland)
  • Skapat innehåll på den dynamiska Bali Surf Camp-vägen!

Du har nu gått igenom de första stegen i hur AEM SPA Editor kan användas för att lägga till specifika redigerbara områden i en fjärr-SPA!

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4