这是一个很酷的想法 Translater.JS巧用HTML注释翻译页面

破晓

来源：http://div.io/topic/1654

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

破晓

写了一个 jdists 的预处理

https://github.com/zswang/jdists

 

t1.html

<!--jdists export="#translater">
function (content, attrs, scope) {
  var defaultLang = scope.execImport(attrs.default);
  return content.replace(/<img([^<>]*)>|^(\s*)(\{(?:en|jp|cn)\})(.*)/gm, function (all, img, space, lang, text) {
    if (img) {
      return '<img' + img.replace(/\{(en|jp|cn)\}/g, function (all, lang) {
        if (defaultLang === lang) {
          return 'src=';
        }
        return 'data-lang-' + lang + '=';
      }) + '>';
    }
    if (lang === '{' + defaultLang + '}') {
      return text;
    }
    return '<!\-\-' + lang + text + '\-\->';
  });
}
</jdists-->

<!--jdists encoding="#translater" default="@lang"-->
<img alt="images" {en}"../img/imgae.jpg" {cn}"../img/imgae_cn.jpg" {jp}"../img/imgae_jp.jpg" />

<div class="describe">
{en}This is a use of HTML comments page translation solution. For a small amount of static pages, this solution is more simple. it has no dependents, Compression only (4KB)
{jp}これはHTML注釈のページの翻訳の解決方案を利用します。少量の静的なページに対して、この解決方案はもっと簡単です。頼りなくて，圧縮後は（~4kb）
{cn}这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面，这种解决方案显得更简单。它没有依赖，压缩后只有(~4kb)。
</div> 
<!--/jdists-->

 

t2.html

jdists t1.html -o t2.html --lang=jp

 

output:

<img alt="images" data-lang-en="../img/imgae.jpg" data-lang-cn="../img/imgae_cn.jpg" src="../img/imgae_jp.jpg" />
<div class="describe">
<!--{en}This is a use of HTML comments page translation solution. For a small amount of static pages, this solution is more simple. it has no dependents, Compression only (4KB)-->
これはHTML注釈のページの翻訳の解決方案を利用します。少量の静的なページに対して、この解決方案はもっと簡単です。頼りなくて，圧縮後は（~4kb）
<!--{cn}这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面，这种解决方案显得更简单。它没有依赖，压缩后只有(~4kb)。-->
</div>

jdists t1.html -o t2.html --lang=cn

 

output:

<img alt="images" data-lang-en="../img/imgae.jpg" src="../img/imgae_cn.jpg" data-lang-jp="../img/imgae_jp.jpg" />
<div class="describe">
<!--{en}This is a use of HTML comments page translation solution. For a small amount of static pages, this solution is more simple. it has no dependents, Compression only (4KB)-->
<!--{jp}これはHTML注釈のページの翻訳の解決方案を利用します。少量の静的なページに対して、この解決方案はもっと簡単です。頼りなくて，圧縮後は（~4kb）-->
这是一个利用HTML注释的页面翻译解决方案。对于少量的静态页面，这种解决方案显得更简单。它没有依赖，压缩后只有(~4kb)。
</div>