I want to do a international with the react index.html title, now I am tried like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="title">TeXHub-走进TeX的世界</title>
<link href="/css/viewer.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/fontawesome-free-6.5.1-web/css/all.min.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
<script>
const lang = navigator.language || 'en';
const translations = {
en: {
title: "TeXHub - Enter the World of TeX",
},
zh: {
title: "TeXHub-走进TeX的世界",
},
fr: {
title: "TeXHub - Entrez dans le Monde de TeX",
}
};
const { title } = translations[lang] || translations.en;
document.getElementById('title').textContent = title;
</script>
</body>
</html>
this works with current language but I still want the index.html will switch when I changed the language in the web UI. In the function component I will use the:
const { i18n } = useTranslation();
i18n.changeLanguage(name);
this will make the component changed the language but not work with the static index.html, how to switch the language in the index.html?