主页/ 电商学院/网站开发/用谷歌翻译做多语言的外贸网站

用谷歌翻译做多语言的外贸网站

归类:网站开发
1.先准备一个翻墙软件
2.打开网站,点击下载免费的
https://gtranslate.io/#pricing

外贸网站截图1

3.选择最简单的html,有三种模式选择,根据您的需要选择,复制
Widget code里的代码在 你的网站头部

外贸网站截图2

<!-- 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 主要是隐藏头部谷歌的翻译提示;

外贸网站截图3

<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>
因为是用的谷歌翻译 所以国内用户返回会很慢,那可不可以优化一下呢?
translate.google.com
网上有.com 改为cn 的测试一下好像是快了一点。
我们可以将element.js下载下来放在本地 引入这样会不会更快
打开文件

外贸网站截图4

查看一下代码 发现这个文件里 他向我们的网站加载了几张图片,这些图片都可以删掉或者下载都本地,将引入地址改成本地的这样避免在谷歌加载这些东西。
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看一下发现他又引入了一个谷歌的js
element_main.js

外贸网站截图5

这个js里面就是操作语言切换的代码,下载本地可以根据你的需求添加你的代码

外贸网站截图6

本事代码很乱要知道在哪改比较困难上面,根据不同的语言切换加载不同的css,谷歌的翻译是用js运行的翻译,要css生效 保存到session 在刷新页面,好处就是可以让不同语言排版不会乱,缺点就是会加载两次,这个问题暂时没有解决,这个js看的头皮发麻,没有深究。
 
外贸网站截图7
网站声明:以上文章内容为优加的原创文章,如需转载,请注明出处,谢谢合作!
0 喜欢
666 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交