如何使用Node + Express呈现多个视图
我有一个header.html和footer.html,我想与其他视图一起呈现。 我想用Node + Express来完成这个任务。 我试图以下面的方式呈现视图,但显然这是行不通的:
var express = require('express'); var app = express(); app.get('/', function(req, res) { res.render('header'); res.render('home'); res.render('footer'); });
您必须将模板引擎设置为您的项目。 例如,你可以使用Swig ,它工作的非常好,它是有据可查的。
下面的示例向您展示了如何设置以及如何从布局或母版页调用部分视图。
安装它通过做npm install swig --save
在你的项目根目录。 您需要安装一个名为“合并”的附加库,作为不同模板引擎库之间的接口,这在快速应用程序中是一种标准。
npm install consolidate --save
要求你的主要脚本中的库
consolidate = require('consolidate'); swig = require('swig');
configuration如下:
app.engine('html', cons.swig); app.set('view engine', 'html'); app.set('views', __dirname + '/views'); // set your view path correctly here
然后你可以渲染一个页面为:
app.get('/', function (req, res) { res.render('index', {}); });
( 例子取自Swig的作者Paul Armstrong github页面 )Layout.html:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>{% block title %}{% endblock %} - Example</title> </head> <body> <header> <h1>{% block title %}{% endblock %}</h1> {% block header %}{% endblock %} <nav> <ul> <li><a href="/">Home Page</a></li> <li><a href="/people">People</a></li> </ul> </nav> </header> <section role="main"> {% block body %}{% endblock %} </section> </body> </html>
index.html的:
{% extends 'layout.html' %} {% block title %}Home Page{% endblock %}
这样,你可以解耦你的意见,因为你需要:)
当你使用哈巴狗时 ,你可以利用包括function,比如@Kangcor的build议
home.pug
html head include ./path/to/header.pug title= title body ... include ./path/to/footer.pug