ExpressJS 多语言路由答案

【问题标题】：ExpressJS multi-language routesExpressJS 多语言路由
【发布时间】：2015-04-12 04:16:12
【问题描述】：

我刚刚进入 NodeJS/ExpressJS 开发，我正在寻找一种使用 Express 创建多语言路由的方法。

app.get('/:language(en|nl)', function (req, res) {
    res.render('home', {
    });
});

app.get('/:language(en|nl)/news', function (req, res) {
    res.render('news', {
    });
 });

这个想法是提取语言并在 MySQL 查询中使用该语言以获取所请求语言的数据。下面的代码让我得到了语言参数。

req.params.language

这给我留下了两个问题：

1) 是否可以使用中间件来提取语言，而不是在每个路由中都这样做？

2) 如果我的网页包含两个用于在语言之间切换的国家/地区标志图标，确保它返回到同一页面但使用不同语言的最佳做法是什么，以及如何在 html 中构建 href ?我打算使用车把作为模板引擎。

【问题讨论】：

你自己让事情变得复杂。最好使用标准的 i18n 语言环境概念。与其他框架不同，ExpressJS 也得到了相同的支持。看here
据我了解，i18n 模块用于根据浏览器设置的 Accept-Language 选择正确的翻译。网络用户能否通过点击网页上的国家/地区图标来更改此设置？

标签： node.js express routes multilingual

【解决方案1】：

这是我迄今为止想出的，而且相当简单。

它使语言之间的切换成为可能，并且当用户切换到另一种语言时，也让他们在同一页面上。

这还没有完成，但这是一个开始。

这只回答了我的第二个问题。仍然必须在每条路由中提供语言参数，但我现在并不介意。

app.js

var express = require('express');
var app = express();

var handlebars = require('express-handlebars')
.create({
    defaultLayout: 'main'
});
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

app.set('port', process.env.PORT || 3000);

app.get('/', function (req, res) {
res.redirect('/nl');
});

app.get('/:language(en|nl)', function (req, res) {
res.render('home', {
    language: req.params.language,
    originalUrl: ''
});
});

app.get('/:language(en|nl)/news', function (req, res) {
res.render('news', {
    language: req.params.language,
    originalUrl: 'news'
});
});

// custom 404 page
app.use(function (req, res) {
res.type('text/plain');
res.status(404);
res.send('404 - Not Found');
});

// custom 500 page
app.use(function (err, req, res, next) {
console.error(err.stack);
res.type('text/plain');
res.status(500);
res.send('500 - Server Error');
});

app.listen(app.get('port'), function () {
console.log('Express started on http://localhost:' +
    app.get('port') + '; press Ctrl-C to terminate.');
});

main.handlebars

<!doctype html>
<html>

<head>
<title>Hello World</title>
<style type="text/css">
    .menu {
        margin: 0;
    }
    .menu > li  {
        display: inline-block;
        margin: 0;
        list-style: none;
    }
</style>
</head>

<body>
<ul class="menu">
    <li><a href="/{{language}}">Home</a></li>
    <li><a href="/{{language}}/news">News</a></li>
    <li><a href="/nl/{{originalUrl}}">Dutch</a></li>
    <li><a href="/en/{{originalUrl}}">English</a></li>
</ul>
{{{body}}}
</body>

</html>

home.handlebars

<h1>Home</h1>
<a href="/{{language}}/page1.html" >Navigation 1</a>
<a href="/{{language}}/page2.html" >Navigation 2</a>
<a href="/{{language}}/page3.html" >Navigation 3</a>

news.handlebars

<h1>News</h1>
<h2>{{language}}</h2>

【讨论】：