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}} ~~~