我的页面国际化的三种尝试(谷歌搜索、translater.js、 jquery i18n)
本文为原创,转载请附加我的博客链接,谢谢。
我做的项目突然要做国际化,作为一个小白我做了很多尝试,并取得了一些结果。希望这篇博客能够帮到你。
一、第一种设想直接把谷歌翻译的插件引入页面,再使用jquery进行插件的语言切换,这个方案有几个问题:
1、 插件初始化就需要一些时间
2、 切换语言因为是在线翻译所以需要等一些时间、对于长句子的翻译很不准确,所以对于网站的开发,在线翻译是不可取的。
下面是我的尝试:
1)在需要翻译的页面的html开头里加
<meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c"></meta>
2)这是选择语言的下拉框,可以放在头部,根据网站内容看可以放到哪里都可以。可以自己修改样式,跟着浮动的话加样式。
<div id="google_translate_element"></div>
在页底加
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"> </script>
3)js代码
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
这样你的页面上就会有一个谷歌搜索的搜索栏。不是国际化的最佳选项。
二、第二种设想就是找到了一个插件translate.js.这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面,这种解决方案显得更简单。它没有依赖,压缩只有只有(~2kb).
我先说弊端吧。它的使用方法就是在页面上出现中文的地方写上中文和英文 两种注释,然后通过切换来达到翻译页面的目的。Jquery环境
1、 首先如果你的页面是少量的页面,这种方法完全没有问题。如果你的页面很多,需要写的注释就会有点多。
2、 后期再想扩展其他的语言也会有点困难。
3、 好的一点是,它使用起来非常简单。后期需要通过js变动的部分也可以通过往上拼注释的方式来完成。
下面来讲用法:
这个插件可以当做模块来安装:
打开项目所在的文件夹。右键git bash here
之后再命令行中输入
npm install translater.js
等待插件安装
安装好插件接下来的事情就变的很简单了。
1、 在页面上引入这个插件(具体路径取决于你放的目录)
<script type="text/javascript" src="/assets/scripts/plugins/translater.min.js"></script&g