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

一，Nunjucks基本概念

Nunjucks是一个丰富强大的模板引擎。

模板引擎就是基于模板配合数据构造出链输出的一个组件。

尽可能情况下，我们都需要读取数据后渲染模板，然后呈现给用户。故我们需要约会对应的模板引擎。

简单来说，Nunjucks就实现了在后台服务器显示内容的模板。

二，♡egg-view-nunjucks插件

$ npm i egg-view-nunjucks --save

三，启用插件

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

四，渲染页面

用render渲染页面

1// controller / test.js 2async  方法名（）{ 3      等待 此。ctx 。render （“渲染的网页” ，{ 4          data：“数据” 5      } ）6}

五，绑定数据

1// controller / test.js 2    异步 测试（）{ 3        等待 此。ctx 。渲染（“ test.html” ，{ 4            test：“ hello world” ，56        } ）7}

1<！-view / test.html->2< h1 >3        {{测试}}45< img  src =“ {{bannerUrl}} ” alt =“” >

六，遍历时间表

1    异步 测试（）{  2        等待 这个。ctx 。渲染（“ test.html” ，{  3            test：“ hello world” ， 4bannerUrl：“ /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}} 7< span  class =“ sj ” > {{item.sj}} 8< span  class =“ dz ” > {{item。 dz}} 91011{％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％}

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

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