多语言网站（HTML/javascript）

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

xmlhttp=新的XMLHttpRequest（）；
open（“GET”，'language/lang.xml'，false）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
var selectedLanguageElements=xmlDoc.getElementsByTagName（“Login-”+“en”）[0].childNodes；
对于（var i=0；i对于你的大学学位项目，我认为这已经足够好了。但在我看来，JSON会比XML好，但如果你想使用XML就可以了。另一个更好的方法是对每种语言使用一个文件，例如lang-en.XML、lang-de.XML……因此，当你请求收到的语言文件时，只需要一个规范这是一种不必要的语言，所以这样可以避免接收不必要的数据

如果你想了解更多，我建议你学习一些源代码，比如看看它们是如何工作的。
这个答案可能对你的大学项目没有任何帮助。但是，它可能会帮助其他正在寻找相同问题的人

为了实现真正流畅和简单的翻译，您可以使用云翻译，这是一个来自愤怒的猴子云的免费开源项目：

您应该首先添加对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>


{
“设置”：{
“DefaultLanguage”：“en”，
“TranslatorProvider”：“Azure”，//如果要手动提供翻译，则可以为空
“TranslatorProviderKey”：“{您的Microsoft Azure Translator密钥}”，
“UrlLanguageLocation”：“子目录”
},
“语言”：[
{
“代码”：“en”，
“DisplayName”：“英语”
},
{
“代码”：“de”，
“DisplayName”：“Deutsch”
}
]
}

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

关于
的更多信息，我将定义两种语言的含义，如果Javascript算数而HTML不算数，那么我会说XML也不应该算作一种语言。使用Javascript做这件事不是很好，因为许多搜索引擎不接受js转换。因此，你的网站将是空的。做一个翻译在服务器站点上（使用php或其他更现代的东西，如node.js）。使用一些钩子，如{translate12321321}，并在输出到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>