惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
V
V2EX
V
Visual Studio Blog
博客园_首页
Last Week in AI
Last Week in AI
Apple Machine Learning Research
Apple Machine Learning Research
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
S
SegmentFault 最新的问题
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Martin Fowler
Martin Fowler
Recent Announcements
Recent Announcements
J
Java Code Geeks
月光博客
月光博客
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
F
Fortinet All Blogs
P
Privacy & Cybersecurity Law Blog
C
CERT Recently Published Vulnerability Notes
C
CXSECURITY Database RSS Feed - CXSecurity.com
B
Blog RSS Feed
S
Schneier on Security
酷 壳 – CoolShell
酷 壳 – CoolShell
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
W
WeLiveSecurity
A
Arctic Wolf
U
Unit 42
博客园 - 司徒正美
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
有赞技术团队
有赞技术团队
Recorded Future
Recorded Future
Engineering at Meta
Engineering at Meta
Google DeepMind News
Google DeepMind News
大猫的无限游戏
大猫的无限游戏
Microsoft Security Blog
Microsoft Security Blog
Hacker News: Ask HN
Hacker News: Ask HN
量子位
B
Blog
T
The Exploit Database - CXSecurity.com
C
Cisco Blogs
博客园 - 三生石上(FineUI控件)
H
Help Net Security
博客园 - 叶小钗
C
Cyber Attacks, Cyber Crime and Cyber Security
L
LINUX DO - 热门话题
Hugging Face - Blog
Hugging Face - Blog
Google DeepMind News
Google DeepMind News
小众软件
小众软件
雷峰网
雷峰网
TaoSecurity Blog
TaoSecurity Blog
Schneier on Security
Schneier on Security

克洛洛日记

一年回本计划 | 克洛洛日记 股票期权的Theta | 克洛洛日记 股票期权的Gamma | 克洛洛日记 股票期权的Delta | 克洛洛日记 KDJ指标 | 克洛洛日记 布林线 | 克洛洛日记 MACD指标 | 克洛洛日记 RSI指标 | 克洛洛日记 时间协议 | 克洛洛日记 聊聊Spring的stereotype注解 | 克洛洛日记 免费申请 JetBrains 全产品 License | 克洛洛日记 Aloha 一个Hexo主题 | 克洛洛日记 泰国之旅 [三] | 克洛洛日记 泰国之旅 [二] | 克洛洛日记 泰国之旅 [一] | 克洛洛日记 Nginx使用SSL证书配置https | 克洛洛日记 错误排查:非ROOT用户使用密钥进行ssh登录提示输入密码 | 克洛洛日记 使用Github、Travis-CI和Coding.net自动部署博客[三] | 克洛洛日记 使用EditorConfig | 克洛洛日记 JavaScript执行window.print()打印内容为空白 | 克洛洛日记 使用Github、Travis-CI和Coding.net自动部署博客[二] | 克洛洛日记 寓食记 | 克洛洛日记 使用Github、Travis-CI和Coding.net自动部署博客[一] | 克洛洛日记 书单 | 克洛洛日记 WebJars使用示例 | 克洛洛日记 WebJars介绍 | 克洛洛日记 Maven打jar包内容出错 | 克洛洛日记 数据分布式模型 | 克洛洛日记 Wicket的HelloWorld | 克洛洛日记 Java运行时内存结构 | 克洛洛日记 前端优化法则 | 克洛洛日记
i18next | 克洛洛日记
海拉鲁球果 <hyrul · 2017-08-28 · via 克洛洛日记

· Node.js / express / i18n / JavaScript

I18next 是一款用JavaScript编写的国际化框架。

为什么需要国际化

一般在编写网站的时候,网页需要向用户展现一些文字,假如你的网站完全面向中国用户,那么你可以把网页里的内容写成中文。但是如果你还要面向英文用户,那么你就不能直接把内容写成中文了,你的网站需要国际化。你需要使用一些技术来让程序自动切换内容的显示,网页的总体结构是不变的,但是内容需要随着用户的改变而改变。

