【融职培训】Web前端学习 第8章 egg基础教程7 Nunjucks入门教程

$ npm i egg-view-nunjucks --save

1 // config/plugin.js
2 exports.nunjucks = {
3     enable: true,
4     package: 'egg-view-nunjucks',
5 };

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％}

 1   < ul > 
 2     < li >
 3       水果
 4     </ li > 
 5     < li >
 6       体育用品
 7     </ li > 
 8     < li >
 9       海鲜
10     </ li > 
11   </ ul >

 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％}