向网站添加翻译选项

Question

我想在我们的网站上添加一个翻译选项，但除了嵌入 google 翻译小部件（看起来不太好）之外，我找不到如何做到这一点。

我希望它的样式适合我们的网站，类似于他们在这个网站（不是我们的网站）上所做的那样 https://www.visitscotland.com/brochures/

如有任何帮助，我们将不胜感激！

Answer 1

典型的方法是根据某些切换（如您的示例站点）或 url 中的指示器（例如 example.uk 或 [=31=）换出内容].

这比尝试使用某些小部件为用户翻译您的内容要有效得多，因为它只需要翻译一次，而不是每次用户访问内容时都需要翻译。

某些浏览器也有 built-in 翻译功能，chrome 特别经常提供翻译页面。您可以通过明确说明您的网站使用的语言来帮助增强这一点，然后 Chrome 将提供将其翻译成用户浏览器的语言；有两种主要方法可以做到这一点：

W3C 推荐在 html 标签中使用 lang and/or xml:lang 属性：

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

Google 推荐元 http-equiv:

<meta http-equiv="Content-Language" content="en">

Answer 2

您可以使用 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",
    "TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
    "UrlLanguageLocation": "Subdirectory"
  },
  "Languages": [
    {
      "Code": "en",
      "DisplayName": "English"
    },
    {
      "Code": "de",
      "DisplayName": "Deutsch"
    }
  ]
}
</script>

并添加您自己的自定义 select（下拉菜单），其中包含 class "CloudTranslationSelect"（您可以按照自己的方式自定义 select 的样式）。

您可以将自己的翻译添加到配置中，这样可以减少来自翻译提供商的调用。

在 https://www.angrymonkeycloud.com/translation

上找到更多信息

向网站添加翻译选项

Adding a translation option to website

translation

google-translate

translate