如果你网站中使用了 ````alert(...)````、````confirm(...)```` 会发现，即使你启用了 [监控页面动态渲染的文本进行自动翻译](/4067.html) 但是弹出提示它依旧没有被翻译，因为像是 alert 并不会触发dom的改变，而通常像是弹出提醒现在都是有UI框架提供更好看的弹出提示效果，直接使用js原本的 alert 做弹出提示非常少，所以如果你网页中直接使用了 alert 弹出提示，文字没有被翻译，你可以用第三方的弹出提示来替代 alert ## msg.js 轻量级js消息提醒组件 它是一个轻量级js消息提醒组件，只有几kb，加载中、成功提示、失败提示等，引入msg.js，一句调用，不依赖任何三方js，方便，简单。 具体使用方式可查看开源仓库： Github 仓库使用方式查看 : https://github.com/xnx3/msg | 下载: https://github.com/xnx3/msg/raw/master/msg.js Gitee 仓库使用方式查看 : https://gitee.com/mail_osc/msg | 下载: https://gitee.com/mail_osc/msg/raw/master/msg.js

## 场景 网页加载，且要进行翻译时，翻译之前，隐藏当前网页的文本。 当点击切换语言按钮后，会刷新当前页面，然后再进行翻译。 这时会出现这种现象：刷新当前页面后，会先显示原本的文本，然后再翻译为切换为的语种，体验效果有点欠缺。 而这个的作用，就是增强用户视觉的体验效果，在页面加载（刷新）时，如果判定需要翻译(之前的页面触发过翻译为某个语种了)，那么就会自动隐藏所有网页中的文本，当翻译完成后，自动将网页中的文本显示出来 。 注意：这个需要在body标签之前执行，需要在head标签中执行此。也就是加载 translate.js 以及触发此都要放到head标签中

比如这种场景： 网站有三个页面： index.html 、about.html 、new.html 这三个页面，这三个页面全部都是中文的。 index.html 已经按照 [快速接入文档](532777 ) 完成了接入，并且能正常使用了。 此时，在 index.html 切换为英文进行浏览，如果点击跳转到 about.html 时，怎么能让 about.html 也能以英文来展示？ 这个其实 index.html 怎么加入的 translate.js ，你 about.html 也怎么加入就好了。 不过有一点需要注意： ```` translate.execute(); ```` 这行是起到翻译进行执行的，也就是你加入 translate.js 后，在加入的最后别忘记了这一行代码，不然它是不会被自动翻译的。 ## 原理 你在 index.html 翻译为英文后，translate.js 会自动将你翻译为英文这个动作，及翻译为的语种，存入你的浏览器缓存 (localStorage 的 to 参数) 。 当你跳转到 about.html 页面时，如果触发了 ````translate.execute();```` ，它会自动去你浏览器寻找这个翻译为的目标语种(localStorage 的 to 参数的值)，如果发现有值，那么说明你在上个页面已经切换到某个语种进行浏览了，那么在此页面也应该以这个语种浏览，他会自动进行语种翻译，让 about.html 也以这个翻译的目标语种进行浏览。 同样，再点击 new.html 页面时，它依旧会以翻译之后的语种浏览。 此时，如果你在 new.html 页面中切换为 韩语浏览，那么你再点 index.html 进入后，index.html 会以韩语的文字给你观看。 ## 实际使用 实际项目使用，你应该找个公共的尾部（所有页面都使用的尾部）、或者所有页面都会使用的一个js，将 translate.js 有关设置放到这个js、或者公共的尾部里。 这样就避免每个页面都要引入它了

