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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
C++中的string类的用法小结
Aug 07 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
简单实现jquery隔行变色
2017/11/09 jQuery
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
python线程池的实现实例
2013/11/18 Python
Python中的引用和拷贝浅析
2014/11/22 Python
python中zip和unzip数据的方法
2015/05/27 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Django视图、传参和forms验证操作
2020/07/15 Python
python os.rename实例用法详解
2020/12/06 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
高中的职业生涯规划书
2013/12/28 职场文书
电教室标语
2014/06/20 职场文书
机械操作工岗位职责
2014/08/08 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
出生证明范本
2015/06/15 职场文书
简爱读书笔记
2015/06/26 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
详细了解MVC+proxy
2021/07/09 Java/Android