translate.js：两行代码实现网页全自动多语言内容动态翻译

在全球化日益深入的今天，为网站提供多语言支持已成为提升用户体验和扩大受众范围的关键。传统多语言解决方案通常需要复杂的配置、大量的翻译文件以及繁琐的代码修改，而translate.js的出现彻底改变了这一现状。

寻找简单高效的网站翻译方案？translate.js 仅用两行JavaScript代码，即可为你的网站添加全自动多语言翻译功能，支持动态内容翻译，是WordPress插件和Google API的轻量级替代方案。

什么是translate.js？

translate.js是一款创新的开源JavaScript库，专注于网页多语言切换。它采用MIT开源协议，完全免费商用，只需两行核心代码即可实现HTML页面的全自动翻译，无需修改页面结构，无需语言配置文件，无需API Key，同时对SEO友好。

核心优势

极简接入：无需复杂配置，快速集成
全自动翻译：智能识别页面内容并自动翻译
无侵入设计：对现有代码几乎零影响
SEO友好：保持搜索引擎优化效果
开源免费：MIT协议，商业应用无忧

translate.js是一个免费、开源的翻译工具库，支持多种语言之间的互译，如中英文、法文、日语、韩语、德语等。它避免了API调用次数的限制和费用问题，且使用方法简单，方便快捷。

普通网页快速测试示例

随便打开一个网页
F12（审查元素）
在控制台页签下粘贴入以下代码：

  var head= document.getElementsByTagName('head')[0];
 var script= document.createElement('script');
 script.type= 'text/javascript';
 script.src= 'https://res.zvo.cn/translate/inspector_v2.js';
 head.appendChild(script);

普通网页快速接入示例

<script src="https://cdn.staticfile.net/translate.js/3.18.66/translate.js"></script>
<script>
translate.service.use('client.edge'); //设置机器翻译服务通道，相关说明参考 http://translate.zvo.cn/545867.html
translate.listener.start(); //开启页面元素动态监控，js改变的内容也会被翻译，参考文档： http://translate.zvo.cn/4067.html
translate.execute();//完成翻译初始化，进行翻译
</script>

在网页最末尾， </html> 之前，加入以下代码，一般在页面的最底部，就会出现选择语言的 select 切换标签。添加上述代码后，页面底部将自动出现语言选择下拉框，用户可以轻松切换界面语言。详细解说

工作原理

translate.js的工作原理十分巧妙：

内容扫描：对页面所有DOM元素进行扫描，识别可翻译文本
文本抽离：提取需要翻译的文本内容
API翻译：通过配置的翻译服务通道进行翻译
结果渲染：将翻译结果重新赋予对应元素

整个过程自动完成，无需人工干预。

高级功能与微调

虽然基础使用极其简单，但translate.js提供了丰富的微调指令，满足各种复杂需求：

语言控制

translate.changeLanguage('english'); // 主动切换语言
translate.language.setLocal('chinese_simplified'); // 设置本地语种
translate.language.getCurrent(); // 获取当前显示语种

内容过滤

translate.ignore.text.push('你好'); // 忽略特定文本
translate.ignore.id.push('test'); // 忽略特定ID元素
translate.ignore.class.push('test'); // 忽略特定class元素

高级配置

translate.setAutoDiscriminateLocalLanguage(); // 自动识别用户语种
translate.language.setUrlParamControl(); // URL参数控制显示语种
translate.selectionTranslate.start(); // 启用划词翻译

除了基础翻译功能，translate.js还提供了一系列高级特性，例如自动识别并翻译图片中的文字内容，监控AJAX请求，实时翻译动态加载的内容，自定义翻译术语，确保专业词汇准确一致，且监控翻译性能，优化用户体验。

最佳实践建议

自托管JS文件：将translate.js下载到自己的服务器，确保稳定加载
合理配置缓存：根据业务特点设置合适的缓存策略
选择性翻译：对不需要翻译的内容进行排除，提升性能
渐进式实施：先在小范围测试，再全面推广

translate.js重新定义了网页多语言实现的范式，将复杂的技术难题简化为几行优雅的代码。无论是个人项目还是企业级应用，它都能提供高效、稳定、易用的多语言解决方案。其开源免费的特性更是降低了技术门槛，让更多开发者能够轻松实现产品的国际化。随着人工智能技术的不断发展，translate.js也在持续进化，集成更先进的翻译引擎，提供更精准的翻译结果。未来，它将继续致力于降低多语言实现的复杂度，助力更多产品走向全球市场。

