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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
JS 统计时间
2021/03/09 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python中的__slots__示例详解
2017/07/06 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
python实现dijkstra最短路由算法
2019/01/17 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
经典c++面试题二
2015/08/14 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
元宵节主持词
2014/03/25 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
培训计划通知
2015/07/15 职场文书
优秀员工演讲稿
2019/06/21 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