跳至主要內容

6行代实现网站国际化

KNOWU大约 2 分钟奇门遁甲

前言

要实现网站国际化，就要维护两套内容，这样后续开发维护成本高。通过翻译插件，快速实现网站的国际化，任意增加多门语言。

项目选择

1.沉浸式翻译js 可自由配置翻译服务，包括openai、谷歌、微软，但是不开源。 2.translate.js v3翻译服务调用edge，开源且可私有部署。

以translate.js为例进行展示。 项目开源地址： translate: 两行js实现html全自动翻译，页面无需改动，无语言配置文件，无API Key，对SEO友好！ (gitee.com)

在线体验

  1. 随便打开一个网页
  2. 右键 - 检查
  3. 打开控制台，粘贴入以下代码，(部分要求输入"允许粘贴"）
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);
  1. Enter 回车键 ， 执行
  2. 在当前网页的左上角，就出现了一个大大的切换语言，切换试试看。 image.png

使用方法

在网页最末尾， </html> 之前，加入以下代码，一般在页面的最底部就出现了选择语言的 select 切换标签。 其实就这么简单：

<script src="https://cdn.staticfile.net/translate.js/3.2.1/translate.js"></script>
<script>
translate.language.setLocal('chinese_simplified'); 
translate.service.use('client.edge');
translate.execute();
</script>

轻松入门demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Immersive Translate JS SDK</title>
  <span id="translate"></span>
</head>
<body>

  <div class=".text">
	<p>中国大约太老了，社会上事无大小，都恶劣不堪，</p>
	<p>像一只黑色的染缸，无论加进甚么新东西去，都变成漆黑。</p>
	<p>可是除了再想法子来改革之外，也再没有别的路。</p>
	<p>我看一切理想家，不是怀念过去，就是希望将来，</p>
	<p>而对于现在这一个题目，都缴了白卷，</p>
	<p>因为谁也开不出药方。所有最好的药方即所谓希望将来的就是。</p>
  </div>
</body>


<script src="https://cdn.staticfile.net/translate.js/3.2.1/translate.js"></script>
<script>
translate.language.setLocal(''); 
translate.service.use('client.edge');
translate.execute();
</script>
</html>
image.png
image.png

进阶使用详见官方文档： 系统简介_系统简介_translate.js (zvo.cn)

Copyright © 2024 KNOWU