如何翻译我的网页？实际上应该使用什么技术或脚本（如果需要）？信息；我有所有的翻译文本。但我不想为其他语言创建类似克隆站点的东西。 我只使用了 javascript -包括 jquery 。
【问题讨论】：
标签： javascript html webpage translate
只使用 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>
请注意：这不是一个非常优雅的解决方案。我敢肯定有一个更漂亮的方法...
【讨论】：
您实际上是指“如何构建多语言网站”，因为您已经拥有了所谓的“翻译文本”。
一种方法是将文本放入容器中，然后使用客户端代码根据所选语言将容器内容更改为适当的文本，并在数组中包含每种语言的翻译文本。
如果您可以使用服务器端语言，那会更好 - 您有这样的东西吗？
【讨论】：
使用 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>
此设置默认显示所有英文块，除非在<body> 标签上设置了lang="fr"。
当然，您仍然需要一些方法来修改<body> 标签的lang 属性...
【讨论】：
JavaScript 翻译您的网站需要很长时间。我会说找到一些可以翻译 HTML 文件并将两个版本都保存在您的服务器上的软件。我知道这不是您想要的，但这是目前唯一可行的方法。
【讨论】：
您可以使用 Cloud Translation，它是来自 Angry Monkey Cloud 的免费开源项目：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", // 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>
并添加您自己的具有“CloudTranslationSelect”类的自定义选择（下拉菜单）（您可以根据需要自定义选择的样式）。
【讨论】：
我已经稍微改进了第一个答案。只需使用一个函数在 localStorage 中设置语言值，然后从那里获取语言并使用全局变量 lgn 动态更改 HTML。
<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]);
}
var lng; //global variable
if (localStorage.getItem('lng') == null) { //if I have no language saved just load the English language
lng = 'en_US';
localStorage.setItem('lng', lng);
}
if(localStorage.getItem("lng") == 'en_US'){
lng = 'en_US';
}
if(localStorage.getItem("lng") == 'fr_FR'){
lng = 'fr_FR';
}
console.log(lng);
function get_i18n(item, lng) {
document.write(article[item][lng]);
}
</script>
<div class="story">
<h1 class="title"><script>get_i18n('title',lng);</script></h1>
<p class="content"><script>get_i18n('content',lng);</script></p>
</div>
【讨论】：