如何在自有网站上使用新式响应式Google Translate工具栏

可行实现方案 #

谷歌官方目前没有开放自有站点内嵌新版translate.goog样式工具栏的公开配置项，你可以通过以下方案在现有实现基础上达到相似的使用体验，全程无需跳转至谷歌服务域名：

• 方案1：自定义UI替换默认旧工具栏
  你可以保留现有谷歌翻译内嵌的核心翻译能力，通过CSS屏蔽默认的老旧工具栏和控件样式，自己开发适配站点风格、支持响应式的翻译触发控件，所有交互逻辑都在你自有站点内完成。
  1. 先添加CSS规则隐藏默认旧UI：

  /* 隐藏顶部旧工具栏 */
  .goog-te-banner-frame.skiptranslate {
    display: none !important;
  }
  /* 清除工具栏占位导致的body偏移 */
  body {
    top: 0 !important;
  }
  /* 隐藏默认控件的多余元素 */
  .goog-te-gadget-icon {
    display: none;
  }
  

  2. 修改初始化参数禁用自动弹窗，示例初始化代码如下：

  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: '你的站点默认语言码', // 例如中文填zh-CN
      autoDisplay: false,
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
  }
  

  3. 自行开发翻译按钮/下拉选择器，绑定对应谷歌翻译的触发事件即可，样式可完全自定义，移动端适配规则也可自己控制。
• 方案2：仅调用谷歌翻译API，完全自主实现全部交互
  如果需要更灵活的控制能力，可以直接调用谷歌云翻译API，所有前端交互UI完全自己开发，翻译结果直接渲染在你的站点内，体验完全可控。

目前谷歌官方暂未公布内嵌版翻译组件升级新版UI的时间表，上述自定义方案已经可以覆盖绝大多数使用场景，且可以做到和你站点现有设计风格完全统一。

内容的提问来源于stack exchange，提问作者Gabriel