admin管理员组文章数量:1608635
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/
目录下搜索模板文件.
最后效果:
本文标签: nunjucks
版权声明:本文标题:nunjucks 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728550557a1163377.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论