koa2使用ejs和nunjucks作为模板引擎的使用


Posted in Javascript onNovember 27, 2018

一、使用 ejs 作为模板引擎

koa2 如果使用 ejs、jade 这种作为模板引擎的话,直接使用 koa-views 进行模板加载即可。

比如使用 ejs :

安装:

yarn add koa-views ejs

使用:

在使用 render 的时候,需要进行异步文件模板读取,因此 ctx.render 需要使用 await

const app= require('koa')();
const koaViews= require('koa-views');
const path = require('path');

app.use(koaViews(path.join(__dirname, './view'), {
 extension: 'ejs'
}));

app.use( async ( ctx ) => {
 const title = "postbird";
 await ctx.render('index', {
 title
 });
});

app.listen(3000)

二、使用 nunjucks 作为模板引擎

我实在是讨厌 ejs 的模板引擎语法,觉得太弱也太麻烦,而且新版本中,去除了模板继承,很不方便。

我比较喜欢 nunjucks ,另外我发现了一个 aui-template 的模板引擎,语法使用起来很舒服,速度也很快,可以体验一下。

aui-template 文档地址:

http://aui.github.io/art-template/zh-cn/docs/

1、安装 koa-nunjucks-2

使用 nunjucks 作为模板引擎,不需要安装 koa-views。

并且可以借助别人封装好的中间件 koa-nunjucks-2 来实现,koa-nunjucks 这个名字已经被使用,但是作为很烂,也没维护。

有时间我会看看他的源码,怎么加载的 nunjucks

yarn add koa-nunjucks-2

2、使用 nunjucks

const koaNunjucks = require('koa-nunjucks-2');

app.use(koaNunjucks({
 ext: 'njk',
 path: path.join(__dirname, './views'),
 nunjucksConfig: {
 trimBlocks: true
 }
}));

3、渲染模板

同样,异步文件读取,需要使用 await 。

router.get('view', async (ctx) => {
 var food = {
 'ketchup': '5 tbsp',
 'mustard': '1 tbsp',
 'pickle': '0 tbsp'
 };
 await ctx.render('index',{title:'nunjucks',food});
});

4、模板语法

更多的语法可以看文档:

https://mozilla.github.io/nunjucks/cn/templating.html#for

<body>
 <h1>{{title}}</h1>
 <p>循环:</p>
 <ul>
 {% for key,value in food %}
  <li>{{key}} - {{value}}</li>
 {%endfor%}
 </ul>
</body>

三、效果

koa2使用ejs和nunjucks作为模板引擎的使用

四、问题

在使用 koa-nunjucks-2 的时候,发现一个问题:

app.use(nunjucks({})) 必须放在 app.use(router.routes()).use(router.allowedMethods()) 前面才能起作用,否则会报错 ctx.render() 不是一个 function。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
css配合jquery美化 select
Nov 29 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
javascript基本语法
May 31 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
js replace替换字符串同时替换多个方法
Nov 27 #Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 #Javascript
使用electron制作满屏心特效的示例代码
Nov 27 #Javascript
30分钟快速实现小程序语音识别功能
Nov 27 #Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 #Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 #Javascript
You might like
PHP排序算法类实例
2015/06/17 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
js仿微信抢红包功能
2020/09/25 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
Python实现的txt文件去重功能示例
2018/07/07 Python
Django forms组件的使用教程
2018/10/08 Python
python 图片去噪的方法示例
2019/07/09 Python
解决python 找不到module的问题
2020/02/12 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
五四青年节演讲稿
2014/05/26 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
初中语文教学随笔
2015/08/15 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
golang为什么要统一错误处理
2022/04/03 Golang