art-template 模板引擎:
中文文档:http://aui.github.io/art-template/zh-cn/docs/
既支持ejs 的语法,也可以用自己的类似angular 数据绑定的语法
在 koa 中使用 art-template 模板引擎:
npm install --save art-template
npm install --save koa-art-template https://www.npmjs.com/package/koa-art-template
const Koa = require('koa') const app = new Koa() const router = require('koa-router')() const render = require('koa-art-template') const path = require('path') //配置koa-art-template模板引擎 render(app,{ root:path.join(__dirname,'views'), //视图的位置 extname:'.html', //后缀名 debug: process.env.NODE_ENV !== 'production' ////是否开启调试模式 }) router.get('/',async (ctx)=>{ console.log('首页') await ctx.render('index') }) app.use(router.routes()); app.use(router.allowedMethods()); app.listen(3000);
art-template 模板引擎语法
http://aui.github.io/art-template/zh-cn/docs/syntax.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> <h3>index.html页面</h3> <h5>子模板</h5> {{include 'layout/header1.html'}} <% include('layout/header2.html') %> <h5>绑定数据</h5> <%=msg%> <br> {{msg}} <br> <%= 0 || 1 %> <br> {{0 || 1}} <br> <%= 1 + 1 %> <br> {{1+1}} <h5>绑定html数据</h5> <%- htmlMsg %> {{@ htmlMsg}} <h5>条件渲染</h5> <%if(num==10){%> num=10 <%}else{ %> num!=10 <%}%> <br> {{if num==10}} num=10 {{else}} num!=10 {{/if}} <h5>列表渲染</h5> <ul> <%for(var i=0;i<list.length;i++){%> <li><%=list[i]%></li> <%}%> </ul> {{each list}} {{$index}}------{{$value}} {{/each}} </body> </html>