向网站添加翻译选项答案

【问题标题】：Adding a translation option to website向网站添加翻译选项
【发布时间】：2018-08-30 22:13:55
【问题描述】：

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

我正在寻找适合我们网站的样式，类似于他们在本网站（不是我们的）上所做的那样https://www.visitscotland.com/brochures/

任何帮助将不胜感激！

【问题讨论】：

能否分享一个示例代码，了解您是如何实现翻译的。谢谢

标签： translation google-translate translate

【解决方案1】：

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

并添加您自己的具有“CloudTranslationSelect”类的自定义选择（下拉菜单）（您可以根据需要自定义选择的样式）。

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

更多信息请访问https://www.angrymonkeycloud.com/translation

【讨论】：

【解决方案2】：

解决此问题的典型方法是根据某些切换（例如在您的示例站点中）或 url 中的指示符（例如 example.uk 或 example.de）来换出内容。

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

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

W3C 建议在 html 标记中使用 lang 和/或 xml:lang 属性：

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

Google 推荐 meta http-equiv：

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

【讨论】：

你能帮我如何编码，不管你上面用例子说了什么。我应该用新语言创建新页面并链接它们吗？
您不需要创建新页面。元标记可以放置在任何地方，但通常按照惯例通常位于页面顶部附近。每个页面通常只有一个html 标签，您可以在其中添加 lang/xml:lang 属性。
非常感谢您。如果页面是英文的，只需更改“content=other language”，页面页面会在浏览器加载页面时自动翻译。