创建多语言单页网站的最简单方法

Question

有很多这样的问题，但我已经读了很多，我所看到的对于我这个非常简单的例子来说似乎太复杂了。

我有一个超级简单的单页网站(picstalk。App(如果你在意的话)。它只不过是一些带有文本的div。我正在寻找最简单的方法，可能有多种语言，使文本与浏览器的默认语言自动显示，当然有一种方法来切换语言手动。

想法?

谢谢。

Answer 1

我不确定这是否有效，但由于您的文本很少，这将工作。

// Maintain a supported Language List
var langList = ['en', 'zh'];
// Get browser Language
var userLang = navigator.language || navigator.userLanguage;
// extract Language (en-US => en)
userLang = userLang.substring(0, 2);
// Call the function to set language
changeLang(userLang);
// function to change language
function changeLang(lang) {
langList.forEach((langEle) => {
// if language matches, display
if (langEle == lang) {
var langElems = document.querySelectorAll('.' + langEle)
langElems.forEach((elem) => {
elem.style.display = "block"
})
}
// hide the language text
else {
hideLang(langEle)
}
})
}
// function to hide language
function hideLang(lang) {
var langElems = document.querySelectorAll('.' + lang)
langElems.forEach((elem) => {
elem.style.display = "none"
})
}

<h1><span lang="en" class="en">Hello</span> <span lang="zh" class="zh">你好</span></h1>
<button onclick="changeLang('en')">English</button><button onclick="changeLang('zh')">Chinese</button>

Answer 2

你必须使用Javascript去做。首先，您必须为不同的languages创建web pages，并在landing page上创建default language。然后你必须为users的add和switching button，他们想用他们的语言使用你的网站。