Gelokaliseerde inhoud met AEM Headless
Gemaakt voor:
- tussenpersoon
- Ontwikkelaar
AEM verstrekt het Kader van de Integratie van de a Vertalingvoor hoofdloze inhoud, toestaand de Fragmenten van de Inhoud en het steunen van activa om voor gebruik over scènes gemakkelijk worden vertaald. Dit is hetzelfde framework dat wordt gebruikt voor het vertalen van andere AEM-inhoud, zoals Pagina's, Experience Fragments, Assets en Forms. Zodra hoofdloze inhoud is vertaald, en gepubliceerd, is het klaar voor consumptie door hoofdloze toepassingen.
Assets-mapstructuur
Zorg ervoor dat de gelokaliseerde Fragments van de Inhoud in AEM de geadviseerde localisatiestructuurvolgen.
De scèneomslagen moeten siblings zijn, en de omslagnaam, eerder dan titel, moet een geldige ISO 639-1 codezijn die de scène van de inhoud vertegenwoordigt in de omslag.
De landinstellingscode is ook de waarde die wordt gebruikt om de inhoudsfragmenten te filteren die door de GraphQL-query worden geretourneerd.
GraphQL-query voortgezet
AEM biedt een _locale GraphQL-filter dat inhoud automatisch filtert op landinstellingscode. Bijvoorbeeld, die alle Engelse avonturen in het project van de Plaats WKNDvragen kan met een nieuwe persisted vraag wknd-shared/adventures-by-locale worden gedaan die als wordt bepaald:
query($locale: String!) {
adventureList(_locale: $locale) {
items {
_path
title
}
}
}
De $locale variabele die in de _locale filter wordt gebruikt vereist de scènecode (bijvoorbeeld en, en_us, of de) zoals die in wordt gespecificeerd AEM element omslag-basis localisatieovereenkomst.
Voorbeeld Reageren
Laten we een eenvoudige React-toepassing maken die bepaalt welke Adventure-inhoud van AEM moet worden opgevraagd op basis van een lokale kiezer die het filter _locale gebruikt.
Wanneer Engels in de scèneselecteur wordt geselecteerd, dan zijn de Engelse Fragmenten van de Inhoud van het Avontuur onder /content/dam/wknd/en teruggekeerd, wanneer Spaans wordt geselecteerd, dan de Spaanse Fragmenten van de Inhoud onder /content/dam/wknd/es, etc., etc.
Een LocaleContext maken
Eerst, creeer de context van het Reageren van a 🔗 om de scène toe te staan om over de componenten van de React toepassing worden gebruikt.
// src/LocaleContext.js
import React from 'react'
const DEFAULT_LOCALE = 'en';
const LocaleContext = React.createContext({
locale: DEFAULT_LOCALE,
setLocale: () => {}
});
export default LocaleContext;
Een component LocaleSwitcher React maken
Daarna, creeer een component van het Reageren van de scènewisselaar die de 🔗 waarde van 0} LocaleContext aan de selectie van de gebruiker is.
Deze landinstellingswaarde wordt gebruikt om de GraphQL-query's aan te sturen, zodat deze alleen inhoud retourneren die overeenkomt met de geselecteerde landinstelling.
// 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>
);
}
Vraag inhoud met behulp van het filter _locale
De component Adventures zoekt AEM naar alle avonturen per landinstelling en geeft de titels ervan weer. Dit wordt bereikt door de landinstellingswaarde die is opgeslagen in de context React, door te geven aan de query met het filter _locale .
Deze benadering kan tot andere vragen in uw toepassing worden uitgebreid, die ervoor zorgt dat alle vragen slechts inhoud omvatten die door de scèneselectie van een gebruiker wordt gespecificeerd.
Het vragen tegen AEM wordt uitgevoerd in de haken van het douaneantwoord getAdventuresByLocale, die in meer detail op de het vragen van AEM GraphQL documentatiewordt beschreven.
// 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>
)
}
Definieer de App.js
Als laatste koppelt u de toepassing React aan elkaar door de toepassing React in de LanguageContext.Provider te plaatsen en de waarde voor de landinstelling in te stellen. Dit staat de andere componenten van het Reageren, LocaleSwitcher, en avonturentoe om de staat van de scèneselectie te delen.
// 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>
);
}