Lokalisierte Inhalte mit AEM Headless

AEM bietet ein Framework für die Übersetzungsintegration für Headless-Inhalte. Damit können Inhaltsfragmente und unterstützende Assets einfach übersetzt werden, damit sie in verschiedenen Gebietsschemata verwendet werden können. Hierbei handelt es sich um dasselbe Framework, mit dem andere AEM-Inhalte wie Seiten, Experience Fragments, Assets und Formulare übersetzt werden. Sobald Headless-Inhalte übersetzt und veröffentlicht wurden, sind sie für die Verwendung durch Headless-Anwendungen bereit.

Asset-Ordnerstruktur

Stellen Sie sicher, dass die lokalisierten Inhaltsfragmente in AEM der empfohlenen Lokalisierungsstruktur entsprechen.

Die Ordner für die Gebietsschemata müssen gleichrangige Ordner sein, und der Ordnername muss anstelle des Titels ein gültiger ISO-639-1-Code sein, der das Gebietsschema des im Ordner enthaltenen Inhalts angibt.

Der Gebietsschema-Code ist auch der Wert, der zum Filtern der von der GraphQL-Abfrage zurückgegebenen Inhaltsfragmente verwendet wird.

GraphQL-persistierte Abfrage

AEM bietet einen _locale-GraphQL-Filter, der Inhalte automatisch nach Gebietsschema-Code filtert. Zum Beispiel kann das Abrufen aller englischen Abenteuer im WKND-Site-Projekt mit der neuen persistierten Abfrage wknd-shared/adventures-by-locale durchgeführt werden, die wie folgt definiert ist:

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

Die Variable $locale, die im _locale-Filter verwendet wird, erfordert den Gebietsschema-Code (z. B. en, en_us oder de), wie in der Basis-Lokalisierungskonvention für AEMs Asset-Ordner angegeben.

React-Beispiel

Erstellen wir eine einfache React-App, die steuert, welche Adventure-Inhalte von AEM basierend auf einem Gebietsschema-Selektor mithilfe des _locale-Filters abgefragt werden.

Wenn Englisch im Gebietsschema-Selektor ausgewählt wird, werden englische Adventure-Inhaltsfragmente unter /content/dam/wknd/en zurückgegeben. Wenn Spanisch ausgewählt wird, werden spanische Inhaltsfragmente unter /content/dam/wknd/es zurückgegeben, und so weiter.

Erstellen eines LocaleContext

Erstellen Sie zunächst einen React-Kontext, damit das Gebietsschema über die Komponenten der React-App hinweg verwendet werden kann.

// src/LocaleContext.js

import React from 'react'

const DEFAULT_LOCALE = 'en';

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

export default LocaleContext;

Erstellen der React-Komponente LocaleSwitcher

Als Nächstes erstellen Sie eine React-Komponente mit einem Gebietsschema-Umschalter, der den Wert von LocaleContext auf die Auswahl der Person festlegt.

Dieser Gebietsschemawert wird verwendet, um die GraphQL-Abfragen auszuführen und um sicherzustellen, dass nur Inhalte zurückgegeben werden, die dem ausgewählten Gebietsschema entsprechen.

// 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>
  );
}

Abfragen von Inhalt mit dem _locale-Filter

Die Adventure-Komponente führt in AEM eine Abfrage für alle Adventures nach Gebietsschema aus und listet deren Titel auf. Dies wird erreicht, indem der im React-Kontext gespeicherte Gebietsschemawert mithilfe des _locale-Filters an die Abfrage übergeben wird.

Dieser Ansatz kann auf andere Abfragen in Ihrer Anwendung erweitert werden, um sicherzustellen, dass alle Abfragen nur Inhalte enthalten, die durch die Gebietsschema-Auswahl einer Person vorgegeben werden.

Die Abfrage in AEM wird im benutzerdefinierten React-Hook getAdventuresByLocale ausgeführt, der in der Dokumentation zu Abfragen von AEM GraphQL näher beschrieben wird.

// 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>
    )
}

Definieren der App.js

Zum Schluss fügen Sie alles zusammen, indem Sie die React-App in LanguageContext.Provider einschließen und den Wert für das Gebietsschema festlegen. Dies ermöglicht den anderen React-Komponenten, LocaleSwitcher und Adventures, den Status der Gebietsschema-Auswahl zu teilen.

// 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>
  );
}