5.1 安装模板引擎

Express支持多种模板引擎,这里采用Handlebars模板引擎的服务器端版本hbs模板引擎。

先安装hbs。

npm install hbs --save-dev

上面代码将hbs模块,安装在项目目录的子目录node_modules之中。save-dev参数表示,将依赖关系写入package.json文件。安装以后的package.json文件变成下面这样:

// package.json文件

{
  "name": "demo",
  "description": "My First Express App",
  "version": "0.0.1",
  "dependencies": {
    "express": "3.x"
  },
  "devDependencies": {
    "hbs": "~2.3.1"
  }
}

安装模板引擎之后,就要改写app.js。

// app.js文件

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

// 加载hbs模块
var hbs = require("hbs");

// 指定模板文件的后缀名为html
app.set("view engine", "html");

// 运行hbs模块
app.engine("html", hbs.__express);

app.get("/", function (req, res){
    res.render("index");
});

app.get("/about", function(req, res) {
    res.render("about");
});

app.get("/article", function(req, res) {
    res.render("article");
});

上面代码改用render方法,对网页模板进行渲染。render方法的参数就是模板的文件名,默认放在子目录views之中,后缀名已经在前面指定为html,这里可以省略。所以,res.render("index") 就是指,把子目录views下面的index.html文件,交给模板引擎hbs渲染。

文章导航