[TOC] 默认不设置翻译通道时，使用的是我们开源的翻译通道，这个翻译通道绝大部分时候都是很正常的，但是毕竟用户基数太大，每日数十亿次的翻译，会有偶然的阻塞变慢的情况。 无服务器的翻译通道，也就是 [translate.service.use('client.edge');](4081.html) 通过这个设置所指定的翻译通道，它是无服务器模式的，没有服务端缓存介入，但是稳定性有一定的保证，在一些通用场景，比如你做了一个开源项目，其他人使用你的开源项目可以拿来直接用，你开源项目里的翻译通道使用这种通道就比较合适了，使用者也不需要提前进行任何配置，真的拿来就能稳定使用了。 **注意，以上两种方式使用的是google、微软的开放翻译服务，数据会外流到海外，对数据安全有要求的一定注意，数据安全请采用下面推荐二的私有部署方式** 这里我们重点推荐的是这两种通道： ## 推荐一：giteeAI 的大模型通道 【推荐，免费开放】 该通道的管理后台为 [http://admin.giteeai.zvo.cn/admin.html](http://admin.giteeai.zvo.cn/admin.html) 它是有 开源中国GiteeAI & 雷鸣云translate.js 联合打造的大模型翻译通道，提供高速、稳定的使用体验 ，大模型自助在线开通使用并启用内存缓存、文件缓存 两层加速的能力，你还可以通过管理后台就能修改某个文本翻译后的译文的文本，非常方便。 为保障资源避免被浪费，当前一个用户只限添加一个网站。如果你有多个网站，请参考 **推荐二私有部署** 的方式，自行部署翻译服务到自己服务器。 免费的企业级翻译通道，将免费提供每日翻译上限为300万的使用量、百万字符的内存级缓存、五百万字符的文件级缓存， 如果你是普通的企业网站，它基本就够了。 如果你想要更高的额度，可以购买相关套餐的方式进行提升。 如何接入使用： #### 1. 免费注册开通 网址： http://admin.giteeai.zvo.cn/admin.html 注意，如果你有邀请码，使用邀请码注册，将获得免费每日300万的翻译上限，而如果不使用邀请码注册，免费的日翻译上限只有100万！ 你可以加 [QQ群](4030.html) 向其他群友求助索要邀请码 #### 2. 添加你的域名 注册成功后，进入 域名管理，按照引导提示，查看当前的功能及说明，然后将你的域名添加进去  #### 3. 开通大模型 按照引导提示，冲入1元余额，开通按量计算的大模型通道，如下图所示：  它会按照你进行翻译时，实际使用的大模型Tokens自动从你充值的余额扣费。 如果你就完全不想花钱，你记得选 qwen3-8B，这个当下是可以免费给你使用的。 如果你想获得更好的翻译效果及阅读通顺度，你可以选 Qwen3-30B-A3B （甚至 Qwen3-32B） #### 4. 在你的网站中接入此翻译通道 然后在你原本接入 translate.js 的地方，只需增加一行代码，即完成接入。 如果你有设置 translate.service.use('client.edge'); 需要你将其改为 : translate.service.use('giteeAI'); 如果你没有设置翻译通道，那就直接在 translate.execute(); 的前面增加一行: translate.service.use('giteeAI'); 如此，就完成了翻译通道的切换。你可以去你这个域名的页面，切换语言试试效果 如下图所示，这里也有此说明  #### 5. 看使用数据 当你网站进行接入使用后，再回到翻译通道的控制台，刷新一下，即可看到已经产生了具体的数据。 这个也是用来判定你网站是否已经正常接入。  #### 扩展功能. 对翻译后的译文进行修改精调 它本身是一个通用的翻译，如果有的地方你感觉翻译结果不满意，你可以进行手动调整。 比如，下图的页面：  这里 开启内存缓存 这个文本，正常翻译为英文，是这样的：  我想把它改成： kaiqi neicun huancun 那么可以通过翻译通道控制台中的 译文管理 ，来进行调节设置：  如上图，在翻译文本 的输入框中，可以输入前几个字符，来进行搜索这几个字符相关的译文，然后点击右侧的 搜索 按钮，进行搜索跟着几个字有关的译文。 我们这里要修改的是第一个，点击英文的修改按钮  即可打开修改窗口，进行修改  修改完后，进行保存。 然后，再去网站看一下。不过一定要记得，清除浏览器的缓存：  通过审核元素 - 应用 - 本地存储空间 ，找到这个网站，在其上右键，出现 清除选项，点击清除。 然后你在刷新这个页面，切换为英文，即可看到，翻译结果已经变过来了：  如此，你已经完成了整个的接入！ （提示：每当进行设置译文的内容后，文件缓存的用量会自动给你清空，以保证你的译文修改后的结果实时生效） ## 推荐二：私有化部署翻译服务【收费】 如果您是网络公司，有多个网站（或域名）需要使用，那么推荐一的方式一个账户只限一个的话就太局限了， 你可以私有部署一套相同的服务到自己服务器，可以自由添加多个域名，无上限。 具体私有部署的方式，可参考: [http://translate.zvo.cn/391129.html](https://translate.zvo.cn/391129.html) 这里私有部署完成后，你可以直接访问，按照提示引导，开通 giteeAI 大模型平台的接入，直接使用。 如果你是没有网络环境的场景，也可以私有部署大模型来做无网络环境下的整套自动化翻译切换方案。 另外如果你又没有网络，硬件配置又极低， 我们有专门针对此场景发布的大模型，支持百种语种的翻译，在无GPU的1核2G内存的超低配电脑即可运行 [https://huggingface.co/xnx3/translate100](https://huggingface.co/xnx3/translate100)

## 快速接入体验 在网页最末尾， ```````` 之前，加入以下代码，一般在页面的最底部就出现了选择语言的 select 切换标签 ```` ```` 点击切换语言，即可快速体验效果。 如果对哪个地方不满意，还可以对其进行精准微调。 任何你所不满意的地方，都可以按照你的心意进行微调。如果不满足，那你告诉我，我们针对性增加这个功能。 **注意， translate.js 请下载到你自己服务器** 为保证你翻译的稳定，请将 translate.js 下载，放到自己服务器上引入，保证翻译js的稳定载入，免得在线的 translate.js 流量高峰时加载慢或无法加载，导致你网页翻译异常。 ## 它的原理 它的原理是，对页面的所有node元素进行扫描、识别，将文本进行抽离处理，然后通过调用翻译API接口进行翻译，翻译完毕后，将结果在进行赋予，于是，你就看到了语言切换的效果。 将其加到页面最尾部，也是为了保证当页面渲染后、文本都正常显示出来后，在去对元素进行扫描。 后端翻译开放API接口有我方跟开源中国 GiteeAI 联合定制，针对某些特定场景，比如工厂、政务的无网络环境、以及大企业需要的极高速翻译等，我们也有 [翻译服务私有化部署版本](391129.html) 可供选择。 ## 注意事项 * ````translate.execute();```` 是最终触发翻译的自动执行，如果你只有设置，没有这一行，它是不会触发翻译的。 * 另外如果你当前业务需求不需要页面加载完后自动进行翻译，只需要手动点击按钮后才会触发翻译，那么可以通过点击按钮后触发 ````translate.changeLanguage('english');```` 这个来 [主动进行切换自己想要翻译的语言](4064.html)