4. 国际化（多语言）支持

本程序虽主要面向华人群体，但支持多语言也是完善网站的一种方式。本文会介绍通过使用 Google 翻译的网站插件来达到多语言的目的。

---

注意事项

1. 在线机器翻译服务由 Google 提供
2. 请注意不是所有内容都是可以直接翻译的
3. 机器翻译质量存在问题，少数情况可能会出现错误的意思，建议慎重使用
4. 翻译插件美观度并不高，且目前主流的 Chromium 框架出浏览器均自带翻译功能，且不主流的浏览器也都带有翻译功能。苹果的 Safari 浏览器也自带翻译功能。不自带翻译功能的浏览器大多也都可以使用插件来完成。请仔细理性考虑是否需要使用翻译插件来舍弃网站的加载速度与部分美观度。多加载一个内容网站就会多读进度条，建议斟酌考虑！

---

将下面的代码粘贴到网站后台的 客服代码 或 统计代码 部分，网站将多出 Google 翻译插件来实现多语言支持。

<div id="google_translate_element" style="position:fixed;bottom:64px;right:6px;z-index:2000;opacity:0.7"></div>
<script>
  function googleTranslateElementInit() {
    new google.translate.TranslateElement(
      {
        pageLanguage: 'zh-CN',
        includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es,th,vi',
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
        autoDisplay: true,
      },
      'google_translate_element'
    );
  }


  function googleTranslateHackForPlaceholder() {
    var inputWithPHsContainer = [];

    // proxys for translate
    var proxys = document.createElement('div');
    proxys.style.display = 'none';
    document.body.appendChild(proxys);

    function findAllPlaceHolders() {
      // Find all inputWithPHs
      var inputWithPHs = document.querySelectorAll('input[placeholder]');
      // convert to array
      inputWithPHs = Array.prototype.slice.call(inputWithPHs);
      inputWithPHs.forEach(function (input) {
        var added = false;
        for (var i = 0; i < inputWithPHsContainer.length; i++) {
          if (inputWithPHsContainer[i].input === input) {
            added = true;
            break;
          }
        }
        if (!added) {
          var textElement = document.createElement('div');
          textElement.innerText = input.placeholder;
          proxys.appendChild(textElement);
          inputWithPHsContainer.push({
            input: input,
            proxy: textElement
          });
        }
      });

      for (var i = 0; i < inputWithPHsContainer.length;) {
        var exists = false;
        for (var j = 0; j < inputWithPHs.length; j++) {
          if (inputWithPHsContainer[i].input === inputWithPHs[j]) {
            exists = true;
            break;
          }
        }
        if (!exists) inputWithPHsContainer.splice(i, 1); // 移除已经不存在的配对
        else i++;
      }
    }

    function isTranslated() {
      if (!inputWithPHsContainer.length) return false;
      for (var i = 0; i < inputWithPHsContainer.length; i++) {
        if (inputWithPHsContainer[i].proxy.innerText !== inputWithPHsContainer[i].input.placeholder) {
          return true;
        }
      }
      return false;
    }

    function updatePlaceholders() {
      inputWithPHsContainer.forEach(function (obj) {
        obj.input.placeholder = obj.proxy.innerText;
      });
    }

    setInterval(function () {
      findAllPlaceHolders();
      console.log('inputWithPHsContainer', inputWithPHsContainer);
      console.log('isTranslated()', isTranslated());
      if (isTranslated()) {
        updatePlaceholders();
      }
    }, 10);
    findAllPlaceHolders();
  }

  googleTranslateHackForPlaceholder();
</script>
<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>