-
- Mi18n 为开源免费的前端插件,用于网站实现国际化、本地化多语言!
-
- Mi18n 为开源免费的 i18n Javascript插件,如果你发现bug或可以优化的,发送邮件至 9592994@qq.com
- 版本:version 1.0.21 . 发布时间:2021年1月18日15:50:30 . 最近更新:2024年07月18日20:19:29
- 最新版下载:Mi18n(1.0.21) Gitee:https://gitee.com/ml1023/mi18n
- 配套翻译平台 1.0.3 beta(2024.02.16) 演示 . 下载 PHP+SQLite3(如果需要支持全球各种语言,需要对该系统进行修改!)
- 依赖:jQuery 演示 Vue 中使用 Mi18n
- 翻译软件:金山词霸 . 有道词典 . 百度翻译 . 谷歌翻译
- 此技术实现方法、原理应该可以应用到软件应用程序而不仅仅 Web。
-
- 后续将优化、改进、新增...
-
- 配套翻译管理系统开发中,后续提供下载使用;(已增加)
- 生成并可导出翻译清单供各种软件产品使用;(已增加)
- 增加缓存机制;(已增加)
- 自动采集翻译内容存在缺陷;
- 优化结构、优化效率;
-
- 已经优化、改进、新增...
-
- 配套翻译管理平台更新;发布时间:2024年2月16日16:39:55
增加清空全部数据;
- 最新版本:1.0.21 最近更新时间:2023年08月17日02:24:57
修改 Mi18n.getLanguage() 返回数组;
- 最新版本:1.0.20 最近更新时间:2022年10月23日12:34:57
优化代码;
- 配套翻译平台最新版本:1.0.2 最近更新时间:2022年9月7日21:01:36
管理平台增加调用百度翻译接口;
- 最新版本:1.0.19 最近更新时间:2022年8月6日22:31:58
优化代码,增加缓存;
- 最新版本:1.0.18 最近更新时间:2022年4月27日21:38:30
当浏览器语言没有在已翻译语种内则使用默认语言;
- 最新版本:1.0.17 最近更新时间:2022年1月22日23:39:41
新增根据语种绑定自定义Class样式;
- 最新版本:1.0.16 最近更新时间:2022年1月6日17:01:02
新增自定义文本翻译内容;
- 最新版本:1.0.15 最近更新时间:2021年12月23日17:16:26
优化采集需要翻译内容部分的结构;
- 最新版本:1.0.14 最近更新时间:2021年12月23日05:19:23
新增链接属性修改;
- 最新版本:1.0.13 最近更新时间:2021年10月20日17:16:24
新增视频演示;
- 最新版本:1.0.11 最近更新时间:2021年8月19日21:51:35
增加指定语言环境隐藏元素;
- 最新版本:1.0.10 最近更新时间:2021年3月12日02:11:03
修复配套翻译管理平台翻页bug;
- 最新版本:1.0.10 最近更新时间:2021年3月6日22:30:23
修改查询接口bug,多平台共用接口时只查询对应平台的翻译内容。
- 优化配套翻译管理平台;时间:2021年2月25日20:55:34
- 最新版本:1.0.10 最近更新时间:2021年2月24日15:15:20
增加对元素属性 label="文字" 的翻译。
- 最新版本:1.0.9 最近更新时间:2021年2月24日15:13:52
修改 data-set-mi18n-stop-translate="1" 的作用,如果设置此项则不翻译该元素的值val()与文本text(),但title属性、alt、placeholder... 任然会进行翻译。
- 最新版本:1.0.8 最近更新时间:2021年2月17日01:21:31
修改说明文档内关于动态修改文本与动态修改区域内容HTML的使用方法。
- 最新版本:1.0.7 最近更新时间:2021年2月13日16:56:34
修复变量翻译bug。
- 最新版本:1.0.7 最近更新时间:2021年2月8日13:41:57
由原有的需要翻译的组件元素设置 data-set-mi18n-translate="1",修改为不需要翻译的组件、元素设置 data-set-mi18n-stop-translate="1"。
- 支持多平台共用一个国际化、本地化管理平台;时间:2021年2月5日14:39:53
- 优化配套翻译管理平台;时间:2021年2月3日20:38:02
- 配套翻译管理平台预览版已发布;发布时间:2021年2月2日08:14:55
- 最新版本:1.0.6 最近更新时间:2021年1月28日02:14:14
新增对内容内包含变量的文本进行翻译。
- 最新版本:1.0.5 最近更新时间:2021年1月22日10:23:28
优化效率,修改使用文档的错误与描述。
- 最新版本:1.0.4 最近更新时间:2021年1月22日10:23:28
修改命名规则,i18n修改为mi18n,所有data-set-*增加data-set-mi18n
- 最新版本:1.0.3 最近更新时间:2021年1月22日10:23:28
局部区域更新Bug
- 最新版本:1.0.2 最近更新时间:2021年1月21日21:32:54
增加图片翻译转换,根据语言切换对应图片URL
- 最新版本:1.0.1 最近更新时间:2021年1月20日00:56:10
增加内容翻译转换
-
- 优点(最近修改:2021年8月18日19:04:46)
-
- 对于开发者更直观,在代码里看见的描述内容既原文,而不是key;
- 主要对于许多现有项目改造实现国际化、本地化多语言,当然新项目实施也可采用此方法。
- 无需在系统或平台定义繁多的标签(TEXT="文本", LANGUAGE="语言", SETTING="设置"......)进行翻译;
- 大部分小项目几乎无需重构代码,只需要增加 class 以及配置 data-set 属性;
- data-set-mi18n-class 属性,可以帮助设计师在界面设计部分本地化;
- 无需相同页面制作多个html,极大的减少国际化、本地化多语言项目的、开发与维护成本;
- 无需不同的语种制作不同的网站;如果不同语种界面样式不同可使用 data-set-mi18n-class 绑定不同样式;
- 如果是Web项目,将部分运算负担交由前端完成,以减少服务器的运算负担且减少 http 请求降低服务器负担;
另,定制化翻译可以在不破坏界面的区域对内容进行调整!
-
- 缺点与风险(最近修改:2021年8月18日19:04:36)
-
- 会降低一些效率,在翻译的过程中增加了一次转换过程;
- 使用 MD5 建立索引,理论上存在索引并不唯一,但一般情况不太可能出现;
- 不利于SEO优化;可在页面内单独后端渲染,或单独做 SEO;
-
- 其它
-
- 使用 Mi18n 网页尽量设计简单,减少 DOM 元素,使用 iFrame 提高效率;
- 获取翻译结果可根据当前页标记,只返回当前页的内容,可以提高效率;
- 前端可以使用 LocalStorage 或 cookie 对翻译内容进行缓存,减少请求与数据传输量;
- 整站国际化、本地化多语言,前端可以根据语种调用不同语种的后端 API 接口,后端不参与任何国际化、本地化多语言页面的渲染;
-
- 演示代码
- 使用配置
-
1. Mi18n.config.autoTranslate = true; //按照浏览器语言自动替换内容
2. Mi18n.config.insertLanguageUrl = 'https://www.520internet.com/language.php?action=insert'; //配置需要翻译的内容写入接口地址
3. Mi18n.config.getLanguageUrl = 'https://www.520internet.com/language.php?action=get'; // 配置获取翻译内容的接口地址
4. 如果不需要从接口获取翻译内容,可配置翻译内容 Mi18n.config.language = '', 参看下面的接口与数据格式;
5. Mi18n.config.autoCollect = true; // 是否自动采集需要翻译的内容
6. Mi18n.config.collectDelay = 3000; //异步延时采集翻译内容的时间(毫秒)
7. Mi18n.config.listenerAllMi18nsEvent = true; // 是否侦听所有 mi18ns 的变化,如果设置为 false 则需要将会动态修改内容元素进行单独设置;
8. Mi18n.config.page = window.location.pathname; // 此设置如不为空,则只查询并返回当前页的翻译数据,如翻译数据较多可在每个页面定义不同参数;
9. Mi18n.config.website = 1; 网站编号,可在管理平台“网站”中查看;
10. Mi18n.websiteLanguage 为当前语种 可将此参数传递至后端接口返回对应数据;
11. Mi18n.cacheTime = 60*60; // 缓存时间以秒为单位,默认3600秒;
12. Mi18n.config.cacheIndex = "Mi18n" // 缓存标识,默认为 document.domain;
13. Mi18n.config.languages = ['zh', 'en', 'ja', 'ko', 'de', 'ru', 'fr', 'es', 'it', 'za', 'eg']; // 支持的语种
-
- 接口与数据格式
-
--------------------- Mi18n.config.insertLanguageUrl POST 发送 JSON 数据 --------------------- { language:['中文,你好世界!', '内容', '内容'], page: 'https://www.520internet.com' } --------------------- Mi18n.config.insertLanguageUrl POST 返回字符串 --------------------- 'true' 或 'false' --------------------- Mi18n.config.getLanguageUrl GET 返回 JSON 数据 --------------------- { "7ccaa40b21e411cc1340a582bc5fbdc9": { source_language: "中文,你好世界!", zh: "中文,你好世界!", en: "Chinese, hello world!", de: "Chinesisch. Du bist gut!", es: "¡Chino, hola mundo!", fr: "Chinois, bonjour le monde!", ja: "中国語、こんにちは世界!", ko: "중국어, 안녕하세요!" } }
-
- DEMO 代码
-
- 收集需要翻译的内容
-
Mi18n.collection($('body'));
-
- 获取语种
-
语种:Mi18n.getLanguage()[0]; 国家:Mi18n.getLanguage()[1];
-
- 翻译传入文本
-
Mi18n.translateText('中文,你好世界!'); Mi18n.translateText('中国語、こんにちは世界!');
-
- 将传入文本生成唯一索引key *
-
Mi18n.keygen('中文,你好世界!'); 异于(或许是优于)其它翻译插件,不需要定义许多 key,主要一些内容较多的平台或系统、软件产品;
zh.js { text: '文本', language: '语言', ...... } 或 zh.js { text000000001: '文本', text000000002: '语言', ...... }
-
翻译文本以及表单组件
- SELECT 下拉列表,class="mi18n" 增加至 OPTION
-
-
- 指定语言环境下隐藏显示,需要在何种语言环境隐藏元素需要设置data-set-hide-with-language="en,ja,zh"
-
英语时隐藏该元素 日语时隐藏该元素 英语、日语时隐藏该元素
-
- 动态修改文本
-
梦想
点击修改的原文:中文,你好世界! - 翻译后:中文,你好世界!
自动修改的原文: - 翻译后:
-
- 动态修改区域内容HTML,重点!当某区域内容会动态修改,需要增加 class="mi18ns",例如一些管理平台内会使用到 HTML 编辑器修改内容,前端动态载入 innerHTML 内容至显示区域。此设置慎用,会降低效率。
-
点击修改的原文:中文,你好世界! - 翻译后:中文,你好世界!
自动修改的原文:梦想 - 翻译后:
-
- TEXT包含变量,文本内包含变量需要定义 class="mi18n-var",如果该变量不需要动态翻译需设置 data-set-mi18n-stop-translate="1"。此设置会提高效率。
-
中文,你喜欢吗?你去过吗? // 翻译全部变量
中文,你喜欢吗?你去过吗? //部分变量不翻译
中文,现在时间是:,你好世界! // 提高效率不翻译不需要翻译的中文,你喜欢吗?你去过吗? // 翻译全部变量
中文,你喜欢吗?你去过吗? //部分变量不翻译
中文,现在时间是:,你好世界! // 提高效率不翻译不需要翻译的
-
- INPUT TEXT,不需要翻译的INPUT TEXT需要增加 data-set-mi18n-stop-translate="1"
-
//不需要翻译此表单元素的值 // 方法一,修改input元素的placeholder,必须使用removeAttr先删除 placeholder 再设置成其它值 // 方法二,使用 Mi18n.translateText 修改input元素的placeholder
-
- alter
-
var result = Mi18n.translateText('中文,你好世界!'); var websiteLanguage = Mi18n.cookie.get('systemLanguage') ? Mi18n.cookie.get('systemLanguage') : Mi18n.defaultLanguage; alert(result[websiteLanguage]);
-
- confirm
-
-
- TEXTAREA 文本区域
-
-
- BUTTON 按钮
-
-
- 自定义文本翻译内容,如果 data-set-language 属性有定义则优先选择该翻译内容。
-
-
- 链接
-
-
- 绑定 class,根据不同语种绑定对应的 class CSS样式
-
-
- iframe 内容同步翻译
-
// iframe 子窗口增加监听父窗口变量变化或元素变化即可 $(parent.document).find('.translate a').click(function(event) { Mi18n.changeLanguage(); }); 可以在 iframe 内增加 setinterval 定时监听父窗口的语种变化,当监测到语种变化则自动翻译 iframe 窗口内的内容!
如对效率有较高要求,可以单独绑定监听事件!
Mi18n.bindMi18nsEvent($(element, iframe));
Mi18n.bindMi18nEvent($(element, iframe));
Mi18n.translate($(element, iframe));
-
- 图片,需要设置 data-set-mi18n-src,重点!在设置 data-set-mi18n-src 时注意单'双"引号的使用,data-set-mi18n-src='{"zh":"./img/zh.png"}'
-
-
- 背景图片,需要设置 data-set-mi18n-translate-background="1" 以及 data-set-mi18n-src
-
-
- Banner 一些 Banner 图片的翻译可以将图片与文字分层
-
-
- 视频,需要设置 data-set-mi18n-src,重点!在设置 data-set-mi18n-src 时注意单'双"引号的使用,data-set-mi18n-src='{"zh":"./video/zh.mp4"}'
-
-
- Vue 中使用 Mi18n,需要引入 jQuery
-
# main.js 文件引入 jQuery与Mi18n import $ from '../static/jquery-vendor.js' import Mi18n from '../static/mi18n.js' Vue.prototype.Mi18n = Mi18n #App.vue 组件内配置 Mi18n mounted: function() { var _this = this; _this.Mi18n.config.page = ''; //window.location.pathname; _this.Mi18n.config.website = null; _this.Mi18n.config.autoTranslate = true; _this.Mi18n.config.defaultLanguage = 'zh'; _this.Mi18n.config.Languages = ['zh', 'en', 'ja', 'ko', 'de', 'ru', 'fr', 'es', 'it', 'za', 'eg']; _this.Mi18n.config.insertLanguageUrl = this.domain +'/color/mi18n/admin/api.php?action=insertMi18n'; _this.Mi18n.config.getLanguageUrl = this.domain +'/color/mi18n/admin/api.php?action=getMi18n'; _this.Mi18n.config.autoCollect = true; _this.Mi18n.config.collectDelay = 3000; _this.Mi18n.config.listenerAllMi18nsEvent = true; _this.Mi18n.config.cacheIndex = "520internet"; _this.Mi18n.init(); _this.language = this.Mjs(1.0).cookie.get('systemLanguage') ? Mjs(1.0).cookie.get('systemLanguage') : this.Mjs(1.0).client.browser.language.name(); this.$store.commit('changeWebsiteLanguage', { websiteLanguage: _this.language }); ...... ...... ...... }, updated: function() { this.Mi18n.changeLanguage(); ...... ...... }
-
- 另,多版本加载!
-
/** * 你可以在此基础上进行补充或增加新版本,然后按照版本号加载多版本以实现扩展或多版本兼容。 * @example Mi18n.changeLanguage(); Mi18n(1.0).changeLanguage(); **/ /* function Mi18n(ver) { ver = ver ? ver.toString().replaceAll('.', '_') : ''; console.log(ver); if (typeof window['Mi18n_' + ver] == 'object') { return window['Mi18n_' + ver]; } else { return Mi18n; } } */
-
- 各国家语言代码对照表
-
语言代码 国家/地区 语言代码 国家/地区 语言代码 国家/地区 af 公用荷兰语 af-ZA 公用荷兰语 - 南非 sq 阿尔巴尼亚 sq-AL 阿尔巴尼亚 -阿尔巴尼亚 ar 阿拉伯语 ar-DZ 阿拉伯语 -阿尔及利亚 ar-BH 阿拉伯语 -巴林 ar-EG 阿拉伯语 -埃及 ar-IQ 阿拉伯语 -伊拉克 ar-JO 阿拉伯语 -约旦 ar-KW 阿拉伯语 -科威特 ar-LB 阿拉伯语 -黎巴嫩 ar-LY 阿拉伯语 -利比亚 ar-MA 阿拉伯语 -摩洛哥 ar-OM 阿拉伯语 -阿曼 ar-QA 阿拉伯语 -卡塔尔 ar-SA 阿拉伯语 - 沙特阿拉伯 ar-SY 阿拉伯语 -叙利亚共和国 ar-TN 阿拉伯语 -北非的共和国 ar-AE 阿拉伯语 - 阿拉伯联合酋长国 ar-YE 阿拉伯语 -也门 hy 亚美尼亚 hy-AM 亚美尼亚的 -亚美尼亚 az Azeri az-AZ-Cyrl Azeri-(西里尔字母的) 阿塞拜疆 az-AZ-Latn Azeri(拉丁文)- 阿塞拜疆 eu 巴斯克 eu-ES 巴斯克 -巴斯克 be Belarusian be-BY Belarusian-白俄罗斯 bg 保加利亚 bg-BG 保加利亚 -保加利亚 ca 嘉泰罗尼亚 ca-ES 嘉泰罗尼亚 -嘉泰罗尼亚 zh-HK 华 - 香港的 SAR zh-MO 华 - 澳门的 SAR zh-CN 华 -中国 zh-CHS 华 (单一化) zh-SG 华 -新加坡 zh-TW 华 -中国台湾 zh-CHT 华 (传统的) hr 克罗埃西亚 hr-HR 克罗埃西亚 -克罗埃西亚 cs 捷克 cs-CZ 捷克 - 捷克 da 丹麦文 da-DK 丹麦文 -丹麦 div Dhivehi div-MV Dhivehi-马尔代夫 nl 荷兰 nl-BE 荷兰 -比利时 nl-NL 荷兰 - 荷兰 en 英国 en-AU 英国 -澳洲 en-BZ 英国 -伯利兹 en-CA 英国 -加拿大 en-CB 英国 -加勒比海 en-IE 英国 -爱尔兰 en-JM 英国 -牙买加 en-NZ 英国 - 新西兰 en-PH 英国 -菲律宾共和国 en-ZA 英国 - 南非 en-TT 英国 - 千里达托贝哥共和国 en-GB 英国 - 英国 en-US 英国 - 美国 en-ZW 英国 -津巴布韦 et 爱沙尼亚 et-EE 爱沙尼亚的 -爱沙尼亚 fo Faroese fo-FO Faroese- 法罗群岛 fa 波斯语 fa-IR 波斯语 -伊朗王国 fi 芬兰语 fi-FI 芬兰语 -芬兰 fr 法国 fr-BE 法国 -比利时 fr-CA 法国 -加拿大 fr-FR 法国 -法国 fr-LU 法国 -卢森堡 fr-MC 法国 -摩纳哥 fr-CH 法国 -瑞士 gl 加利西亚 gl-ES 加利西亚 -加利西亚 ka 格鲁吉亚州 ka-GE 格鲁吉亚州 -格鲁吉亚州 de 德国 de-AT 德国 -奥地利 de-DE 德国 -德国 de-LI 德国 -列支敦士登 de-LU 德国 -卢森堡 de-CH 德国 -瑞士 el 希腊 el-GR 希腊 -希腊 gu Gujarati gu-IN Gujarati-印度 he 希伯来 he-IL 希伯来 -以色列 hi 北印度语 hi-IN 北印度的 -印度 hu 匈牙利 hu-HU 匈牙利的 -匈牙利 is 冰岛语 is-IS 冰岛的 -冰岛 id 印尼 id-ID 印尼 -印尼 it 意大利 it-IT 意大利 -意大利 it-CH 意大利 -瑞士 ja 日本 ja-JP 日本 -日本 kn 卡纳达语 kn-IN 卡纳达语 -印度 kk Kazakh kk-KZ Kazakh-哈萨克 kok Konkani kok-IN Konkani-印度 ko 韩国 ko-KR 韩国 -韩国 ky Kyrgyz ky-KZ Kyrgyz-哈萨克 lv 拉脱维亚 lv-LV 拉脱维亚的 -拉脱维亚 lt 立陶宛 lt-LT 立陶宛 -立陶宛 mk 马其顿 mk-MK 马其顿 -FYROM ms 马来 ms-BN 马来 -汶莱 ms-MY 马来 -马来西亚 mr 马拉地语 mr-IN 马拉地语 -印度 mn 蒙古 mn-MN 蒙古 -蒙古 no 挪威 nb-NO 挪威 (Bokm?l) - 挪威 nn-NO 挪威 (Nynorsk)- 挪威 pl 波兰 pl-PL 波兰 -波兰 pt 葡萄牙 pt-BR 葡萄牙 -巴西 pt-PT 葡萄牙 -葡萄牙 pa Punjab 语 pa-IN Punjab 语 -印度 ro 罗马尼亚语 ro-RO 罗马尼亚语 -罗马尼亚 ru 俄国 ru-RU 俄国 -俄国 sa 梵文 sa-IN 梵文 -印度 sr-SP-Cyrl 塞尔维亚 -(西里尔字母的) 塞尔 sr-SP-Latn 塞尔维亚 (拉丁文)- 塞尔维亚共 sk 斯洛伐克 sk-SK 斯洛伐克 -斯洛伐克 sl 斯洛文尼亚 sl-SI 斯洛文尼亚 -斯洛文尼亚 es 西班牙 es-AR 西班牙 -阿根廷 es-BO 西班牙 -玻利维亚 es-CL 西班牙 -智利 es-CO 西班牙 -哥伦比亚 es-CR 西班牙 - 哥斯达黎加 es-DO 西班牙 - 多米尼加共和国 es-EC 西班牙 -厄瓜多尔 es-SV 西班牙 - 萨尔瓦多 es-GT 西班牙 -危地马拉 es-HN 西班牙 -洪都拉斯 es-MX 西班牙 -墨西哥 es-NI 西班牙 -尼加拉瓜 es-PA 西班牙 -巴拿马 es-PY 西班牙 -巴拉圭 es-PE 西班牙 -秘鲁 es-PR 西班牙 - 波多黎各 es-ES 西班牙 -西班牙 es-UY 西班牙 -乌拉圭 es-VE 西班牙 -委内瑞拉 sw Swahili sw-KE Swahili-肯尼亚 sv 瑞典 sv-FI 瑞典 -芬兰 sv-SE 瑞典 -瑞典 syr Syriac syr-SY Syriac-叙利亚共和国 ta 坦米尔 ta-IN 坦米尔 -印度 tt Tatar tt-RU Tatar-俄国 te Telugu te-IN Telugu-印度 th 泰国 th-TH 泰国 -泰国 tr 土耳其语 tr-TR 土耳其语 -土耳其 uk 乌克兰 uk-UA 乌克兰 -乌克兰 ur Urdu ur-PK Urdu-巴基斯坦 uz Uzbek uz-UZ-Cyrl Uzbek-(西里尔字母的) 乌兹别克 uz-UZ-Latn Uzbek(拉丁文)- 乌兹别克斯坦 vi 越南 vi-VN 越南 -越南