记录|给网站添加谷歌多语言翻译插件

  • 首页 > 笔记
  • 作者:jaz
  • 时间: 2021年10月6日 11:56
  • 字数:5743 个
  • 字号:
  • 评论:2 条
  • 浏览:1904 次
  • 百度:百度已收录
  • 分类: 笔记
  • 时间:2021-10-6 11:56 热度:1904° 评论:2 条 

    粗略记录一下


    谷歌翻译的js,

    因为会加载几个域名google.com的gif请求不到的严重拖慢网页翻译,没想到好办法



    <script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <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',
                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
                    // 自动显示翻译横幅,就是翻译后顶部出现的那个
                    autoDisplay: true,
                    // 还有些其他参数,由于原插件不再维护,找不到详细api了,将就了,实在不行直接上dom操作
                },
                'google_translate_element' // 触发元素的id
            );
        }
    </script>


    //右下角切换语言
    <div id="google_translate_element" style="position:fixed;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
    //css隐藏顶端的翻译选项
    <style>.goog-te-banner-frame{display: none;}body{top: 0px !important;}</style>


    插件以cookie值自动翻译,以下利用js设置googtrans为空时添加值为/zh-CN/en(默认进去翻译成英文)

    另外可以以链接hash设置翻译语言,如:

    https://xxx.com#googtrans(zh-CN|ja)


    function getck(name) {
        var cookie_start = document.cookie.indexOf(name);
        var cookie_end = document.cookie.indexOf(";", cookie_start);
        if (cookie_start == -1) {
            return '';
        } else {
            var v = document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length));
            return unescape(v);
        }
    }
    if (getck("googtrans") == '') {
            document.cookie = "googtrans=/zh-CN/en";
    }



    新版的js,还没研究,下面设置默认自动翻译成一种语言,没有切换选项


    <script type="text/javascript" src="https://translate.google.cn/translate_a/element.js?cb=gtElInit&amp;client=wt"></script>
    <script type="text/javascript">
    var gtElInit = function gtElInit() {
        var lib = new google.translate.TranslateService();
        lib.translatePage('zh-cn', 'en', function () {});
    }
    </script>



    考虑用法


    <div style="text-align:center;"><p>翻译演示<p>
    <button onclick="change(this);"  value="">中文</button>
    <button onclick="change(this);"  value="en">英文</button>
    <button onclick="change(this);"  value="ja">日文</button>
    
    <select id="select" onchange="change(this)" class="adres-input">
    	<option value="">中文</option>
    	<option value="en">英文</option>
    	<option value="ja">日文</option>
    	<option value="ko">韩文</option>
    	<option value="ru">俄文</option>
    </select>
    </div>
    
    <script type="text/javascript" src="https://translate.google.cn/translate_a/element.js?cb=gtElInit&amp;client=wt"></script>
    <script>
    //var gtElInit = function gtElInit() {
    //    var lib = new google.translate.TranslateService();
    //    lib.translatePage('zh-cn', 'en', function () {});
    //}
    function change(obj) {
        var lang = obj.value;
        var lib = new google.translate.TranslateService();
        lib.translatePage('zh-cn', lang, function () {});
    }
    </script>



    翻译接口


    不需要提供 tk 参数,client 类型里 t 和 webapp 需要,at 和 gtx 不需要


    curl 'https://translate.google.com/translate_a/single?client=at&sl=zh-CN&tl=en&dt=t&q=%E6%88%91%E6%98%AF%E5%B8%85%E9%80%BC'


    curl 'https://translate.google.com/translate_a/single?client=gtx&sl=zh-CN&tl=en&dt=t&q=%E6%88%91%E6%98%AF%E5%B8%85%E9%80%BC'




    相关资料:

    https://www.coderepublics.com/howto/how-to-google-translate.php

    https://blog.csdn.net/panshiqu/article/details/104193607


    正文到此结束
    您阅读这篇文章共花了: 
    本文链接://blog.jialezi.net/?post=176
    版权声明:若无特殊注明,本文皆为《jaz》原创,转载请保留文章出处。
    捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗

    已有2条吐槽

    匿名

    2021-10-06 22:30 IANA保留地址
    改成 google.cn 呢?  不是有个针对国内的翻译 https://translate.google.cn/
     未知操作系统   未知浏览器

    jialezi

    2021-10-15 13:02 美国 CZ88.NET
    @匿名:已经的cn的了。但是会加载一个在com的小图标,会卡住
     未知操作系统   未知浏览器

    返回顶部    返回首页    手气不错    捐赠支持         
    版权所有:Jialezi `s blog    站点维护: jaz    +主题:海云彩色