Question

如何翻译我的网页？实际上应该使用什么技术或什么脚本 - 如果需要？有关信息;我有所有翻译的文字。但我不想为其他语言创建类似克隆网站的东西。我只使用javascript - 包括jquery。

Answer 1

只使用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>

请注意：这不是一个非常优雅的解决方案。我确定有一种更漂亮的方法......

Answer 2

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

此设置默认显示所有英语块，除非在lang="fr"标记上设置了<body>。

当然，您仍然需要某种方法来修改lang代码的<body>属性...

Answer 3

你实际上是指“如何建立多语言网站”，因为你已经拥有了“翻译文本”。

一种方法是将文本放在容器中，然后使用客户端代码根据所选语言将容器内容更改为正确的文本，并在每种语言中使用包含翻译文本的数组。

如果您拥有服务器端语言，那将会好得多 - 您有这样的事情吗？

Answer 4

JavaScript翻译您的网站需要很长时间。我会说找一些可以翻译HTML文件的软件，并在服务器上保留这两个版本。我知道这不是你想要的，但这是目前唯一可行的方法。

Answer 5

对于GNU gettext API的JavaScript实现，这些链接也很有用：
http://tnga.github.io/extra.js-ijs
http://tnga.github.io/extra.js-ijs/docs/iJS.Gettext.html

Answer 6

您可以使用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”类的自定义选择（下拉列表）（您可以按照自己的方式自定义选择的样式）。

有关https://www.angrymonkeycloud.com/translation的更多信息

Answer 7

我稍微改进了第一个答案。只需使用一个函数在 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>

如何将我的网页翻译成其他语言？

7 个答案: