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

最新推荐文章于 2025-10-09 07:58:34 发布

原创最新推荐文章于 2025-10-09 07:58:34 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

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

这样就可以实现模板继承的效果了。

【融职教育】在工作中学习，在学习中工作