DEMO:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多语言网站示例</title>
    <!-- 引入本地的 translate.js -->
    <script src="./translate.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .language-switcher {
            margin: 20px 0;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 5px;
        }
        .language-btn {
            padding: 8px 16px;
            margin: 0 5px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            border-radius: 3px;
        }
        .language-btn.active {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
        .content {
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="language-switcher">
        <h3>选择语言 / Select Language:</h3>
        <button class="language-btn active" onclick="switchLanguage('chinese_simplified')">中文</button>
        <button class="language-btn" onclick="switchLanguage('english')">English</button>
        <button class="language-btn" onclick="switchLanguage('japanese')">日本語</button>
        <button class="language-btn" onclick="switchLanguage('korean')">한국어</button>
        <button class="language-btn" onclick="switchLanguage('french')">Français</button>
        <button class="language-btn" onclick="switchLanguage('german')">Deutsch</button>
    </div>

    <div class="content" id="translatable-content">
        <h1>欢迎来到我的多语言网站</h1>
        <p>这是一个演示如何使用 translate.js 实现多语言切换的示例。</p>
        
        <h2>功能特点</h2>
        <ul>
            <li>支持多种语言实时切换</li>
            <li>无需刷新页面</li>
            <li>自动翻译页面内容</li>
            <li>简单易用的API</li>
        </ul>
        
        <h2>联系我们</h2>
        <p>电子邮件：contact@example.com</p>
        <p>电话：+86 123-4567-8900</p>
        
        <div class="no-translate">
            <p><em>这个区域的内容不会被翻译（class="no-translate"）</em></p>
        </div>
    </div>

    <script>
        // 页面加载完成后初始化翻译功能
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化翻译配置
            translate.service.use('client.edge'); // 使用浏览器内置翻译（免费）
            // 或者使用自有翻译服务：translate.service.use('translate.service');
            
            // 设置页面默认语言
            translate.language.setLocal('chinese_simplified');
            
            // 设置忽略翻译的元素（可选）
            translate.ignore.class.push('no-translate');
            
            // 启动监听器，自动检测页面变化
            translate.listener.start();
            
            // 根据浏览器语言自动切换（可选）
            autoDetectLanguage();
            
            console.log('translate.js 初始化完成！');
        });

        // 语言切换函数
        function switchLanguage(lang) {
            // 更新按钮状态
            document.querySelectorAll('.language-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 切换语言并执行翻译
            translate.changeLanguage(lang);
            translate.execute();
            
            // 保存语言偏好到本地存储
            localStorage.setItem('preferred-language', lang);
            
            console.log('切换到语言:', lang);
        }

        // 自动检测浏览器语言
        function autoDetectLanguage() {
            const savedLang = localStorage.getItem('preferred-language');
            if (savedLang) {
                // 使用用户之前选择的语言
                setActiveButton(savedLang);
                return;
            }
            
            // 检测浏览器语言
            const browserLang = navigator.language.toLowerCase();
            let detectedLang = 'chinese_simplified'; // 默认中文
            
            if (browserLang.includes('en')) {
                detectedLang = 'english';
            } else if (browserLang.includes('ja')) {
                detectedLang = 'japanese';
            } else if (browserLang.includes('ko')) {
                detectedLang = 'korean';
            } else if (browserLang.includes('fr')) {
                detectedLang = 'french';
            } else if (browserLang.includes('de')) {
                detectedLang = 'german';
            }
            
            // 如果检测到的语言不是中文，自动切换
            if (detectedLang !== 'chinese_simplified') {
                setTimeout(() => {
                    switchLanguage(detectedLang);
                }, 1000);
            }
        }

        // 设置活动按钮样式
        function setActiveButton(lang) {
            document.querySelectorAll('.language-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.textContent.toLowerCase().includes(getLanguageText(lang).toLowerCase())) {
                    btn.classList.add('active');
                }
            });
        }

        // 获取语言显示文本
        function getLanguageText(lang) {
            const langMap = {
                'chinese_simplified': '中文',
                'english': 'English',
                'japanese': '日本語',
                'korean': '한국어',
                'french': 'Français',
                'german': 'Deutsch'
            };
            return langMap[lang] || lang;
        }

        // 手动触发翻译函数（如果需要）
        function manualTranslate() {
            translate.execute();
        }

        // 重置翻译（恢复原始语言）
        function resetTranslation() {
            translate.reset();
        }
    </script>
</body>
</html>

[members_only]

<div style="text-align: center;">
    <span id="timeDate"></span><span id="times"></span> 
</div>

<script language="javascript"> 
var now = new Date();
function createtime(){
    var grt= new Date("01/01/2024 00:00:00");
    now.setTime(now.getTime()+250);
    days = (now - grt ) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if(String(hnum).length ==1 ){hnum = "0" + hnum;}
    minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if(String(mnum).length ==1 ){mnum = "0" + mnum;}
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if(String(snum).length ==1 ){snum = "0" + snum;}
    document.getElementById("timeDate").innerHTML = "本网站己运行"+dnum+"天";
    document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
}
setInterval("createtime()",250); 
</script>

