多语言网站(HTML / javascript）

Multi language website ( HTML / javascript)

本文关键字：javascript HTML 语言 网站      更新时间：2023-09-26

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

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

？

感谢您的任何建议。

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

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

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

对于真正流畅和简单的翻译，您可以使用云翻译，这是一个来自愤怒的猴子云的免费开源项目：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

相关文章：