但是可能有人会说,各准备一个英文和一个中文的网页不就可以了吗?那么请问以后再出现法文,葡萄牙文,西班牙文的需求呢?这种需求其实很常见,比如ebay.com,它面向不同国家有不同的显示,甚至在一个国家还有多种显示(比如加拿大,分为加拿大英语区和加拿大法语区)。如果针对一种语言准备一套网站,那将是大大的代码冗余和资源的浪费。

为什么使用i18next

I18next提供了JavaScript开发中能想到的所有关于i18n的需求,它提供了一个完整的解决方案,不管是本地客户端还是服务端,移动端Web还是桌面端Web。当然,它不仅仅可以用在JavaScript平台,它还能用在其他平台,比如php,ios等。

以下是官方的一段话:

Learn once - use everywhere. The community made integrations for frameworks like react.js, angular.js, vue.js and many more. But this is not where it ends…you can use i18next with node.js, php, ios, android and other platforms.

I18next reached not only the web, but also mobile and desktop development.

翻译过来大概意思是:它的社区已经将i18next和react.js,angular.js,vue.js等热门的框架集成,而且你能在Node.js,php,ios,android等平台上使用,除了Web端,你还能在手机端桌面端的开发中使用。

开始使用

安装

# yarn
$ yarn add i18next

# npm
$ npm install i18next --save

# bower
$ bower install i18next

Hello World

这里直接修改自官网的Hello World:

var i18next = require('i18next');

var option = {
  lng: 'en',
  resources: {
    en: {
      translation: {
        "hello-world": "Hello world!"
      }
    }
  }
};

var callback = function(err, t) {
  console.log(i18next.t('hello-world'));
}

i18next.init(option, callback);

执行过后会输出:

$ node .
Hello world!
Done in 0.18s.

这里调用的是 i18next 的 init() api 进行初始化,init()需要传入两个参数option和callback函数。

在 callback 函数中, i18next.t(‘hello-world’) 就是键 ‘hello-world’ 所对应值 ‘Hello world!’。

在 option 中,lng 表示当前采用的是 en 语言所对应的资源,而 resources 就是资源配置。那么,如果想输出中文呢?很简单,只要在 resources 中加入对应语言的键值对即可:

var i18next = require('i18next');

var option = {
  lng: 'zh_CN',
  resources: {
    en: {
      translation: {
        "hello-world": "Hello world!"
      }
    },
    zh_CN: {
      translation: {
        "hello-world": "你好世界!"
      }
    }
  }
};

var callback = function(err, t) {
  console.log(i18next.t('hello-world'));
}

i18next.init(option, callback);

再将 option.lng 改为 ‘zh_CN’,这样执行后输出:

$ node .
你好世界!
Done in 0.18s.

最基本的国际化方案就是这么简单,实际应用中会根据用户的某些国家属性来决定使用哪套资源,举个例子,用eBay来说,假如用户直接访问 www.ebay.com,系统会默认显示英文,假如用户访问www.ebay.ch,看上去整个网页的结构布局和 www.ebay.com 一样,只不过语言变成了德文,这里就是根据域名的不同来选择不同的服务器,而不同的服务器实际上运行的是一套代码。

当然还可以根据用户所在国家自动显示不同的语言,在这里就不多说了。

以上代码完整的项目地址是 https://github.com/henryhuang/i18next-samples/tree/master/i18next-basic-sample .

结合 Express 使用

主要的代码如下:


...

// 初始化 i18next
i18n.use(i18nMiddleware.LanguageDetector).use(i18nFsBackend).init({
  lng: 'en',
  preload: [
    'en', 'zh-CN'
  ],
  backend: {
    loadPath: path.resolve(__dirname, './lang/{{lng}}/translation.json')
  }
});
//
app.use(i18nMiddleware.handle(i18n));

...

app.get('/lang/:lang', function(req, res) {
  res.cookie('i18next', req.params.lang);
  res.redirect('/');
});

完整的项目代码在这里 https://github.com/henryhuang/i18next-samples/tree/master/i18next-express-sample .