上一篇，我們瞭解了Express.js創建的專案的檔案架構，也看過package.json，對Express.js有了基本的認識，今天我們來真正地修改網頁。

一、用"npm start"加"nodemon"來啟動程式。

先來補充一點程式啟動的東西。之前我們安裝了"nodemon"用來監視程式，一旦有改動就自動幫我們重新啟動程式。上一篇的package.json裡面的"scripts"段，我們提過那是啟動script。你會看到它是用"node"來啟動，而不是用"nodemon"。要用"nodemon"只要改package.json就可以：

"scripts": {
    "start": "nodemon ./bin/www"
  },

可以看到只是將"node"改為"nodemon"。接著就可以用"npm start"來啟動程式，這是express.js建議的方式。

二、Express.js的路由(Routing)。

程式啟動後，打開瀏覽器，你會看到以下歡迎畫面。

要修改這個頁面，關係兩個部分。第一個部分是路由(routes)；第二個部分是模版(views)。先看路由，打開"/routes/index.js"文件。

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

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

module.exports = router;

可以看到，這裡用express.Router()，能夠很方便地處理路由的問題。從router.get()我們能瞭解大致是怎樣對不同的頁面進行路由。其中"res.render()"中的render()是指對模版進行編繹（並將變數放進去），這裡是將"title"這個變數（值為"Express"）送到"index"這個模版裡。這個模版自然是"/views/index.hjs"。

三、Express.js的模版文件。

我們用Hogan.js作為模版引擎，所以後綴為".hjs"，如果你用Jade作為模版引擎的話，後綴會是".jade"，如此類推。以下是"index.hjs"的內容：

    <title>{{ title }}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  
  
    <h1>{{ title }}</h1>
    <p>Welcome to {{ title }}</p>
  

跟HTML基本上一樣，只是多了變數：用"{{ 變數 }}"來表示。這裡只有"title"一個變數，正是由"/routes/index.js"送過來的，值為"Express"。

現在回到"/routes/index.js"，將"title"的值改為"New Title"試試看：

router.get('/', function(req, res) {
  res.render('index', { title: 'New title' });
});

然後刷新網頁看看效果。

[image credit: Geoffrey Arduini]