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

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。然后你必须 add switching button users 想要使用他们的语言的网站。

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

Simplest way to create multiple-language one-page website

html

web

localization

multilingual