Question

我需要创建一个网页作为我大学学位的项目，它必须至少支持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;
    }
}

这是否足够好还是有一些更优雅的方式呢？

感谢您的任何建议。

Answer 1

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

如果您想了解更多信息，我建议您学习一些源代码，例如http://i18njs.com/，了解这项工作的方式及其工作原理。

Answer 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的更多信息

多语言网站（HTML / javascript）

2 个答案: