javascript 如何将我的网页翻译成其他语言？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4717475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to translate into other languages my web page?
提问by Alock Leo
How can I translate my web pages? Actually what technology or what scripting-if require- should be used? For info; I have all translated text. But I do not want to create something like clone site for other language. I used just javascript -including jquery .
如何翻译我的网页？实际上应该使用什么技术或什么脚本 - 如果需要 - ？信息; 我有所有翻译的文本。但我不想为其他语言创建类似克隆站点的东西。我只使用了 javascript -包括 jquery 。
回答by drudge
Just using JavaScript...
只是使用 JavaScript...
<script type="text/javascript">
// JSON-formatted, potentially read from a database
var article = {
title: {
en_US: "Article Title",
fr_FR: "Titre de l\'Article"
},
content: {
en_US: "Content of the Article.",
fr_FR: "Contenu de l\'Article."
}
}
// simple function to write the info to the page
function get_i18n(item, lang) {
document.write(article[item][lang]);
}
</script>
<!-- English Version -->
<div class="story">
<h1 class="title"><script>get_i18n('title','en_US');</script></h1>
<p class="content"><script>get_i18n('content','en_US');</script></p>
</div>
<!-- French Version -->
<div class="story">
<h1 class="title"><script>get_i18n('title','fr_FR');</script></h1>
<p class="content"><script>get_i18n('content','fr_FR');</script></p>
</div>
Please Note: This isn't a very graceful solution. I'm sure there's a prettier method...
请注意：这不是一个非常优雅的解决方案。我确定有一个更漂亮的方法......
回答by Shadow Wizard is Ear For You
You actually mean "how to build multi lingual website" as you already have the "translated text" as you call it.
您实际上是指“如何构建多语言网站”，因为您已经拥有了所谓的“翻译文本”。
One way is to put the text inside containers then using client side code change the containers contents to the proper text according to selected language, having arrays with translated text in each language.
一种方法是将文本放入容器中，然后使用客户端代码根据所选语言将容器内容更改为正确的文本，并具有包含每种语言翻译文本的数组。
If you have server side language at your disposal it would be much better though - do you have such thing?
如果您可以使用服务器端语言，那会好得多 - 您有这样的东西吗？
回答by drudge
Using CSS attribute selectors:
使用 CSS 属性选择器：
<style type="text/css">
// hides all French blocks by default
div.story[lang="fr"] {
display: none;
}
// hide all English blocks
body[lang="fr"] div.story[lang="en"] {
display: none;
}
// show all French blocks
body[lang="fr"] div.story[lang="fr"] {
display: block;
}
</style>
<!-- Change this to the language of the blocks you want to display -->
<body lang="fr">
<!-- English block, shown by default -->
<div class="story" lang="en">
<h1 class="title">Article Title</h1>
<p class="content">Content of the Article.</p>
</div>
<!-- French block, hidden by default -->
<div class="story" lang="fr">
<h1 class="title">Titre de l'Article</h1>
<p class="content">Contenu de l'Article.</p>
</div>
</body>
This setup defaults to showing all English blocks, unless lang="fr"is set on the <body>tag.
此设置默认显示所有英文块，除非lang="fr"在<body>标签上设置。
Of course, you'll still need some way to modify the langattribute of the <body>tag...
当然，您仍然需要某种方式来修改标签的lang属性<body>...
回答by tnga
For JavaScript implementation of GNU gettext API these links can be also useful:
http://tnga.github.io/extra.js-ijs
http://tnga.github.io/extra.js-ijs/docs/iJS.Gettext.html
对于 GNU gettext API 的 JavaScript 实现，这些链接也很有用：
http: //tnga.github.io/extra.js-ijs
http://tnga.github.io/extra.js-ijs/docs/iJS.Gettext .html
回答by Elie Tebchrani
You can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.
您可以使用 Cloud Translation，它是 Angry Monkey Cloud 的一个免费开源项目：https: //github.com/angrymonkeycloud/CloudTranslation。
You should add a reference to jQuery first, then to the CloudTranslation JavaScript file:
您应该首先添加对 jQuery 的引用，然后添加到 CloudTranslation JavaScript 文件：
<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>
And add the configuration within the HTML head as follows:
并在 HTML 头部添加配置如下：
<script type="application/json" id="CloudTranslationConfig">
{
"Settings": {
"DefaultLanguage": "en",
"TranslatorProvider": "Azure", // not required if you filled in all translations
"TranslatorProviderKey": "{Your Microsoft Azure Translator Key}", // not required if above is empty
"UrlLanguageLocation": "Subdirectory"
},
"Languages": [
{
"Code": "en",
"DisplayName": "English"
},
{
"Code": "ar",
"DisplayName": "Arabic",
"Direction": "rtl"
}
],
"Translations": [
{
"en": "Home",
"ar": "?????? ????????"
},
}
</script>
and add your own custom select (dropdown) having the class "CloudTranslationSelect" (you can customize the style of your select the way you want).
并添加您自己的自定义选择（下拉列表），其类为“CloudTranslationSelect”（您可以按照自己的方式自定义选择的样式）。
More information found on https://www.angrymonkeycloud.com/translation
回答by Elie Tebchrani
It would take too long for JavaScript to translate your site. I'd say find some software that can translate HTML files and keep both versions on your server. I know this isn't what you want, but it's the only practical way right now.
JavaScript 翻译您的网站需要很长时间。我会说找到一些可以翻译 HTML 文件并将两个版本都保存在您的服务器上的软件。我知道这不是您想要的，但这是目前唯一可行的方法。
