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 相关文章推荐
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
javascript根据像素点取位置示例
2014/01/27 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
python list语法学习(带例子)
2013/11/01 Python
OpenCV实现人脸识别
2017/04/07 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
python代码实现猜拳小游戏
2020/11/30 Python
python制作微博图片爬取工具
2021/01/16 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年路政工作总结
2015/05/22 职场文书
优质服务标语口号
2015/12/26 职场文书