自古英雄出少年
现代少年多极客

利用Google翻译实现网站国际化——js前端翻译插件

文章描述了很多作者的思路,显得繁琐和冗余,若无兴趣请直接下载资源,查阅最终解决方案

==========================最终解决方案==========================

代码静态化已经全部完成(包括面板语言文件),已添加完备的注释,请直接查阅;

下载插件js谷歌翻译插件

代码给出了一个自定义按钮的示例,和原始方式,所有代码均有完整的注释,请放心查阅和修改

代码预览:

先说背景

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

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

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

使用方法,在页面加入以下代码即可

//更新一下2019-04-10
一个简单的demo,现已整合部分静态资源,加快访问速度,请在文章底部下载

<html>
<body>
我爱你
<!--把button放在右下角,这个是可以随意修改的,你可以改成一个链接一个图片之类的-->
<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.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>

</html>

没错,这样就行了,来看看页面效果:

demo效果:

真实项目效果:


效果非常好。

==========================追更20180914==========================

今天又遇见一个问题,记录下,是关于清除cookie的。

由于原生google翻译插件样式不太友好,所以自己用代码追加覆盖原来的样式,

改成一个工具栏,并且去除原来顶部的操作框(参数autoDisplay:false即可,如无效请看文章底部的其他处理方法),

去除这个顶部操作框

改成这种

工具栏html,只是个例子
<div id="toolbox" class="toolbox" @click="hideFeedback()">
    <ul @click.stop>
        <li id="google_translate_element">
        </li>
        <li class="qr-code">
            <img src="${staticPath}/static/images/app.svg"/>
            <p>APP</p>
        </li>
        <div class="qr-code-wrap">
            <img src="${staticPath}/static/images/QR-Code.jpg"/>
        </div>
        <li @click.capture="toFeedback()">
            <img src="${staticPath}/static/images/feedback.svg"/>
            <p>Feedback</p>
        </li>
        <li @click.capture="scrollTop()">
            <img src="${staticPath}/static/images/scrolltop.svg"/>
            <p>Top</p>
        </li>
    </ul>
    <div id="feedback" v-show="feedbackShow">
        <div class="shade-bg"></div>
        <div class="signin-wrap">
            <div class="signin-container">
                <div class="signin-content" @click.stop>
                    <div class="signin-header">Feedback</div>
                    <div class="signin-body">
                        <form class="signin-form">
                            <label>` + i18n['feedbackContent'] + `</label>
                            <textarea name="feedbackContent"  v-model="feedbackContent" placeholder="please input feedback content..."></textarea>
                            <div class="submit" @click="feedbackSubmit">` + i18n['button.feedbackSubmit'] + `</div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
赞(0)
未经允许不得转载:极客少年 » 利用Google翻译实现网站国际化——js前端翻译插件
分享到: 更多 (0)

极客少年

大道至简码支付源码