在我的案例中如何本地化一个简单的HTML网站页面？

Question

我不开发任何包含客户端和后端服务器端的Web服务应用程序(如Java EE应用程序或Ruby on Rails).

相反,我只是在开发一个HTML 网站页面,在这个页面上,有两个标志图像(美国和中国),用作用户页面的语言选择.

我想知道,对于这个单一的网页开发(没有任何后端系统),是否有任何有效的方法来实现页面本地化(以不同语言显示页面)基于用户的标志选择？

Answer 1

您可以使用标准HTML lang属性:

<span lang="en">Scale</span><span lang="de">Maßstab</span>

然后你可以隐藏并显示匹配的元素:

function select_language(language) {
    $("[lang]").each(function () {
        if ($(this).attr("lang") == language)
            $(this).show();
        else
            $(this).hide();
    });
}

我用一个简单的选择:

<select onchange="select_language(this.options[this.selectedIndex].value)">
  <option value="en" selected>English</option>
  <option value="de">Deutsch</option>
</select>

Answer 2

如今，我不用jQuery就能做到。首先，我将隐藏所有具有lang属性的节点，并仅显示默认语言。这可以在CSS中完成：

[lang] {
  display: none;
}
[lang=en] {
  display: unset;
}

如果未启用JavaScript，则文档不会本地化，但至少会以默认语言可读。

接下来，如果支持的语言列表中有正确的语言，我将使用一些JavaScript来显示。

function localize (language)
{
  if (['de'].includes(language)) {
    let lang = ':lang(' + language + ')';
    let hide = '[lang]:not(' + lang + ')';
    document.querySelectorAll(hide).forEach(function (node) {
      node.style.display = 'none';
    });
    let show = '[lang]' + lang;
    document.querySelectorAll(show).forEach(function (node) {
      node.style.display = 'unset';
    });
  }
}

您可以使用选择框或浏览器语言。

localize(window.navigator.language);

Answer 3

您可以使用 JavaScript 读取用户语言并显示正确的标志/内容：

HTML：

<img id="myFlag" src="flag_default.png"/>

和一些 jQuery （因为你用 jQuery 标记了你的问题）：

var supportedLangs = ['de', 'en', 'cn'];
var userLang = navigator.language;

if($.inArray(userLang, supportedLangs) >= 0){
    $('myFlag').attr('src', 'flag_' + userLang + '.png');
}

哈杰小提琴