koa2使用ejs和nunjucks作為模板引擎的使用
一、使用 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 ,另外我發(fā)現(xiàn)了一個 aui-template 的模板引擎，語法使用起來很舒服，速度也很快，可以體驗一下。
aui-template 文檔地址：
http://aui.github.io/art-template/zh-cn/docs/
1、安裝 koa-nunjucks-2
使用 nunjucks 作為模板引擎，不需要安裝 koa-views。
并且可以借助別人封裝好的中間件 koa-nunjucks-2 來實現(xiàn)，koa-nunjucks 這個名字已經(jīng)被使用，但是作為很爛，也沒維護。
有時間我會看看他的源碼，怎么加載的 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>循環(huán)：</p>
<ul>
{% for key,value in food %}
<li>{{key}} - {{value}}</li>
{%endfor%}
</ul>
</body>
三、效果
四、問題
在使用 koa-nunjucks-2 的時候，發(fā)現(xiàn)一個問題：
app.use(nunjucks({})) 必須放在 app.use(router.routes()).use(router.allowedMethods()) 前面才能起作用，否則會報錯 ctx.render() 不是一個 function。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Nodejs回調(diào)加超時限制兩種實現(xiàn)方法
這篇文章主要介紹了Nodejs回調(diào)加超時限制兩種實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了node解析修改nginx配置文件操作,結(jié)合實例形式分析了node.js使用nginx-conf解析修改nginx配置文件的相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了詳解KOA2如何手寫中間件(裝飾器模式)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
nodejs個人博客開發(fā)第五步 分配數(shù)據(jù)
這篇文章主要為大家詳細介紹了nodejs個人博客開發(fā)的分配數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了Nodejs文件上傳、監(jiān)聽上傳進度,本文通過實例代碼給大家詳細介紹，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
nodejs連接mongodb數(shù)據(jù)庫實現(xiàn)增刪改查
本篇文章主要結(jié)合了nodejs操作mongodb數(shù)據(jù)庫實現(xiàn)增刪改查，包括對數(shù)據(jù)庫的增加，刪除，查找和更新，有興趣的可以了解一下。2016-12-12
在很多前端項目中都需要配置node的環(huán)境變量,下面這篇文章主要給大家介紹了關(guān)于node安裝及環(huán)境變量配置的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07
深入理解Node.js中通用基礎(chǔ)設(shè)計模式
大家在談到設(shè)計模式時最先想到的就是 singletons, observers（觀察者） 或 factories（工廠方法）。本文重點給大家介紹Node.JS一些基礎(chǔ)模式的實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起學習吧2017-09-09
這篇文章主要介紹了Windows系統(tǒng)中安裝nodejs圖文教程,本文分解了安裝中的各個步驟并給出圖文說明,需要的朋友可以參考下2015-02-02
pnpm是 Node.js 的替代包管理器,它是 npm 的直接替代品,速度更快、效率更高,它由 npm/yarn 衍生而來,但卻解決了 npm/yarn 內(nèi)部潛在的 bug,并且極大了地優(yōu)化了性能,本文給大家介紹pnpm的安裝及其使用,感興趣的朋友一起看看吧2023-12-12