V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3152 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

28 条回复 • 2016-03-31 22:19:48 +08:00

iyaozhen

2016-03-30 11:21:46 +08:00 via Android

赞，挺不错的，很有意思

jaywcjlove

2016-03-30 11:26:48 +08:00

@iyaozhen 小创意 😄

learnshare

2016-03-30 11:28:16 +08:00

思路不错，不过相对于注释，用 data-* 来做更合适一些，因为 HTML 压缩的时候一般会选择清除注释。

jaywcjlove

2016-03-30 11:30:17 +08:00

@learnshare 如果`<div>dssdds<i>sdd</i></div>` 这个样子放到`data-*` 会把标签弄没了...

chaegumi

2016-03-30 12:24:00 +08:00

感觉一点也不好，有没有考虑过优化。如果你就后台用用当我没说

chaegumi

2016-03-30 12:24:17 +08:00

@chaegumi seo 优化

murmur

2016-03-30 12:29:02 +08:00

创意很好，但是实际上无卵用，因为多语言的网站不仅仅是文字差别，还有文化差别，你要展现给别人的内容也不一样，所以一般都是做 N 套网站

jaywcjlove

2016-03-30 12:35:07 +08:00

@murmur 那倒是，虽然是这个样子，但是也有部分网站你切好多个国家样式都是一样的，比如 apple.com 。虽然没有什么卵用，但是偶尔临时解决方案很不错的哦。只是把自己的灵感实现出来，没有什么别的意图 😄

zrp1994

2016-03-30 12:47:11 +08:00 via iPhone

注释容易被压缩清掉，建议换成 script 标签

learnshare

2016-03-30 12:52:00 +08:00

@jaywcjlove 翻译的是文本，不应该包含标签

jaywcjlove

2016-03-30 12:54:15 +08:00

@zrp1994 好想法，可以配置一下通过 script 或者注释来切换。😄 我建个 issue 回头撸起来

qq316107934

2016-03-30 13:26:46 +08:00

好方便啊，有种 web 版的 lang.ini 的感觉

jaywcjlove

2016-03-30 13:34:02 +08:00

@qq316107934 来这里搜集一点创意

jjplay

2016-03-30 14:35:19 +08:00

非常好的创意是一款轻量级简化的翻译方式，我曾经也 get 过注释来生成内容， star !

davin

2016-03-30 15:36:18 +08:00

这点子确实不错！现在也有很多是放在 noscript 里面的。

jejer

2016-03-30 15:56:25 +08:00

很酷

byenow

2016-03-30 16:02:41 +08:00

对于小项目确实是个便捷的办法，已 star~

4641585

2016-03-30 16:05:20 +08:00

插嘴问一下：

正文上方那一排 svg 可以在哪里找到？

jaywcjlove

2016-03-30 16:11:42 +08:00

@4641585

这个是我弄的傻傻的纯静态： https://jaywcjlove.github.io/sb

这个是国际大品牌动态的： http://shields.io/

murmur

2016-03-30 16:30:46 +08:00

@jaywcjlove 没错，我主要是想，多语言这么有用的东西，如果这么多年都没有人做，那一定是有他存在的缺陷，我又仔细看了一下苹果的内容，比如销售策略，他每个国家的条款都不一样，只不过因为全局保持了一样的布局而已。的却按楼上各位大神回复，作为小网站用用还是不错的，但是内容一多，实际上每个页面就加载了三倍的文字数据量（假设 3 种语言。。）
而且你看到了，苹果的英文和中文是差了 apple tv 的。。所以说多语言并不是简单的文字翻译，很多细节没法用插件实现

jaywcjlove

2016-03-30 16:45:22 +08:00

@murmur 嗯，我只是实现了我的一个想法。只是在工作中，用到翻译，只是简单的解决翻译问题，不是为了替换常规的翻译方法，你想多了。😄

domty

2016-03-30 17:33:49 +08:00

这东西的思路感觉就和响应式布局似得。
先把所有数据都下载下来，再按具体情况选择显示哪部分。

问题就是有可能把用户并不需要的代码等也下载了，会占用更多的带宽和流量。

exoticknight

2016-03-30 17:56:02 +08:00

写过类似的，不过语言表加载的是 json ，可以结合异步来加载再翻译。
无依赖，同样适合小项目。
github ： https://github.com/exoticknight/i18n.js

jaywcjlove

2016-03-30 18:03:19 +08:00

@exoticknight 木有文档 :-O

jaywcjlove

2016-03-30 18:04:44 +08:00

@domty 是滴。存在总会是有理由的。

exoticknight

2016-03-31 10:07:34 +08:00

@jaywcjlove 的确。因为觉得就是个自己用的小工具……我还是修改一下再加文档吧……

pine

2016-03-31 20:41:35 +08:00

总觉得有点不妥，觉得这种还是放在后端比较合适，如果是一段文字，也是用 xhr 请求，如果实在极小的地方就用标签切换不就好了为什么用注释呢，注释还是仅仅与代码相关而与内容无关的吧。。

jaywcjlove

2016-03-31 22:19:48 +08:00

@pine 也没有什么不妥，总有用得着的地方。比如： http://jaywcjlove.github.io/hotkeys/ 放到 Github 用起来很方便咯😄 。

Translater.JS 巧用 HTML 注释翻译页面，是不是很酷？

translater.js

作为模块安装

传统使用方法

文本翻译添加

图片切换