Lokalisierte Inhalte mit AEM Headless

AEM bietet eine Framework für die Übersetzungsintegration für Headless-Inhalte, sodass Inhaltsfragmente und unterstützende Assets einfach übersetzt werden können, 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 Forms übersetzt werden. Einmal Headless-Inhalt wurde übersetztund veröffentlicht wurde, ist es für den Verbrauch durch Headless-Anwendungen bereit.

Asset-Ordnerstruktur

Stellen Sie sicher, dass die lokalisierten Inhaltsfragmente in AEM dem empfohlene Lokalisierungsstruktur.

Die Gebietsschemaordner müssen gleichrangige Ordner sein, und der Ordnername muss ein gültiger Ordnername und nicht der Titel sein. ISO 639-1-Code das Gebietsschema des im Ordner enthaltenen Inhalts darstellt.

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

GraphQL-persistente Abfrage

AEM bietet eine _locale GraphQL-Filter, der Inhalte automatisch nach Gebietsschema-Code filtert. Beispielsweise können Sie alle englischen Abenteuer im WKND-Referenz-Demoprojekt kann mit einer neuen persistenten Abfrage durchgeführt werden wknd-shared/adventures-by-locale definiert als:

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

Die $locale in der Variablen _locale -Filter erfordert den Gebietsschema-Code (z. B. en, en_usoder de) wie in angegeben Lokalisierungskonvention für Asset-Ordner AEM.

React-Beispiel

Erstellen wir eine einfache React-Anwendung, die steuert, welche Abenteuer-Inhalte von AEM basierend auf einem Gebietsschema-Selektor mithilfe der _locale Filter.

Wann englisch wird in der Gebietsschema-Auswahl ausgewählt, dann unter "Englisch Adventure Content Fragments" /content/dam/wknd/en zurückgegeben werden, wenn spanisch ausgewählt ist, wird Spanische Inhaltsfragmente unter /content/dam/wknd/esusw. usw.

Erstellen Sie eine LocaleContext

Erstellen Sie zunächst eine React-Kontext , damit das Gebietsschema über die Komponenten der React-Anwendung 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 Sie eine LocaleSwitcher React-Komponente

Als Nächstes erstellen Sie eine React-Komponente mit dem Gebietsschema-Umschalter, die als LocaleContext's -Wert zur Auswahl des Benutzers hinzufügen.

Dieser Gebietsschemawert wird verwendet, um die GraphQL-Abfragen zu leiten und 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>
  );
}

Abfrageinhalt mit _locale filter

Die Komponente Abenteuer fragt AEM alle Abenteuer nach Gebietsschema ab und listet deren Titel auf. Dies wird erreicht, indem der im React-Kontext gespeicherte Gebietsschemawert mithilfe der _locale Filter.

Dieser Ansatz kann auf andere Abfragen in Ihrer Anwendung erweitert werden, um sicherzustellen, dass alle Abfragen nur Inhalte enthalten, die durch die Gebietsschema-Auswahl eines Benutzers angegeben wurden.

Die Abfrage nach AEM wird im benutzerdefinierten React-Haken ausgeführt getAdventuresByLocale, ausführlicher beschrieben in der Dokumentation AEM GraphQL-Abfrage.

// 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 Sie die App.js

Verbinden Sie alles, indem Sie die React-Anwendung in die LanguageContext.Provider und legen Sie den Gebietsschemawert fest. Dies ermöglicht die anderen React-Komponenten, LocaleSwitcherund Abenteuer , um den Status der Gebietsschema-Auswahl freizugeben.

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

Ressourcen für Business.Adobe.com