How to detect current language and use JS to present dynamic content in Docusaurus pages

Question

I am using Docusaurus to build a site with two language - en and zh.

What I want is a dynamic if-else in JS:

if current_language is en:
    title = "en title"
else:
    title = "zh title"

How can I achieve this in Docusaurus pages? The default i18n is not handy to translate long HTML...

Answer 1

You can use useDocusaurusContext to get the current locale:

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

const { siteConfig, i18n } = useDocusaurusContext();
console.log(i18n.currentLocale); // e.g. 'en'