你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
jaywcjlove

这是一个很酷的想法 Translater.JS巧用HTML注释翻译页面 4个回复 专栏 @ Javascript

jaywcjlove 发布于 3 年前

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

    通俗易懂,满足特定需求,

    #1
  • 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>
    
    #2
  • jaywcjlove
    #3
  • zswang

    是的

    #4
登录后回复,如无账号,请使用邀请码注册