上一篇解讀了Express.js的app.js，今天我們來試試建立一個新頁面，就選最簡單的About Us頁面好了。

首先打開"/views/indes.hjs"，另存一份"/views/about.hjs"，按照你的想法去修改，這是你的About Us的Hogan.js文件：

    <title>{{ title }}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  
  
    <h1>{{ title }}</h1>
    <p>This is the about us page</p>
  

保存後，前往"/routes/index.js"，前面是模版"views"，所以結尾是".hjs"；這裡是路由"routes"，所以結尾是".js"。同樣的另存一份為"about.js"，修改如下：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/about', function(req, res) {
  res.render('about', { title: 'About us' });
});

module.exports = router;

實際修改只有中間的"router.get()"部分，將原本針對主頁"/"的路由改為針對"/about"。同時裡面的"res.render()"原本是送往"index"文件，也要改為送往我們剛剛建立的"about"文件。標題"title"自然也相應改為"About us"。

最後一步是打開"app.js"，找到：

var routes = require('./routes/index');
var users = require('./routes/users');

在下面添加一行：

var about = require('./routes/about');

另外再往下找到：

app.use('/', routes);
app.use('/users', users);

在下面添加一行：

app.get('/about', about);

這裡的邏輯很簡單，就是將"/about"這個請求送給"./routes/about"來處理。

所以整個流程是：

１．"localhost:3000/about"請求進來，交給"./routes/about"來處理；

２．"./routes/about"將變數"title"的值送給模版文件"about"(.hjs)；

３．最後"/views/about.hjs"將網頁內容顯示給瀏覽器。

現在你可以打開你的瀏覽器看看：localhost:3000/about 的效果。

[image credit: Noe Araujo]

(本文同步發表於: NodeJust.com)