<div style="text-align: center;"><strong>
	切换语言:</strong>
	<a class="ignore" href="javascript:translate.changeLanguage('english');">English</a> | 
	<a class="ignore" href="javascript:translate.changeLanguage('chinese_simplified');">简体中文</a>
</div>
<script src="https://nav.19901117.xyz/translate.js/translate.js"></script>

<script>
translate.selectLanguageTag.languages = 'english,chinese_simplified,japanese,spanish,deutsch,french,korean';
translate.request.listener.delayExecuteTime = 500;
translate.service.use('client.edge'); //设置机器翻译服务通道
translate.listener.start(); //开启页面元素动态监控
translate.selectLanguageTag.show = false;//false隐藏选择框，true打开
translate.execute();//完成翻译初始化，进行翻译
</script>

支持的语种表 – translate.service通道

corsican:科西嘉语
guarani:瓜拉尼语
kinyarwanda:卢旺达语
hausa:豪萨语
norwegian:挪威语
dutch:荷兰语
yoruba:约鲁巴语
english:英语
gongen:贡根语
latin:拉丁语
nepali:尼泊尔语
french:法语
czech:捷克语
hawaiian:夏威夷语
georgian:格鲁吉亚语
russian:俄语
chinese_simplified:简体中文
persian:波斯语
bhojpuri:博杰普尔语
hindi:印地语
belarusian:白俄罗斯语
swahili:斯瓦希里语
icelandic:冰岛语
yiddish:意第绪语
twi:契维语
irish:爱尔兰语
gujarati:古吉拉特语
khmer:高棉语
slovak:斯洛伐克语
hebrew:希伯来语
kannada:卡纳达语
hungarian:匈牙利语
tamil:泰米尔语
arabic:阿拉伯语
bengali:孟加拉语
azerbaijani:阿塞拜疆语
samoan:萨摩亚语
afrikaans:南非荷兰语
indonesian:印尼语
danish:丹麦语
shona:修纳语
bambara:班巴拉语
lithuanian:立陶宛语
vietnamese:越南语
maltese:马耳他语
turkmen:土库曼语
assamese:阿萨姆语
catalan:加泰罗尼亚语
singapore:僧伽罗语
cebuano:宿务语
scottish_gaelic:苏格兰盖尔语
sanskrit:梵语
polish:波兰语
galician:加利西亚语
latvian:拉脱维亚语
ukrainian:乌克兰语
tatar:鞑靼语
welsh:威尔士语
japanese:日语
filipino:菲律宾语
aymara:艾马拉语
lao:老挝语
telugu:泰卢固语
romanian:罗马尼亚语
haitian_creole:海地克里奥尔语
dogrid:多格来语
swedish:瑞典语
maithili:迈蒂利语
thai:泰语
armenian:亚美尼亚语
burmese:缅甸语
pashto:普什图语
hmong:苗语
dhivehi:迪维希语
chinese_traditional:繁體中文
luxembourgish:卢森堡语
sindhi:信德语
kurdish:库尔德语（库尔曼吉语）
turkish:土耳其语
macedonian:马其顿语
bulgarian:保加利亚语
malay:马来语
luganda:卢干达语
marathi:马拉地语
estonian:爱沙尼亚语
malayalam:马拉雅拉姆语
deutsch:德语
slovene:斯洛文尼亚语
urdu:乌尔都语
portuguese:葡萄牙语
igbo:伊博语
kurdish_sorani:库尔德语（索拉尼）
oromo:奥罗莫语
greek:希腊语
spanish:西班牙语
frisian:弗里西语
somali:索马里语
amharic:阿姆哈拉语
nyanja:齐切瓦语
punjabi:旁遮普语
basque:巴斯克语
italian:意大利语
albanian:阿尔巴尼亚语
korean:韩语
tajik:塔吉克语
finnish:芬兰语
kyrgyz:吉尔吉斯语
ewe:埃维语
croatian:克罗地亚语
creole:克里奥尔语
quechua:克丘亚语
bosnian:波斯尼亚语
maori:毛利语

[/members_only]

Github项目 / 代码收藏

translate.js：两行代码实现网页全自动多语言内容动态翻译

核心优势

工作原理

高级功能与微调

语言控制

内容过滤

高级配置

最佳实践建议

You may also like...

发表回复取消回复

你能不能像我这样，成熟点！

近期文章

Github项目 / 代码收藏

核心优势

工作原理

高级功能与微调

语言控制

内容过滤

高级配置

最佳实践建议

You may also like...

Qwen Edit图像编辑模型带着2509版本！多图融合与一致性能力加强！

告别网络限制！利用Cloudflare免费服务，在国内稳定调用Gemini API

Brinkster免费虚拟主机评测：老牌服务商的轻量级免费托管方案​

发表回复 取消回复

你能不能像我这样，成熟点！

近期文章

做人，最重要的是开心！

Brinkster免费虚拟主机评测：老牌服务商的轻量级免费托管方案

发表回复取消回复