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

这是解决这个问题的一种方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Localise</title>
</head>

<body>

<a href="#china" onclick="showthis('contentchina')">China flag</a>|
<a href="#usa" onclick="showthis('contentusa')">USA flag</a>

<div id="contentchina" style="display:none">
Lorem ipsum dolor sit amet...
</div>

<div id="contentusa" style="display:none">
Duis aute irure dolor...
</div>

<script>
function showthis(nation){
    document.getElementById(nation).style.display="block";
    return false;
}
</script>
</body>
</html>

Answer 3

现在我会在没有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 4

您可以使用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');
}

hjsfiddle

Answer 5

简单回答：不，使用后端是实现这一目标的最简单，最好的方法。后端代码专为动态内容而设计，这就是您想要的。

硬答案：这是一种在不将页面分成两个目录的情况下执行此操作的方法。问题是你将不得不使用Javascript来生成你的页面内容，这通常是一个坏主意。但你可以使用一个javascript MVC库，加上对内容文件夹的ajax调用来拉入文本（你仍然需要有两个英文和中文目录，但它们只包含内容，而不是HTML）。问题是，这种方法存在多种潜在问题，如果您知道，您的用户将拥有启用了javascript的现代浏览器，这是值得使用的。

Answer 6

我建议查看此问题的模板引擎。对我来说，它不是完全一个backend，而是更多的灰色区域。像Moustache或smarty这样的东西对你来说是完美的。

简单地说，我同意其他海报，认为这在客户方面是不合理的。

Answer 7

您的网页需要了解在渲染中文字符时应使用的编码：

 <! -- NOTICE THE "charset=UTF-8" !!!! -->
<head>    
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
</head>

Answer 8

是的，这是可能的。这是一种方式

在文件夹中将HTML格式化为

/root
  /Chinese
  /English-American
  index.html

根文件夹将包含带有语言选择的页面，中文和英文 - 美国将包含您的语言特定页面。

现在在index.html上只需将用户定向到正确的语言文件夹，所有链接都将引用正确的语言文件夹

Answer 9

如果您希望您的网页对搜索引擎友好，则必须将两个静态版本都放在HTML中。您可以将它们分成两个div，当用户点击某个标记时，您会显示正确的div。

您还可以使用Mustache之类的模板来使用JavaScript呈现内容。然后，您可以将非本地化内容编写为模板，并将本地化内容作为变量。

Answer 10

通常JS为您生成代码并不好。但是，我使用 underscore.js 为同一个POC做了一个。该框架具有“_template”功能，可帮助我们替换HTML文件中的所有键。该函数接受JSON格式的键值对。

根据所选语言，加载相应的JSON文件，然后将其传递给_template函数。这将取代所有键。

Answer 11

我阅读ceving's answer，然后编写一个JS库languages.js来执行此操作。

我改变了<title> s＆＃39;的序列。使用不同的语言，如果你想在页面标题中切换lang，它就有用。

像这样写HTML：

<html>
  <head>
    <title lang="en">Test Page</title>
    <title lang="zh-cmn-Hans">测试页面</title>
    <title lang="ja">テストページ</title>
    <title lang="miaw">miaw miaw miaw</title>
  </head>
  <body>
    <div lang="en" style="display:block;">Why does the sun rise? Why does the moon shine?</div>
    <div lang="zh-cmn-Hans">太阳为什么会升起？月亮为什么会发光？</div>
    <div lang="ja" style="display:inline">太陽はなんで昇る?月はなぜ輝く？</div>
    <div lang="miaw" style="display:inline">miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw</div>
  </body>
</html>
<script src="https://raw.githubusercontent.com/MuromiU/JS/master/src/languages.js"></script>

用法：

Languages.select(lang);

更多细节： github readme

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

11 个答案: