3-9 art-template · koa

# [art-template文档](https://aui.github.io/art-template/zh-cn/docs/index.html) ## 1.安装配置 ~~~ npm install --save art-template npm install --save koa-art-template ~~~ ## 2.Example ~~~ const Koa = require('koa'); const render = require('koa-art-template'); const {resolve} = require('path'); const app = new Koa(); render(app, { root:resolve(__dirname, 'views'), extname: '.html', //后缀也可以写成.art debug: process.env.NODE_ENV !== 'production' }); app.use(async function (ctx) { await ctx.render('user'); }); app.listen(8080); ~~~ ## 3.实例 ~~~ const Koa = require('koa'); const router = require('koa-router')(); const render = require('koa-art-template'); const {resolve} = require('path'); const app = new Koa(); /* 配置模板引擎 */ render(app, { root: resolve(__dirname, 'views'), extname: '.html', debug: process.env.NODE_ENV !== 'production' }); router.get('/', async ctx => { await ctx.render('index',{name:"chengchao"}) }) app.use(router.routes()).use(router.allowedMethods()) app.listen(8080) ~~~ ## 4.基本语法 ### 4.1 if ~~~ {{if isShow}} 加载更多 {{/if} ~~~ - if-else ~~~ {{if isShow}} 加载更多 {{else}} 不要加载 {{/if}} ~~~ ### 4.2 遍历 each ~~~ {{each arr}} {{$index}}-{{$value}} {{/each}} ~~~ ### 4.3 模板继承 #### 标准语法 ~~~ {{extend './layout.art'}} {{block 'head'}} ... {{/block}} ~~~ 模板继承允许你构建一个包含共同元素的模板“骨架”。范例 ~~~ //骨架模板  <!doctype html> <html> <head> <meta charset="utf-8"> <title>{{block 'title'}}My Site{{/block}}</title> {{block 'head'}} {{/block}} </head> <body> {{block 'content'}}{{/block}} </body> </html> ~~~ ~~~ //index.js  {{extend './layout.html'}} {{block 'title'}}{{title}}{{/block}} {{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}} {{block 'content'}} This is just an awesome page. {{/block}} ~~~ ### 4.4 子模板 ~~~ {{include './header.html'}} ~~~ ### 4.5原文输出 ~~~ {{@value}} ~~~