koa html 模板,koa中使用art-template

http://aui.github.io/art-template/koa/

1、

npm install --save art-template

npm install --save koa-art-template

2、const render = require('koa-art-template');

3、

render(app, {

root: path.join(__dirname, 'view'), 视图的位置

extname: '.art', 后缀名

debug: process.env.NODE_ENV !== 'production' 是否开启调试模式

});

4、 await ctx.render('user');

app.js

var Koa=require('koa'),

router = require('koa-router')(),

render = require('koa-art-template'),

path=require('path');

var app=new Koa();

//配置 koa-art-template模板引擎

render(app, {

root: path.join(__dirname, 'views'), // 视图的位置

extname: '.html', // 后缀名

debug: process.env.NODE_ENV !== 'production' //是否开启调试模式

});

//在index中用与ejs相同的的方式渲染页面

router.get('/',async (ctx)=>{

//ctx.body="首页"

let list={

name:'张三',

h:'

这是一个h2

',

num:20,

data:['11111111','2222222222','33333333333']

}

await ctx.render('index',{

list:list

});

})

//在news中用{{}}渲染页面

router.get('/news',async (ctx)=>{

let app={

name:'张三11',

h:'

这是一个h211

',

num:20,

data:['11111111','2222222222','33333333333']

};

await ctx.render('news',{

list:app

});

})

index.html 与ejs相同的的方式渲染页面

这是一个koa-art-template

绑定数据

绑定html数据

条件

10){%>

大于10

小于10

循环数据

news.html 用{{}}渲染页面

这是一个koa-art-template

绑定数据

{{list.name}}

绑定html数据

{{@list.h}}

条件

{{if num>20}} 大于20 {{else}} 小于20{{/if}}

循环数据

{{each list.data}}

{{$index}}---{{$value}}

{{/each}}

{{include 'public/footer.html'}}