Translater.JS巧用HTML注释翻译页面

最新推荐文章于 2025-06-12 00:11:08 发布

weixin_34344403

最新推荐文章于 2025-06-12 00:11:08 发布

阅读量473

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000004699696

translater.js是一种轻量级的页面翻译解决方案，适用于少量静态页面的翻译需求。该方案不依赖额外库，仅 (~2kb)大小。支持多语言切换，包括文本及图片，并可通过URL参数预设语言。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

translater.js

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

图片描述

Translater.js 官网

支持 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" />

关注公众号

图片描述