【融职培训】Web前端学习 第8章 egg基础教程7 Nunjucks入门教程
【融职培训】Web前端学习 第8章 egg基础教程7 Nunjucks入门教程
学习猿地
发布于 2020-06-24 17:08:35
发布于 2020-06-24 17:08:35
一，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％}这样就可以实现模板继承的效果了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录