HTML 文件的国际化

发布于 2024-12-01 07:46:05 字数 638 浏览 0 评论 0原文

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

有什么想法吗？

编辑1：例如，我将编写这样的代码：

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

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

name = isim
surname = soyisim

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

name = namn
surname = efternamn

如果我更改导入的文件该 div 内的文本每页将采用不同的语言。

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

原文

I am developing a project and uses HTML files (not JSP or any other technology at client side). I use JQuery for scripting. I have tables, columns, and many fields that have "text" on them. How can I internationalize my web page with JQuery? I mean I will load a file _tr.extension and my web page will be Turkish, _swe.extension will be Swedish etc.

Any ideas?

EDIT1: For example I will write a code like that:

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

and there will be a _tr.properties file like that:

name = isim
surname = soyisim

and there will be a _swe.properties file like that:

name = namn
surname = efternamn

And if I change the imported file that texts inside that divs will be at different language per pages.

EDIT2: That functionality is enough for me I don't want more I need a speedy and lightweight plug-in (Maybe feeding from JSON can be an additional specialty).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦亦如幻 2024-12-08 07:46:05

我强烈推荐 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>

I can strongly recommend Globalize as an translating and formatting solution.

To translate you would use the code similar to that:

<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>

To use this script you would need to modify your html as follows:

<!-- 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>

回复收藏 0 原文

孤独陪着我 2024-12-08 07:46:05

这里有一些建议。
(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

回复收藏 0 原文

鱼窥荷 2024-12-08 07:46:05

我赞同 Pawel Dyda 使用 Jquery Globalize 插件的答案。我们在项目中使用类似的解决方案。

步骤如下。

下载 Jquery Globalize 插件
https://github.com/jquery/globalize
包含 globalize.js 以及 HTML 中所需文化的 JS 文件文件
例如，globalize.culture.tr.js
添加带有 ID 的 HTML 代码
```
;
```
将姓名添加到相应语言 JS 文件的消息部分
土耳其 JS 文件
<前><代码>消息：
{
“名称”：“伊西姆”，
“姓氏”：“soyisim”
}
瑞典语 JS 文件
<前><代码>消息：
{
“名字”：“南”
“姓氏”：“埃夫特纳姆”
}
根据选择设置区域性
```
 Globalize.Culture("tr");
```

使用 .text 函数或 .html 函数更新区域性的字符串

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

在我们的项目中，我们还使用 JSON 字符串根据区域性填充下拉列表

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

I second Pawel Dyda's answer to use Jquery Globalize Plugin. We are using similar solution in our project.

Steps below.

Download Jquery Globalize Plugin
https://github.com/jquery/globalize
Include globalize.js and the JS files for the cultures you need in your HTML file
e.g., globalize.culture.tr.js

Add HTML code with IDs

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

Add name and surname to the messages section of the respective language JS files

Turkish JS File

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

Swedish JS file

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

Set the culture based on selection
```
 Globalize.Culture("tr");
```

Update the strings for the culture using .text function or .html function

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

In our project, we are also using JSON string to populate dropdowns based on culture

Save the dropdown name and value pairs as a JSON string in the messages section
Convert the JSON string to JSON object
Loop the JSON object and set the Option Name and Value for the dropdown list

回复收藏 0 原文

下雨或天晴 2024-12-08 07:46:05

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

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

回复收藏 0 原文

心的憧憬 2024-12-08 07:46:05

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

您最好使用服务器端语言将内容提供到 HTML 模板中，或者如果不可能，请为每种语言创建重复的页面并适当地标记它们。

回复收藏 0 原文

赴月观长安 2024-12-08 07:46:05

您可能需要查看 gettext jQuery 插件。 gettext 是语言文件的标准，具有出色的编辑工具，这将使您在必须与翻译服务（甚至技术不高的内部人员）打交道的情况下变得更加轻松。

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

回复收藏 0 原文

有深☉意 2024-12-08 07:46:05

本地化插件 -plugins.jquery.com/project/localizer 很简单并且运行良好。

回复收藏 0 原文

表情可笑 2024-12-08 07:46:05

Index.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"
      }
    });

Index.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 file

  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"
      }
    });

回复收藏 0 原文

~没有更多了~