koa art-template 模板引擎
适用于 koa 的模板引擎选择非常多，比如 jade、ejs、nunjucks、art-template 等。 art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行 性能，并且同时支持 NodeJS 和浏览器。 art-template 支持 ejs 的语法，也可以用自己的类似 angular 数据绑定的语法
// 安装
npm install --save art-template
npm install --save koa-art-template
app.js
const Koa = require('koa')
const router = require('koa-router')()
const render = require('koa-art-template')
const path = require('path')
const app = new Koa()
render(app, {
root: path.join(__dirname, 'html'), // 视图的位置
extname: '.html', // 后缀名
debug: process.env.NODE_ENV !== 'production' // 是否开启调式模式
})
router.get('/', async (ctx) => {
await ctx.render('art')
})
router.get('/news', async (ctx) => {
const list = {
name: 'kobe bryant',
age: 41,
hobby: ['basketball', 'business', 'cartoon']
}
await ctx.render('news', {
list
})
})
app.use(router.routes())
.use(router.allowedMethods)
app.listen(30002)
art.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
koa-art-template
</body>
</html>
news.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>{{list.name}}</h2>
{{if list.age > 20}}
{{list.age}}
{{/if}}
<br>
{{each list.hobby}}
{{$index}} {{$value}}
<br>
{{/each}}
</body>
</html>
效果截图
image.png
模板语法地址：https://aui.github.io/art-template/zh-cn/docs/syntax.html#输出
