4

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

4

6 回答 6

10

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

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

于 2011-01-17T22:09:21.210 回答
2

您实际上的意思是“如何建立多语言网站”，因为您已经拥有了所谓的“翻译文本”。

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

如果您可以使用服务器端语言，那会更好-您有这样的东西吗？

于 2011-01-17T20:48:38.383 回答
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>

于 2011-01-17T22:41:53.987 回答
0

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

于 2011-01-17T20:42:54.907 回答
0

您可以使用 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

于 2019-08-08T13:35:41.670 回答
0

我已经改进了第一个答案。只需使用一个函数在 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>
于 2021-07-26T09:50:38.260 回答