利用js插件实现网页翻译功能
专栏:web开发笔记 Feb. 3, 2025, 1:56 p.m. 45 阅读
本文介绍利用js插件实现网页翻译功能

插件介绍

translate.js两行js实现html全自动翻译。无需改动页面、无语言配置文件、无API Key、对SEO友好!插件下载地址:https://github.com/xnx3/translate

快速使用

在网页源码最末尾, </html> 之前,加入以下代码。 其实就这么简单:

<script src="https://cdn.staticfile.net/translate.js/3.12.0/translate.js"></script>
<script>
    translate.language.setLocal('chinese_simplified'); 
    translate.service.use('client.edge'); //设置机器翻译服务通道,直接客户端本身,不依赖服务端 。
    translate.execute();//进行翻译 
</script>

其它常用设置

<script src="https://cdn.staticfile.net/translate.js/3.12.0/translate.js"></script>
<script>
    //设置本地语言
    translate.language.setLocal('chinese_simplified');
    //设置用edge翻译
    translate.service.use('client.edge');
    //设置显示的可选语言
    translate.selectLanguageTag.languages = 'english,chinese_simplified,chinese_traditional,korean,japanese,french,swedish,russian,spanish,vietnamese,portuguese,deutsch,arabic,romanian';
    //设置忽略某个css class
    translate.ignore.class.push('trans_ignore');
    //设置直接从url参数读取翻译的目标语言
    translate.language.setUrlParamControl('lang');
    //分别设置手机与电脑显示语言选择框的id
    if($('#menu_mobile').is(":visible")){
        translate.selectLanguageTag.documentId = 'translate1';
    }else{
        translate.selectLanguageTag.documentId = 'translate2';
    }
    //开始翻译
    translate.execute();
</script>

更多设置

更多设置可以查阅在线文档:https://translate.zvo.cn/index.html

 

感谢阅读,更多文章点击这里:【专栏:web开发笔记】
最新20篇 开设专栏