多语言网站（HTML / javascript）答案

【问题标题】：Multi language website ( HTML / javascript)多语言网站（HTML / javascript）
【发布时间】：2016-05-03 03:06:19
【问题描述】：

我需要创建一个网页作为我的大学学位项目，并且它必须支持至少 2 种语言。

所以我正在考虑创建一个 xml 文件并为每种语言定义所有文本文件值，如下所示：

 <Login-en>
        <login-header-text>Login</login-header-text>
        <username-text>Username:</username-text>
        <password-text>Password:</password-text>
        <remember-me-text>Remember me</remember-me-text>
  </Login-en>

然后在html模板的底部用一个小的javascript加载xml文件循环节点并替换HTML的内容，像这样

<div id="container">
<form name="loginForm" id="loginForm" onsubmit="return validate();"  method="post">
    <div class="login" id="login-header-text"></div>
    <div class="username-text" id="username-text"></div>
    <div class="password-text" id="password-text"></div>
    <div class="username-field" id="username-field-div">
        <input type="text" name="username" id="usernameInput" value="" />
    </div>
    <div class="password-field" id="password-field-div">
        <input type="password" name="password" id="passwordInput" value=""/>
    </div>
    <div class="remember-checkbox">
        <input type="checkbox" name="remember-me" id="remember-me" />
        <label for="remember-me" id="remember-me-text"></label>
    </div>
    <input type="submit" name="submit" value="" />
</form>

<script type="text/javascript">
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",'language/lang.xml',false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var selectedLanguageElements = xmlDoc.getElementsByTagName("Login-" + "en")[0].childNodes;
for(var i=0;i<selectedLanguageElements.length;i++)
{
    if(selectedLanguageElements[i].nodeType == Node.ELEMENT_NODE) {
        document.getElementById(selectedLanguageElements[i].nodeName).innerHTML = selectedLanguageElements[i].firstChild.nodeValue;
    }
}

这足够好还是有一些更优雅的方法？

感谢您的任何建议。

【问题讨论】：

我会定义两种语言的含义，如果 Javascript 算数而 HTML 不算数，那么我会说 XML 也不应该算作一门语言。
stackoverflow.com/questions/228835/…
用 javascript 做这件事不是很好，因为很多搜索引擎不接受 js 转换。因此，您的网站将是空的。在服务器站点上进行翻译（使用 php 或其他更现代的东西，如 node.js）。使用像 {translate12312321321} 这样的钩子并在输出到 html steam 之前替换它们
Google - Make your website instantly available in 90+ languages
这是经典的“不要自己动手”的领域——国际化比看起来更难。任何简单的字符串替换方案，比如你正在考虑的，都会落在像复数这样的东西上......

标签： javascript jquery html

【解决方案1】：

对于你的大学学位项目，我认为这已经足够了。但在我看来，我认为 JSON 会比 XML 更好，但如果你想使用 XML 也没关系。其他更好的方法是对每种语言使用一个文件，例如 lang-en.xml、lang-de.xml ......所以当您请求语言文件时，您收到的只是特定语言，所以这样您正在避免接收不必要的数据。

如果您想了解更多信息，我建议您研究一些源代码，例如 http://i18njs.com/，看看它是如何工作的以及它们是如何工作的。

【讨论】：

【解决方案2】：

这个答案可能对你的大学项目没有任何帮助。但是，它可能会帮助其他寻求相同问题的人。

要获得真正流畅和简单的翻译，您可以使用 Cloud Translation，它是来自 Angry Monkey Cloud 的免费开源项目：https://github.com/angrymonkeycloud/CloudTranslation。

您应该先添加对 jQuery 的引用，然后再添加对 CloudTranslation JavaScript 文件的引用：

<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>

并在 HTML 头中添加如下配置：

<script type="application/json" id="CloudTranslationConfig">
    {
  "Settings": {
    "DefaultLanguage": "en",
    "TranslatorProvider": "Azure", // Could be empty if you want to provide the translations manually
    "TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
    "UrlLanguageLocation": "Subdirectory"
  },
  "Languages": [
    {
      "Code": "en",
      "DisplayName": "English"
    },
    {
      "Code": "de",
      "DisplayName": "Deutsch"
    }
  ]
}
</script>

并添加您自己的具有“CloudTranslationSelect”类的自定义选择（下拉菜单）以显示预定义语言列表。

更多信息请访问https://www.angrymonkeycloud.com/translation

【讨论】：