一,Nunjucks基本概念
- Nunjucks是一个丰富强大的模板引擎。
- 模板引擎就是基于模板配合数据构造出链输出的一个组件。
- 尽可能情况下,我们都需要读取数据后渲染模板,然后呈现给用户。故我们需要约会对应的模板引擎。
- 简单来说,Nunjucks就实现了在后台服务器显示内容的模板。
二,♡egg-view-nunjucks插件
$ npm i egg-view-nunjucks --save
三,启用插件
1 // config/plugin.js 2 exports.nunjucks = { 3 enable: true, 4 package: 'egg-view-nunjucks', 5 };
四,渲染页面
- 用render渲染页面
1 // controller / test.js 2 async 方法名(){ 3 等待 此。ctx 。render (“渲染的网页” ,{ 4 data:“数据” 5 } ) 6 }
五,绑定数据
1 // controller / test.js 2 异步 测试(){ 3 等待 此。ctx 。渲染(“ test.html” ,{ 4 test:“ hello world” , 5 6 } ) 7 }
1 <!-view / test.html-> 2 < h1 > 3 {{测试}} 4 </ h1 > 5 < img src =“ {{bannerUrl}} ” alt =“” >
六,遍历时间表
1 异步 测试(){ 2 等待 这个。ctx 。渲染(“ test.html” ,{ 3 test:“ hello world” , 4 bannerUrl:“ /public/images/banner.jpg” , 5 列表:[ 6 { url:“ ../public/images/ice-suo.png” ,bt:“开门” ,sj:“ 2分钟前” ,dz:“杭州” } , 7 { url:“ ../ public / images / ice-suo.png ” ,:'开门' ,SJ:'1天前' ,dz的:'广东' } , 8 { URL:“../public/images/ice-suo.png” ,BT:'开门' ,SJ:“1天前' dz的:'杭州' } ,{ URL:“../public/images/ice-suo.png” ,BT:'开门' ,SJ:'18天前' ,dz的:'上海' } ,] ,} )}
1 {%用于列表%中的项目} 2 < ul class =“ opul ” > 3 < li > 4 < img src = {{item.url}} alt > 5 {{项目名称}} 6 < span class =“ bt ” > {{item.bt}} </ span > 7 < span class =“ sj ” > {{item.sj}} </ span > 8 < span class =“ dz ” > {{item。 dz}} </ span > 9 </ li > 10 </ ul > 11 {%endfor%}
七,继承模板
模板继承可以达到模板附加的效果。
- 有一个叫做layout.html的模板,如下所示:
1 < ul > 2 < li > 3 水果 4 </ li > 5 < li > 6 体育用品 7 </ li > 8 < li > 9 海鲜 10 </ li > 11 </ ul >
- 有文件称为fruits.html的网页,如下所示:
1 {%扩展了'tZ.html'%} 2 {%封锁内容%} 3 < ul > 4 < li > 5 香蕉 6 </ li > 7 < li > 8 苹果 9 </ li > 10 < li > 11 鸭梨 12 </ li > 13 </ ul > 14 {%endblock%}
这样就可以实现模板继承的效果了。