Rumah > hujung hadapan web > html tutorial > 分享一个Translater.JS巧用HTML注释翻译页面实例

分享一个Translater.JS巧用HTML注释翻译页面实例

PHP中文网
Lepaskan: 2017-06-05 09:35:37
asal
2682 orang telah melayarinya

关注 JSDigs  偶尔给你来点干的。

这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面,这种解决方案显得更简单。它没有依赖,压缩只有只有(~2kb)。

支持 IMG 文本 切换

支持 URL 加载语言

支持本地缓存选择

作为模块安装

$ npm install translater.js
Salin selepas log masuk

传统使用方法

<div>     这里是中文        <!--{jp}ここは日本語です-->     <!--{en}Here is English--></div><script src="../dist/translater.min.js" type="text/javascript"></script><script type="text/javascript">var tran = new Translater({  lang:"jp"});</script>
Salin selepas log masuk

切换语言方法通过超链接

<a href="javascript:tran.setLang(&#39;default&#39;);">English</a><a href="javascript:tran.setLang(&#39;jp&#39;);">日本語</a><a href="javascript:tran.setLang(&#39;cn&#39;);">中文</a>
Salin selepas log masuk

可以通过URL穿参数设置语言

http://.../test.html?lang=jp
Salin selepas log masuk

文本翻译添加

<div>     这里是中文        <!--{jp}ここは日本語です-->     <!--{en}Here is English--></div>
Salin selepas log masuk

图片切换

<img alt="images"  src="../img/imgae.jpg"  data-lang-cn="../img/imgae_cn.jpg"  data-lang-jp="../img/imgae_jp.jpg" />
Salin selepas log masuk
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan