离线翻译及自动生成配置

支持离线翻译能力

使用场景

  1. 无网络环境的场景
  2. 对翻译速度有极高要求的场景
  3. 对翻译的结果有不满意想要手动调整翻译结果的场景

使用方式

1. 代码中开启离线翻译控制面板

加入以下这行代码

  1. translate.office.showPanel();

至于加在 translate.execute(); 的前面还是后面,这个无所谓

访问这个页面,即可看到如下图,右下角已经显示了一个 导出配置信息 的区域

2. 导出翻译的配置信息

比如当前页面时简体中文,我离线翻译是针对的繁体中文,步骤如下:

  1. 先将当前页面切换为繁体中文
  2. 点击右下角的 导出配置信息 按钮,即可导出当前简体中文跟繁体中文的翻译配置了。

    这里可以看到,简体中文跟翻译结果繁体中文,都是一一对应的,你如果感觉某个的翻译结果不太准确,你可以手动去进行编辑翻译结果。

3. 代码中设置离线翻译数据

将第2步中导出的配置信息复制,粘贴到代码中,即可完成离线翻译数据的设置。
需要注意的是,导出的代码一定要加在 translate.execute(); 前面才行。如下所示:

  1. //加入离线翻译-切换为繁体中文的配置
  2. translate.office.append('chinese_traditional',`
  3. 库=庫
  4. 代码=代碼
  5. 引入=引入
  6. 版本,=版本,
  7. 简介:=簡介:
  8. 语言切换示例:=語言切換示例:
  9. 当前为 =當前為
  10. 选择框切换语言:=選擇框切換語言:
  11. 国际化,网页自动翻译,同谷歌浏览器自动翻译的效果,适用于网站。=國際化,網頁自動翻譯,同谷歌瀏覽器自動翻譯的效果,適用於網站。
  12. 进行翻译=進行翻譯
  13. 按钮切换语言:=按鈕切換語言:
  14. 如果你网页中有=如果你網頁中有
  15. 版本参见:=版本參見:
  16. 网页自动翻译,页面无需另行改造,加入两行 =網頁自動翻譯,頁面無需另行改造,加入兩行
  17. 即可让你的网页快速具备多国语言切换能力!=即可讓你的網頁快速具備多國語言切換能力!
  18. 使用方式:=使用方式:
  19. 在页面最底部加入=在頁面最底部加入
  20. 注意,要在页面最底部加。如果你在页面顶部加,那下面的是不会被翻译的=注意,要在頁面最底部加。如果你在頁面頂部加,那下面的是不會被翻譯的
  21. 请求更新了数据,要对其更新的数据进行翻译时,可直接执行 =請求更新了數據,要對其更新的數據進行翻譯時,可直接執行
  22. js=js
  23. js =js
  24. v1 =v1
  25. v2 =v2
  26. ajax=阿賈克斯
  27. demo=演示
  28. hello, =你好,
  29. v1.html=v1.html
  30. select=選擇
  31. `);
  32. //翻译操作
  33. translate.execute();

4. 关闭翻译控制面板

当所有页面的离线配置信息都提取完毕后,就可以关闭翻译控制面板了,也就是讲第1步中的 translate.office.showPanel(); 注释掉即可。

其他说明

  1. 离线翻译的配置 translate.office.append(…) 可以出现多个,出现多个时会进行追加操作,每个都会生效。比如当前页面既要翻译为繁体中文、又要翻译为英文的场景。
  2. translate.office.append(…) 其中第一个参数是翻译为什么语种,第二个参数是翻译的内容对照。 = 前面是页面原本的单词或句子,= 后面是翻译为的单词或句子。注意的是 = 前面的不要进行改动,如果你想调整翻译的结果,只需要把 = 后面的翻译结果进行修改即可。
  3. 如果您是无网络环境下使用,您还要加入手动切换的入口。比如你网页本身是中文的,离线翻译支持切换为英文、法语,那么切换时肯定需要某个动作进行触发,比如用户点击了 “切换为英文” 的按钮,那么网页才会切换为英文。这个就需要配合 主动进行语言切换 来一起使用。
  4. 使用离线翻译时,如果网页中出现了一些动态文本,比如显示当前时间的,那这个文本是每次查看都是在变动的,显然做不到的离线翻译中去的,那这种的,不在离线翻译配置中的文本,会自动通过翻译接口来获取翻译结果。而且这个过程只是进行增量翻译,也就是只是把离线翻译中没有包含到的词或者句子,才会进行通过接口翻译。而包含在离线翻译配置中的词或者句子,就不会再通过翻译接口来进行了。有效的降低翻译接口数据传输。
  5. 离线翻译控制面板的导出弹窗有 msg.js 提供支持,其提供极其轻量级的消息提示能力。