網(wǎng)頁自動翻譯，頁面無需另行改造，加入兩行js即可讓你的網(wǎng)頁快速具備多國語言切換能力。
特性
- 使用極其簡單。 無需任何前期準備，直接加入幾行代碼即可擁有多種語言全自動切換能力。
- 不增加工作量。 無需另行改造頁面本身，也沒有各種語言都要單獨配置的語言文件，更不需要你對頁面本身要顯示的文字區(qū)域進行代碼調(diào)用，我認為那樣對技術(shù)人員實在是太不友好了。而且它也不需要你到某某網(wǎng)站申請什么key，它本身就是開放的，拿來即用。
- 極其靈活擴展。 您可指定它只翻譯某些指定區(qū)域、切換語言時顯示下拉框還是通過擺放多個切換語言按鈕進行、可指定某些特定的元素不進行翻譯忽略……
- 自動匹配語種。 自動根據(jù)用戶所在的國家切換其國家所使用的語種
- 瞬間翻譯能力。 內(nèi)置緩存預加載機制，只要翻譯過的網(wǎng)頁，再次看時會達到瞬間翻譯的效果，給用戶的感覺就是，這個頁面本來就是這種語言的，而不是經(jīng)過第三方翻譯的。
- 永久免費使用。 本人熱衷開源，有開源項目二三十個，這個項目的初衷就是使網(wǎng)頁傳播打破語言界限，世界是一家！當然如果您項目比較大，日訪問量到了百萬級千萬級的，我們還是建議您私有化部署。
- 搜索引擎友好。 完全不影響你本身網(wǎng)站搜索引擎的收錄。爬蟲所爬取的網(wǎng)頁源代碼，它不會對其進行任何改動，你可完全放心。
- 后端翻譯開源。 在某些政府機關(guān)及大集團內(nèi)部項目中，對數(shù)據(jù)隱私及安全保密有強要求場景、或您對自有客戶希望提供自建高可靠翻譯服務(wù)場景時，您可將后端翻譯接口進行私有化部署，不走我們公開開放的翻譯接口，以做到安全保密及后端服務(wù)全部自行掌控。
在線體驗
https://res.zvo.cn/translate/else/layui_exts/demo.html
快速使用
在你的網(wǎng)頁中加入以下js
layui.extend({
translate: '{/}https://res.zvo.cn/translate/else/layui_exts/translate/translate' // {/}的意思即代表采用自有路徑，即不跟隨 base 路徑
})
//使用拓展模塊
layui.use(['translate'], function(){
var translate = layui.translate;
//設(shè)置本地語種
translate.language.setLocal('chinese_simplified');
//設(shè)置翻譯通道
translate.service.use('client.edge');
//更多設(shè)置項，可以參考 https://translate.zvo.cn/4019.html 可以更靈活的配置你的項目
//當頁面加載完后執(zhí)行翻譯操作
window.onload = function () {
translate.execute();
};
});
實際使用場景示例
普通網(wǎng)站中點擊某個語言進行切換
如下圖所示，網(wǎng)站中的某個位置要有幾種語言切換
直接在其html代碼末尾的位置加入以下代碼：
<!-- 增加某種語言切換的按鈕。注意 ul上加了一個 class="ignore" 代表這塊代碼不會被翻譯到 -->
<ul class="ignore">
<li><a href="javascript:translate.changeLanguage('english');">English</a></li>|
<li><a href="javascript:translate.changeLanguage('chinese_simplified');">簡體中文</a></li>|
<li><a href="javascript:translate.changeLanguage('chinese_traditional');">繁體中文</a></li>
</ul>
<script>
layui.extend({
translate: '{/}https://res.zvo.cn/translate/else/layui_exts/translate/translate' // {/}的意思即代表采用自有路徑，即不跟隨 base 路徑
})
//使用拓展模塊
layui.use(['translate'], function(){
var translate = layui.translate;
translate.selectLanguageTag.show = false; //不出現(xiàn)的select的選擇語言
translate.service.use('client.edge'); //設(shè)置翻譯通道
//當頁面加載完后執(zhí)行翻譯操作
window.onload = function () {
translate.execute();
};
});
</script>
更多擴展用法及其他說明，請參考主項目
github: https://github.com/xnx3/translate
gitee: https://gitee.com/mail_osc/translate
轉(zhuǎn)自https://gitee.com/mail_osc/translate_layui
該文章在 2025/9/8 11:06:55 編輯過
400 186 1886
