How to create Multilanguage component or layout? #457
-
I would like to create components or layouts that contain a certain translation inside, and are not drops by props. I have layout that render header with lang switcher. I export the data as the documentation says, but the export const uk = {
switchLang: 'Switch language'
}
export const en = {
switchLang: 'Змінити мову'
}
export default ({children, comp, alternates, lang, switchLang}) => {
const langLinkToDisplay = alternates.find(a => a.lang !== lang)
console.log(switchLang) // undefined
return (
<>
<header>
<a href={langLinkToDisplay.url}>
<img src="..." alt={switchLang}/>
</a>
</header>
<main>
{children}
</main>
</>
);
} |
Beta Was this translation helpful? Give feedback.
Answered by
oscarotero
Aug 1, 2023
Replies: 1 comment
-
The Multilanguage plugin doesn't transform the data from layouts or components, only pages. You can store this value in a If you want to keep the copies in the layout file, you can do something like this: export const copies = {
uk: { switchLang: 'Switch language' },
en: { switchLang: 'Змінити мову' },
};
export default ({children, comp, alternates, lang, copies}) => {
const langLinkToDisplay = alternates.find(a => a.lang !== lang)
const switchLang = copies[lang].switchLang;
return (
<>
<header>
<a href={langLinkToDisplay.url}>
<img src="..." alt={switchLang}/>
</a>
</header>
<main>
{children}
</main>
</>
);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
cawa-93
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The Multilanguage plugin doesn't transform the data from layouts or components, only pages. You can store this value in a
_data
file, so it's used by all pages and passed to the layout.If you want to keep the copies in the layout file, you can do something like this: