translater.js页面翻译解决方案

联合创作 · 2023-09-22 04:52

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

  • 支持 IMG 文本 切换

  • 支持 URL 加载语言

  • 支持本地缓存选择

作为模块安装

$ npm install translater.js

传统使用方法

<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>

切换语言方法通过超链接

<a href="javascript:tran.setLang('default');">English</a>
<a href="javascript:tran.setLang('jp');">日本語</a>
<a href="javascript:tran.setLang('cn');">中文</a>

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

http://127.0.0.1:9005/test/test.html?lang=jp

文本翻译添加

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

图片切换

<img alt="images"  
    src="../img/imgae.jpg"  
    data-lang-cn="../img/imgae_cn.jpg"  
    data-lang-jp="../img/imgae_jp.jpg" 
/>

getLang/setLang

获取或设置当前语言。

<script type="text/javascript">  
var tran = new Translater();  
if (tran.getLang() === "default") 
tran.setLang('en'); 
</script>
浏览 12
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报