這里矩肩，我主要整理兩種模板引擎的使用，ejs和art-template：
1. EJS模板引擎的使用：
1.1 安裝koa-views和ejs：
npm install koa-views --save
npm install ejs --save
1.2 引入koa-views配置中間件：
const views = require('koa-views');
/**引入koa-views配置中間件：指定模板文件的目錄肃续，ejs為模板引擎*/
app.use(views(__dirname + '/views', {
map: {html: 'ejs'},
}));
上面的代碼中黍檩，指定了模板文件的目錄為/views，且使用ejs做為模板引擎始锚。
1.3 在Koa中使用ejs：
通過(guò)ctx.render('index.html', data:data)刽酱，向模板文件傳遞數(shù)據(jù)：
/*Koa代碼*/
router.get('/', async (ctx, next)=>{
let title = 'Hello Joyitsai';
await ctx.render('index', {title: title})
})
1.4 ejs綁定上面發(fā)送的數(shù)據(jù)用等號(hào)<%=title%>:
<!--html模板代碼-->
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h3><%=title%></h3>
</body>
</html>
1.5 ejs綁定html語(yǔ)句：
如果從后端傳送的數(shù)據(jù)是html語(yǔ)句，那么要用<%-data%>來(lái)解析html語(yǔ)句：
router.get('/', async (ctx, next)=>{
let data = '<h2>這是從后端發(fā)來(lái)的html語(yǔ)句</h2>'
await ctx.render('index', {data:data})
})
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!--解析后端發(fā)送的html語(yǔ)句用減號(hào)-->
<%-data%>
</body>
</html>
1.6 ejs引入模板：
在實(shí)際開(kāi)發(fā)中瞧捌，像導(dǎo)航欄這樣公共的頁(yè)面結(jié)構(gòu)會(huì)單獨(dú)分離成一個(gè)模板文件棵里，然后在其他頁(yè)面中直接導(dǎo)入即可，同樣姐呐，這里也可以通過(guò)<%include header.html%>引入模板頁(yè)面殿怜，模板文件結(jié)構(gòu)如下：
|——app.js
|—— ...
|——views
|——public
|——header.html
|——index.html
其中，header.html為要在index.html中引入的模板皮钠，那么引入代碼如下：
<!--public/header.html-->
<h2>這是頭部信息頁(yè)面</h2>
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!--默認(rèn)views/為主目錄了稳捆，引入路徑不加雙引號(hào)或單引號(hào)-->
<%include public/header.html%>
</body>
</html>
1.7 ejs模板判斷語(yǔ)句：
在ejs模板中。if...else..語(yǔ)句要包在<%%>中
/**后端代碼*/
router.get('/', async (ctx, next)=>{
let age = 24
await ctx.render('index', { age:age})
})
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<%if(age>20){%>
大于20歲
<%}else{%>
小于等于20歲
<%}%>
</body>
</html>
1.8 ejs模板中的循環(huán)數(shù)據(jù)：
同樣麦轰，將for(var i=0;i<data.length;i++){}循環(huán)包含在<%%>中乔夯，示例代碼如下：
/**后端代碼*/
router.get('/', async (ctx, next)=>{
let datalist = ['joyitsai', 'ming', 'bob'];
await ctx.render('index', {datalist:datalist})
})
<body>
<br/>
<ul>
<%for(var i=0;i<datalist.length;i++){%>
<li><%=datalist[i]%></li>
<%}%>
</ul>
</body>
另外，如果需要在每一個(gè)頁(yè)面都要獲取像用戶信息這樣的數(shù)據(jù)款侵，每次ctx.render()時(shí)都傳遞這個(gè)數(shù)據(jù)會(huì)比較麻煩末荐，解決辦法是，通過(guò)ctx.state = {data:data}來(lái)設(shè)置公共數(shù)據(jù)新锈，綁定在ctx.state上的數(shù)據(jù)甲脏，可以在任何一個(gè)頁(yè)面中直接調(diào)用，而不需要通過(guò)ctx.render()來(lái)傳遞了。
關(guān)于ejs模板引擎的一些常用用法都列舉出來(lái)了块请，多多練習(xí)就記熟了娜氏，其實(shí)并沒(méi)什么難度。
2. art-template模板引擎的使用：
art-template是常用模板引擎中渲染速度最快的墩新，看下面一張測(cè)試圖：
art-template支持ejs語(yǔ)法贸弥，所以可以完全按照ejs的語(yǔ)法來(lái)寫(xiě)。
2.1 安裝art-template引擎：
npm install art-template --save
npm install koa-art-template --save
2.2 引入并配置art-template：
const Koa = require('koa');
const render = require('koa-art-template');
const path = require('path');
const app = new Koa();
render(app, {
root: path.join(__dirname, 'views'), //模板文件所在目錄
extname: '.html', //聲明模板文件的后綴名
debug: process.env.NODE_ENV !== 'production' //是否開(kāi)啟調(diào)試模式
})
2.3 art-template模板引擎語(yǔ)法：
基本與ejs的相同海渊，除引入其他模板文件除外绵疲，在art-template中，引入其他模板文件的語(yǔ)法如下：
<body>
<!--art-template中引入模板時(shí)要加括號(hào)和引號(hào)-->
<%include('header.html')%>
<h3><%=title%></h3>
</body>
其他語(yǔ)法自行參考官方文檔：art-template語(yǔ)法臣疑。
