Node.js+Express.다국어 사이트를 만들고 싶어요.

다국어 사이트를 만들고 싶습니다.
※ "≈"은 생략

릴리즈

$ node -v
v6.2.1
$ cat package.json
{
  ≈≈≈
  "dependencies": {
    "ect": "^0.5.9",
    "express": "~4.13.1",
    "i18n": "~0.8.2",
    ≈≈≈
  },
  ≈≈≈
}

localles 준비

$ mkdir locales
$ cat locales/en.json
{
  "i18ntest": {
    "Hello": "Hello world!"
  }
}
$ cat locales/ja.json
{
  "i18ntest": {
    "Hello": "素敵な世界!"
  }
}

app.js

≈≈≈
var ect = require('ect');
var i18n = require('i18n');
≈≈≈
// view engine setup
var ectRenderer = ect({ watch: true, root: __dirname + '/views', ext : '.ect' });
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
≈≈≈
// i18n settings
i18n.configure({
  locales: ['ja', 'en'],
  defaultLocale: 'ja',
  directory: __dirname + '/locales',
  objectNotation: true
});

app.use(i18n.init);

app.use(function (req, res, next) {
  if (req.session.locale) {
    i18n.setLocale(req, req.session.locale);
  }
  next();
});
≈≈≈

사용법

$ cat app.js
≈≈≈
var test = require('../routes/test');
≈≈≈
app.use('/', test);
≈≈≈
$ cat routes/test.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('test', {});
}

module.exports = router;
$ cat views/test.ect
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title><%= @__("i18ntest.Hello") %></title>
        </head>
        <body>
                <h1><%= @__("i18ntest.Hello") %></h1>
        </body>
</html>

확인 방법


일본어/영어로 브라우저 언어 설정 액세스
예) 크롬(51.0.2704.103(64-bit): 영어:

응용편

$ cat routes/test.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('test', { message: 'Hello' });
}

module.exports = router;
$ cat views/test.ect
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title><%= @__("i18ntest.Hello") %></title>
        </head>
        <body>
                <h1><%= @__("i18ntest." + @message) %></h1>
        </body>
</html>

좋은 웹페이지 즐겨찾기