守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 251|回复: 1

[js插件/工具类] 这是一个很酷的想法 Translater.JS巧用HTML注释翻译页面

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-4 09:44:26 | 显示全部楼层 |阅读模式

    来源: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" />

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

     楼主| 发表于 2016-8-4 09:45:58 | 显示全部楼层

    写了一个 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>

    守望者AIR技术交流社区(www.airmyth.com)
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 01:04 , Processed in 0.060902 second(s), 30 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表