基於 Google translate 的網站多語言方案

前言#

網站國際化的需求在不斷升高。

i18n#

常見的 i18n 的多語言方案，需要維護多套語言檔案，缺點是工作量大，且不便於維護，某個詞改了統統都要改。

Google translate 方案#

偶爾看到一個網站，對他網站的多語言方案，感興趣搜了下，找到了下面的方案，基於 Google translate 的在線多語言翻譯方案，如下 :

<!-- 元素容器 -->
<div id=”google_translate_element”></div>

// 下面的插件加載好了，會執行此方法
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en', 
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  },'google_translate_element');
}

// 引入插件支持，cb 傳入執行的回調方法名稱
<script type='text/javascript' src='https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>

缺點#

需要科學上網，不過，考慮在國外訪問的話，方案也還行；當然，只是提供個思路，具體情況還需要考慮下。

效果#

可以訪問這個網站，科學上網的情況下，可以看到右下角的翻譯按鈕，可以切換語言，在線翻譯。