1- 安装

  1. npm install --save art-template
  2. npm install --save koa-art-template

2- 配置

  1. const  render = require("koa-art-template");
  2. const path = require("path");
  3. render(app,{
  4.     /* __dirname当前文件所在文件夹 */
  5.     root:path.join(__dirname,"pages"),
  6.     extname:".html"
  7. })
  8. router.get("/",async ctx=>{
  9.     await ctx.render("index.html")
  10. })

2-1 实例

  1. const koa = require("koa");
  2. const app = new koa();
  3. const router = require("koa-router")();
  4. const render = require("koa-art-template");
  5. const path = require("path")
  6. const axios = require("axios")
  7. render(app,{
  8.     /* __dirname 当前文件所在的文件夹 */
  9.     root:path.join(__dirname,'pages'),
  10.     extname:".html"
  11. })
  12. router.get("/",async ctx=>{
  13.     var html = await axios.get("http://192.168.4.18:8000/")
  14.     await ctx.render("index",{arr:html.data.result})
  15. })
  16. router.get("/friend",async ctx=>{
  17.     await ctx.render("friend.html")
  18. })
  19. app.use(router.routes())
  20. app.listen(3000)

3- 基本语法

3-1 遍历 each

  1. {{each arr}}
  2.    <p>{{$index}}-{{$value}}</p>
  3. {{/each}}

3-2 if && if-else

  1. // if
  2. {{if isShow}}
  3.     <p>加载更多</p>
  4. {{/if}
  6. // if-else
  7. {{if isShow}}
  8.     <p>加载更多</p>
  9. {{else}}
  10.     <p>不要加载</p>
  11. {{/if}}

5- 模板继承

可以使用一个通用的模块

5-1 extend

  1. //template.html  定义一个公用的导航模块
  2. //index.html  可以在index中使用extend关键字将其获取
  3. {{extend 'template.html'}}

5-2 include

可以获取子模板

  1. {{include './nav.html'}}

5-3 block 插槽

  1. //骨架模板
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>{{block "title"}} {{/block}}</title>
  8. </head>
  9. <body>
  10.     {{include './nav.html'}}
  11.     <!-- 插槽 -->
  12.     {{block "content"}}
  14.     {{/block}}
  15. </body>
  16. </html>
  1. // index.html
  2. {{extend './common/template.html'}}
  4. {{block "title"}}音乐{{/block}}
  6. {{block "content"}}
  7.     <p>music</p>
  8. {{/block}}

5-4 标准语法

  1. {{extend "./common/template.html"}}
  3. {{block 'content'}}
  4. {{/block}}