Lokaliserat innehåll med AEM Headless

AEM tillhandahåller ett Översättningsintegreringsramverk för headless-innehåll, vilket gör att innehållsfragment och stödresurser enkelt kan översättas för användning i olika språkområden. Det är samma ramverk som används för att översätta annat AEM-innehåll, till exempel Sidor, Upplevelsefragment, Assets och Forms. När headless-innehåll har översatts och publicerats är det klart för användning av headless-program.

Assets mappstruktur assets-folder-structure

Kontrollera att de lokaliserade innehållsfragmenten i AEM följer den rekommenderade lokaliseringsstrukturen.

Språkmapparna måste vara på samma nivå och mappnamnet, i stället för titeln, måste vara en giltig ISO 639-1-kod som representerar språkinställningen för innehållet i mappen.

Språkinställningskoden är också det värde som används för att filtrera de innehållsfragment som returneras av GraphQL-frågan.

GraphQL beständig fråga

AEM har ett _locale GraphQL-filter som automatiskt filtrerar innehåll efter språkkod. Till exempel kan frågor om alla engelska äventyr i WKND-platsprojektet utföras med en ny beständig fråga wknd-shared/adventures-by-locale som definieras som:

query($locale: String!) {
  adventureList(_locale: $locale) {
    items {
      _path
      title
    }
  }
}

Variabeln $locale som används i filtret _locale kräver språkkoden (till exempel en, en_us eller de) enligt AEM lokaliseringskonvention för resursmapp.

Reaktionsexempel

Låt oss skapa ett enkelt React-program som styr vilket Adventure-innehåll som ska frågas från AEM baserat på en språkinställningsväljare med hjälp av filtret _locale.

När Engelska har valts i språkområdesväljaren returneras engelska annonsfragment under /content/dam/wknd/en när spanska har valts, spanska innehållsfragment under /content/dam/wknd/es och så vidare.

Skapa en LocaleContext

Skapa först ett Reagera-sammanhang som tillåter att språkområdet används i komponenterna i React-programmet.

// src/LocaleContext.js

import React from 'react'

const DEFAULT_LOCALE = 'en';

const LocaleContext = React.createContext({
    locale: DEFAULT_LOCALE,
    setLocale: () => {}
});

export default LocaleContext;

Skapa en LocaleSwitcher React-komponent locale-switcher

Skapa sedan en React-komponent för språkväljaren som anger LocaleContext-värdet för användarens val.

Det här språkvärdet används för att köra GraphQL-frågor och säkerställa att de bara returnerar innehåll som matchar det valda språkområdet.

// src/LocaleSwitcher.js

import { useContext } from "react";
import LocaleContext from "./LocaleContext";

export default function LocaleSwitcher() {
  const { locale, setLocale } = useContext(LocaleContext);

  return (
    <select value={locale}
            onChange={e => setLocale(e.target.value)}>
      <option value="de">Deutsch</option>
      <option value="en">English</option>
      <option value="es">Español</option>
    </select>
  );
}

Fråga innehåll med hjälp av filtret _locale

Komponenten Adventures frågar AEM efter alla äventyr efter språkområde och visar deras titlar. Detta uppnås genom att skicka språkvärdet som lagras i Reagera-kontexten till frågan med hjälp av filtret _locale.

Den här metoden kan utökas till andra frågor i programmet, så att alla frågor bara innehåller innehåll som anges av användarens språkområdesval.

Frågan mot AEM utförs i den anpassade React-kroken getAdventuresByLocale, som beskrivs mer ingående i AEM GraphQL-dokumentationen ​.

// src/Adventures.js

import { useContext } from "react"
import { useAdventuresByLocale } from './api/persistedQueries'
import LocaleContext from './LocaleContext'

export default function Adventures() {
    const { locale } = useContext(LocaleContext);

    // Get data from AEM using GraphQL persisted query as defined above
    // The details of defining a React useEffect hook are explored in How to > AEM Headless SDK
    let { data, error } = useAdventuresByLocale(locale);

    return (
        <ul>
            {data?.adventureList?.items?.map((adventure, index) => {
                return <li key={index}>{adventure.title}</li>
            })}
        </ul>
    )
}

Definiera App.js

Till sist knyter du ihop allt genom att svepa in React-programmet i med LanguageContext.Provider och ange språkvärdet. Detta gör att de andra React-komponenterna, LocaleSwitcher och Adventures, kan dela det lokala markeringstillståndet.

// src/App.js

import { useState, useContext } from "react";
import LocaleContext from "./LocaleContext";
import LocaleSwitcher from "./LocaleSwitcher";
import Adventures from "./Adventures";

export default function App() {
  const [locale, setLocale] = useState(useContext(LocaleContext).locale);

  return (
    <LocaleContext.Provider value={{locale, setLocale}}>
      <LocaleSwitcher />
      <Adventures />
    </LocaleContext.Provider>
  );
}