使用Google翻译实现网站国际化——js插件

最新推荐文章于 2024-07-16 23:26:05 发布

a5322159

最新推荐文章于 2024-07-16 23:26:05 发布

阅读量1.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/a5322159/article/details/102474151

版权

本文介绍了如何使用Google的翻译插件来轻松实现网站的多语言国际化，避免了传统方式的工作量大和维护不便。通过引入Google翻译元素的JavaScript代码，可以方便地在网页中添加翻译功能，允许用户一键翻译全文。文章还分享了如何自定义样式，移除默认横幅，以及处理翻译生命周期中的cookie问题。

摘要由CSDN通过智能技术生成

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wokuailewozihao/article/details/82021709
--------------------------------------------------------------------------------------------------
先说背景

网站已经使用常见的方式实现中英国际化，即每种语言写一套对应的语言文件，但后期要求实现多国语言国际化，如果还按照之前的方式，工作量大。
且不便于维护，某个词改了统统都要改。
//推荐一个github项目：https://github.com/hujingshuang/MTrans

因此有没有一种简单易用的及时翻译插件，类似于谷歌浏览器自带的翻译工具那种，一点即可全文翻译。

最后在网上找到了一些，要么没有文档介绍，要么就需要npm安装，nodejs支持啥的，但是我对前端并不精通，就继续找，最后找到了谷歌插件(官方已经不再维护更新：https://translate.google.com/manager/website/)，简单易用。

使用方法，在页面加入以下代码即可
//更新一下2019-04-10
一个简单的demo

<html>
<body>
我爱你

<div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
<script>
function googleTranslateElementInit() {

new google.translate.TranslateElement(
{
                //这个是当前页面的原语言，便于插件精确翻译
                pageLanguage: 'zh-CN',
            //这个是你需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
includedLanguages: 'en,zh-CN,hr,cs,da,nl,fr,de,el,iw,hu,ga,it,ja,ko,pt,ro,ru,sr,es,th,vi',
            //选择语言的样式，这个是面板，还有下拉框的样式，具体的记不到了，找不到api~~
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            //自动显示翻译横幅，就是翻译后顶部出现的那个，有点丑，这个属性没有用的话，请看文章底部的其他方法
autoDisplay: true,
//还有些其他参数，由于原插件不再维护，找不到详细api了，将就了，实在不行直接上dom操作
},
'google_translate_element'//触发按钮的id
);

}
</script>
<script src="https://translate.google

最低0.47元/天解锁文章

a5322159

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Google翻译实现网站国际化——js插件

版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/wokuailewozihao/article/details/82021709-------------------------------------------------------------------------------...
复制链接

扫一扫