2015-02-11 71 views
2

我剛剛進入NodeJS/ExpressJS開發,並且正在尋找一種使用Express創建多語言路線的方法。ExpressJS多國語言路線

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)如果我的網頁包含兩個國家/地區標誌圖標以在不同語言之間進行切換,那麼確保返回到同一頁面但使用不同語言的最佳做法是什麼?以及如何在其他語言中構建href HTML?我打算使用把手作爲模板引擎。

+0

你讓事情變得複雜。最好的將是使用標準的i18n,區域設置概念。與其他框架不同,ExpressJS也得到了相同的支持。看看[這裏](http://www.drzon.net/i18n-for-node-express/) – NarendraSoni 2015-02-12 04:27:23

+0

從我所瞭解的i18n模塊中可以根據瀏覽器設置的Accept-Language來選擇正確的翻譯。網頁用戶是否可以通過點擊網頁上的國家圖標進行更改? – Supercell 2015-02-12 16:12:07

回答

3

這就是我到目前爲止所做的,而且相當簡單。

它可以在不同語言之間進行切換,並且當用戶切換到另一種語言時也可以保持用戶在同一頁面上。

這還沒有完成,但這是一個開始。

這隻回答我的第二個問題。語言參數仍然必須在每條路線中提供,但現在我並不介意。

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>