一、需求

express3 之后就一处了 ejs 的layout,虽然可以通过 express-ejs-layout 这种方式去解决,但是官方不推荐使用的话,用起来很别扭。

而因为 TJ 已经转 go 了,所以 TJ 的 ejs 已经不再维护了,现在做维护的是 mde 的 ejs:(npm的源现在是他的)

因为考虑到一定要使用模板布局(layout),所以切换了模板引擎,改为使用 nunjucks

二、在 express 中使用 nunjucks

没有使用脚手架

安装:

yarn add nunjucks

app.js

可以通过 nunjucks 的 configure 方法,设置模板的一些参数,而在 express 中使用则更加的方便。

const express = require('express');
const nunjucks  = require('nunjucks');
const path = require('path');

const app = express();
app.set('view engine','njk'); 
app.set('views',path.resolve(__dirname,'./views'));

nunjucks.configure('views',{autoescape:true,express:app});

app.get('/',(req,res)=>{
  res.render('index',{name:'postbird','title':'nunjucks'});
});

app.listen(3000);

三、模板布局 - Layout

如果要进行 layout,我使用的是我自己经常用的一种 layout 方式。

目录结构:

1.jpg

base/home.njk

这个是基础的模板,主要有四个block:

  • title:负责渲染标题
  • header:可以在插入一些当前页 css
  • main:用于插入主内容
  • footer:用于插入一些当前页 js

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>{% block title %} 首页 {% endblock %} - nunjucks演示</title>
  {% block header %} {% endblock %}
</head>
<body>
<header style="text-align:center;"> 
    <p>Header</p>
    <hr>
<header>
 {% block main %}  {% endblock %}
 <footer>
    <hr/>
    <div style="text-align:center;">
        Footer  - by postbird
    </div>
 </footer>
</body>
 {% block footer %}  {% endblock %}
</html>

index.njk

首页文件:

{% extends './base/home.njk' %}
{% block title %} 首页 {% endblock %}

{% block header %}

{% endblock %}

{% block main %} 
  <h1>姓名:{{ name }}</h1>
  <p>使用的模板引擎是:{{ title }}</p>
{% endblock %}

{% block footer %} 

{% endblock %}

四、效果:

TIM截图20180505214145.jpg