1.安装
npm install art-template --save
npm install koa-art-template --save
2.引入
const render = require('koa-art-template');
3.配置
// 配置koa-art-template模板引擎
render(app,{
root:path.join(__dirname,'views'), //视图位置
extname:'.html',//后缀名(.ejs)
debug:process.env.NODE_ENV !== 'production' //是否开启调试模式
})
4.渲染
await ctx.render(模板名,{参数})
案例:
目录结构
app_art.js
let Koa = require('koa');
let Router = require('koa-router');
let app = new Koa();
let router = new Router();
let path = require('path');
// 引入koa-art-template模板
const render = require('koa-art-template');
// 配置koa-art-template模板引擎
render(app,{
root:path.join(__dirname,'views'), //视图位置
extname:'.html',//后缀名
debug:process.env.NODE_ENV !== 'production' //是否开启调试模式
})
router.get('/',async (ctx,next) => {
let obj = {
name:'muzidigbig',
sex:'<h2>男</h2>',
list:[1,2,3,4,5],
flg:true
}
await ctx.render('art',{
obj
})
})
app.use(router.routes());//启动路由
app.use(router.allowedMethods());
app.listen(3005);
模板views/art.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>这是一个art-template模板引擎</h2>
{{obj.name}}
{{@ obj.sex}}
{{if obj.flg}}true{{/if}}
{{each obj.list}}
<li>{{$index}}---{{$value}}</li>
{{/each}}
<hr>
<!-- 引入子模版 -->
{{include './public/footer.html'}}
</body>
</html>
子模版footer.html
<h1>这是一个底部</h1>