Question

我有一个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');
});

Answer 1

您必须为项目设置模板引擎。例如，您可以使用Swig，它工作得很好并且有很好的文档记录。

下面的示例向您展示了如何设置它以及如何从布局或母版页调用部分视图。

通过在项目根目录上执行npm install swig --save来安装它。您需要安装一个名为consolidate的附加库，它充当不同模板引擎库之间的接口，它在快速应用程序中是一种标准。

npm install consolidate --save

要求主脚本中的库

consolidate = require('consolidate');
swig = require('swig');

按如下方式配置：

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', {});
});

（Example taken from Swig's author, Paul Armstrong github page）的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 %}

这样，您可以根据需要解耦视图：）

Answer 2

当您使用pug时，您可以利用包含功能，例如@Kangcor建议

<强> home.pug

html
  head
    include ./path/to/header.pug
    title= title
  body
    ...
    include ./path/to/footer.pug

如何使用Node + Express呈现多个视图

2 个答案: