Nunjucks模板
它是一款JavaScript 模板引擎，可以動態生成頁面,相當於界面跟數據是分離的，MV模式.
這是一個模板渲染，以下在egg-js項目下進行.
- 首先引入該插件.
npm i egg-view-nunjucks --save
- 啓動插件
config\plugin.js
module.exports = {
// had enabled by egg
// static: {
// enable: true,
// }
nunjucks: {
enable: true,
package: 'egg-view-nunjucks',
},
};
- 配置渲染引擎,
config\config.default.js
config.view = {
mapping: {
'.nj': 'nunjucks',
},
};
這樣在渲染時，.nj後綴文件會使用nunjucks引擎進行渲染.
- 先建立好一個頁面框架，
layout.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div>
{% block content %}{% endblock %}
</div>
</body>
</html>
其中{% block content %}{% endblock %}是我們要填充的內容。
- 新建一個
code.nj，繼承於上一個模板.
{% extends 'layout.html' %}
{% block content %}
Hey!
<br/>
<br/>
A sign in attempt requires further verification because we did not recognize our device.
To complete the sign in,enter the verification code on the unrecognized device.
<br/>
<br/>
Verification code: <font color='#42a5f5'>{{code}}</font>
{% endblock %}
- 在
controller，這樣渲染.
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
const { ctx } = this;
await ctx.render('code.nj', { code: 123456 });
}
}
module.exports = HomeController;
默認會從app/view/目錄下搜索模板文件.
最後效果:
