如何为网站添加支持全球语种的可自定义Google Translate（HTML/CSS/JS）

一、基础嵌入与核心配置 #

先完成Google翻译的基础嵌入，这是自定义的前提：

• 在网站<head>标签内添加翻译初始化脚本：

  <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'zh-CN', // 设置网站默认语言
        includedLanguages: 'af,sq,am,ar,hy,az,eu,be,bn,bs,bg,ca,ceb,ny,zh-CN,zh-TW,co,hr,cs,da,nl,en,eo,et,tl,fi,fr,fy,gl,ka,de,el,gu,ht,ha,haw,iw,hi,hmn,hu,is,ig,id,ga,it,ja,jw,kn,kk,km,ko,ku,ky,lo,la,lv,lt,lb,mk,mg,ms,ml,mt,mi,mr,mn,my,ne,no,ps,fa,pl,pt,pa,ro,ru,sm,gd,sr,st,sn,sd,si,sk,sl,so,es,su,sw,sv,tg,ta,te,th,tr,uk,ur,uz,vi,cy,xh,yi,yo,zu', // 包含所有支持语种，可按需删减
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay: false // 关闭自动翻译栏，方便自定义触发逻辑
      }, 'google_translate_element');
    }
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  

• 在<body>合适位置添加翻译容器：

  <div id="google_translate_element"></div>
  

二、自定义样式（CSS） #

通过CSS覆盖默认控件样式，适配网站风格：

• 隐藏默认翻译栏的头部标识，调整语言选择器样式：

  /* 隐藏翻译栏顶部的Google标识和关闭按钮 */
  .goog-te-banner-frame.skiptranslate {
    display: none !important;
  }
  body {
    top: 0px !important; /* 移除默认翻译栏造成的顶部偏移 */
  }
  /* 自定义语言选择下拉框 */
  .goog-te-combo {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
  .goog-te-combo:hover {
    border-color: #666;
  }
  

• 若要改成按钮触发的弹窗式选择，可添加以下样式：

  /* 自定义翻译触发按钮 */
  .custom-translate-btn {
    padding: 8px 16px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  .custom-translate-btn:hover {
    background-color: #1976D2;
  }
  /* 调整翻译菜单弹窗位置 */
  .goog-te-menu-frame {
    top: 50px !important;
    right: 20px !important;
  }
  

三、功能自定义（JS） #

用JS实现更灵活的交互逻辑：

• 自定义触发按钮，点击弹出语言选择菜单：

  // 创建自定义按钮并绑定事件
  const translateBtn = document.createElement('button');
  translateBtn.className = 'custom-translate-btn';
  translateBtn.textContent = '翻译';
  document.body.appendChild(translateBtn);
  
  translateBtn.addEventListener('click', () => {
    const combo = document.querySelector('.goog-te-combo');
    combo && combo.click();
  });
  

• 监听语言切换事件，执行自定义逻辑：

  window.addEventListener('load', () => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          const currentLang = document.querySelector('html').getAttribute('lang');
          console.log('当前页面语言:', currentLang);
          // 这里可添加语言切换后的操作，比如修改页面标题、切换主题等
        }
      });
    });
    observer.observe(document.querySelector('html'), { attributes: true });
  });
  

• 直接指定目标语言翻译，跳过选择器：

  function translateTo(targetLang) {
    const translateInstance = google.translate.TranslateElement.getInstance();
    translateInstance && translateInstance.translatePage(targetLang);
  }
  // 调用示例：点击按钮直接翻译成英文
  document.getElementById('translate-to-en').addEventListener('click', () => {
    translateTo('en');
  });
  

四、实用技巧 #

• 不想被翻译的区域，添加class="notranslate"属性：

  <div class="notranslate">此区域内容不参与翻译</div>
  

• 自定义样式时，优先用更具体的选择器定位元素，减少!important的使用，避免样式冲突
• 确保页面HTML语义化，能提升Google翻译的内容识别准确性

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