Pilla 技術宅

簡介

開發應用時突然發現要準備網頁的多國語系支援，上網找一下資料發現多國語系可以做在前台，也就是網頁html+js的搭配組合完成語系呈現。

前端開發可參考此連結，我是沒多研究就是了

另一種就是直接後台給html時就包含了語系呈現了

個人傾向使用後台來達成這樣的機制，後台開發視野遼闊阿...，因為之前使用的是express + swig來達成MVC的動作，

所以這裡加入i18next，來達成多國語系

tree

.
|-- app.js
|-- locales
|   |-- dev
|   |   `-- translation.json
|   `-- zh-TW
|       `-- translation.json
`-- views
    `-- index.html

4 directories, 4 files

app.js

var express = require('express');
var i18n = require('i18next');
var swig = require('swig');

var app = module.exports = express();

app.engine('html', swig.renderFile);

/* Initializing i18n */
i18n.init();
i18n.registerAppHelper(app);

app.set('views', __dirname + '/views');
app.set('view engine', 'html');
app.use(i18n.handle);

app.get('/', function(req, res) {
    // current language
    var currentLng = req.locale;

    // access i18n
    var i18n = req.i18n;

    res.render('index', {t: i18n.t});
});

app.listen(3000);

index.html

{{t('example.string1')}}
{{t('example.string2')}}

locales/dev/translation.json

{
    "example": {
        "string1": "Hello World!",
        "string2": "Hello World! Test2"
    }   
}

locales/zh-TW/translation.json

{
    "example": {
        "string1": "哈囉",
        "string2": "世界"
    }   
}

Test:

curl 127.0.0.1:3000 -H "Accept-Language: zh-tw"
curl 127.0.0.1:3000 -H "Accept-Language: en"