HTML 文件的国际化答案

【问题标题】：Internationalizaton of HTML FilesHTML 文件的国际化
【发布时间】：2011-08-24 12:42:45
【问题描述】：

我正在开发一个项目并使用 HTML 文件（不是 JSP 或客户端的任何其他技术）。我使用 JQuery 编写脚本。我有表格、列和许多带有“文本”的字段。如何使用 JQuery 国际化我的网页？我的意思是我将加载一个文件 _tr.extension，我的网页将是土耳其语，_swe.extension 将是瑞典语等。

有什么想法吗？

EDIT1：例如我会写这样的代码：

<div>${name}</div>
<div>${surname}</div>

会有一个像这样的 _tr.properties 文件：

name = isim
surname = soyisim

会有一个像这样的 _swe.properties 文件：

name = namn
surname = efternamn

如果我更改导入的文件，该 div 中的文本将在每页使用不同的语言。

EDIT2：这个功能对我来说已经足够了我不想要更多我需要一个快速且轻量级的插件（也许从 JSON 馈送可能是一个额外的专长）。

【问题讨论】：

Localizer 插件-plugins.jquery.com/project/localizer 看起来不错，我去看看。
如果您需要更多（例如适当的复数支持、变量等），您可以查看i18next.com

标签： javascript jquery html internationalization

【解决方案1】：

我强烈推荐 Globalize 作为翻译和格式化解决方案。

要翻译你会使用类似的代码：

<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="cultures/globalize.cultures.js"></script>
<script type="text/javascript">
  Globalize.addCultureInfo( "tr", {
    messages: {
      "name" : "isim",
      "surname" : "soyisim"
    }
  });
  // Swedish language code is actually sv
  Globalize.addCultureInfo( "sv", {
    messages: {
      "name" : "namn",
      "surname" : "efternamn"
    }
  });

  $(document).ready(function() {
    // you need somehow know what language to use
    // but it is out of scope of this answer
    $( "name" ).val( Globalize.localize( "name", "tr" ) );
    $( "surname" ).val( Globalize.localize( "surname", "tr" ) );
  });
</script>

要使用此脚本，您需要按如下方式修改 html：

<!-- DIV is just a container, P (paragraph) or SPAN 
     are more suitable for the job. Also this shows
     neutral language texts.
     Be sure to use unique IDs -->
<div><p id="name">name</p></div>
<div><p id="surname">surname</p></div>

【讨论】：

【解决方案2】：

这里有一些建议。（i18n == 国际化）

http://plugins.jquery.com/i18n/
http://code.google.com/p/jquery-utils/wiki/I18N
http://code.google.com/p/jquery-i18n-properties/

编辑：为了您的需要，我推荐https://github.com/jquery-i18n-properties/jquery-i18n-properties

【讨论】：

我已经编辑了我的问题，您根据我的需要建议哪一个？
如何在不以编程方式将值设置为 html 的情况下使用 jqueryi18n 实现翻译：
${name}

${surname}

【解决方案3】：

我第二个 Pawel Dyda 的回答是使用 Jquery Globalize Plugin。我们在项目中使用了类似的解决方案。

以下步骤。

下载 Jquery Globalize 插件

https://github.com/jquery/globalize
在 HTML 文件中包含 globalize.js 和您需要的文化的 JS 文件

例如，globalize.culture.tr.js

添加带有 ID 的 HTML 代码

<div id="name"></div>
<div id="surname></div>

在相应语言 JS 文件的消息部分添加姓名和姓氏

土耳其 JS 文件

 messages : 
{
"name": "isim",
"surname": "soyisim"    
}

瑞典语JS文件

 messages :
     {
    "name": "namn"
"surname": "efternamn"
}

根据选择设置文化
```
 Globalize.Culture("tr");
```

使用 .text 函数或 .html 函数更新文化字符串

   $("#name").text(Globalize.localize("name",globalize.culture()));
   $("#surname").text(Globalize.localize("surame",globalize.culture()));

在我们的项目中，我们还使用 JSON 字符串来填充基于文化的下拉列表

将下拉名称和值对保存为消息部分中的 JSON 字符串
将 JSON 字符串转换为 JSON 对象
循环 JSON 对象并为下拉列表设置选项名称和值

【讨论】：

【解决方案4】：

您可以使用 jQuery 模板 API 将所有书面文字替换为可以动态定义的变量。

在此处查看更多信息：http://api.jquery.com/tmpl/

【讨论】：

【解决方案5】：

我不会使用 JQuery 来国际化您的网页内容，这不是一个好的技术选择，因为不能依赖 JavaScript 在浏览器或客户端读取您的页面时处于活动状态。

您最好使用服务器端语言将内容提供给 HTML 模板，或者如果无法做到这一点，请为每种语言创建重复页面并适当地标记它们。

【讨论】：

我想在客户端进行国际化过程，因为我的应用程序将尽可能与主服务器端分离。我将与 REST 服务进行通信。重复页面的想法可能不利于添加新语言或将语言更改为另一种语言，即我也根据浏览器的默认语言更改更改语言。
我仍然认为您正在考虑错误的技术。 JavaScript 应该用于增强网页，而不是用来显示其内容。
问题是如何使用jQuery进行国际化。

【解决方案6】：

您可能想查看gettext jQuery 插件。 gettext 是语言文件的标准，具有出色的编辑工具，在您必须处理翻译服务（甚至是技术不高的内部人员）的情况下，这将使体验变得更加容易。

对于 URL 问题，您的 Web 服务器可能具有通过重写 URL 来提供帮助的能力。例如 Apache 中的 .htaccess。（您可能希望将其作为一个单独的问题发布。）

【讨论】：

【解决方案7】：

Localizer 插件 - plugins.jquery.com/project/localizer 简单好用。

【讨论】：

【解决方案8】：

索引.html

 <!DOCTYPE html>
  <html>
  <head>
  <title>javascript - Internationalizaton of HTML Files</title>
<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="globalize.cultures.js"></script>
<p id="name">name</p>
<p id="surname">surname</p>

  <script>
function myFunction()
 {
 surname=document.getElementById("surname");  //Find the element
 surname.innerHTML=Globalize.localize( "surname", "fr" );    //Change the content
 n=document.getElementById("name");
 n.innerHTML=Globalize.localize("name","fr");
}
 window.onload=function(){
 var language=window.navigator.language; //default language en-US
 surname=document.getElementById("surname");  //Find the element
 surname.innerHTML=Globalize.localize( "surname", language );    //Change the content
 n=document.getElementById("name");
 n.innerHTML=Globalize.localize("name",language);

 };
</script>
 <button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

globalize.cultures.js 文件

  Globalize.addCultureInfo( "en-US", {
    messages: {
     "name" : "English Name",
     "surname" : "English Surname"
    }
   });
   // French language code is actually fr

       Globalize.addCultureInfo( "fr", {
       messages: {
     "name" : "French name",
    "surname" : "French Surname"
      }
    });

【讨论】：