1.先準備一個翻墻軟件
2.打開網站,點擊下載免費的
https://gtranslate.io/#pricing

3.選擇最簡單的html,有三種模式選擇,根據您的需要選擇,復制
Widget code里的代碼在 你的網站頭部

<!-- GTranslate: https://gtranslate.io/ -->
<style type="text/css">
<!--
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-te-gadget-icon {background-image:url(//gtranslate.net/flags/gt_logo_19x19.gif) !important;background-position:0 0 !important;}
body {top:0 !important;}
</style>
上面的css 主要是隱藏頭部谷歌的翻譯提示;

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE,autoDisplay: false, includedLanguages: ''}, 'google_translate_element');}
這種Google Default模式默認是全部語言 你可能 其他兩種默認是可以自己自定義翻譯那些語言
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
因為是用的谷歌翻譯 所以國內用戶返回會很慢,那可不可以優(yōu)化一下呢?
translate.google.com
網上有.com 改為cn 的測試一下好像是快了一點。
我們可以將element.js下載下來放在本地 引入這樣會不會更快
打開文件

查看一下代碼 發(fā)現這個文件里 他向我們的網站加載了幾張圖片,這些圖片都可以刪掉或者下載都本地,將引入地址改成本地的這樣避免在谷歌加載這些東西。
c._pli=b+'/translate_static/img/te_bk.gif
c._pli=b+'/translate_static/img/te_ctrl3.gif
c._pli=b+'/translate_static/img/loading.gif
c._pli=b+'/translate_static/img/mini_google.png
一個樣式
/translate_static/css/translateelement.css
一個js
/translate_static/js/element/main_zh-CN.js
可以js看一下發(fā)現他又引入了一個谷歌的js
element_main.js

這個js里面就是操作語言切換的代碼,下載本地可以根據你的需求添加你的代碼

本事代碼很亂要知道在哪改比較困難上面,根據不同的語言切換加載不同的css,谷歌的翻譯是用js運行的翻譯,要css生效 保存到session 在刷新頁面,好處就是可以讓不同語言排版不會亂,缺點就是會加載兩次,這個問題暫時沒有解決,這個js看的頭皮發(fā)麻,沒有深究。
