koa-artTemplate 的使用
1.父页面
<html> <head> <meta charset="UTF-8"> <title>我的音乐</title> <!--加载资源包--> {{include '../particles/link.html'}} </head> <body> <!--引入头部--> {{include '../particles/header.html'}} <!--中间留坑--> {{block 'content'}}{{/block}} <!--引入底部--> {{include '../particles/footer.html'}} </body> </html>
2.子页面
{{extend './layout/main.html'}} {{block 'content'}} <div class="container"> <form id="form" method="post" action="/"> <div class="form-group"> <label for="">歌曲编号</label> <input type="text" name="id" class="form-control" placeholder="请输入歌曲编号"> </div> <div class="form-group"> <label for="">歌曲标题</label> <input type="text" name="title" class="form-control" placeholder="请输入歌曲标题"> </div> <div class="form-group"> <label for="">歌曲时长</label> <input type="text" name="time" class="form-control" placeholder="请输入歌曲时长"> </div> <div class="form-group"> <label for="">歌手</label> <input type="text" name="singer" class="form-control" placeholder="请输入歌手姓名"> </div> <div class="form-group"> <label for="">歌曲文件</label> <input type="file" name="file"> <p class="help-block">请上传歌曲文件.</p> </div> <button type="submit" class="btn btn-success">点击添加</button> </form> </div> {{/block}}
3. 拆分的页面
footer.html
<div class="aw-footer-wrap"> <div class="aw-footer"> Copyright © 2016, All Rights Reserved </div> </div>
header.html
<div class="aw-footer-wrap"> <div class="aw-footer"> Copyright © 2016, All Rights Reserved </div> </div>
link.html
<link href="/public/img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="/public/vender/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="/public/css/icon.css" /> <link href="/public/css/common.css" rel="stylesheet" type="text/css" /> <link href="/public/css/link.css" rel="stylesheet" type="text/css" /> <link href="/public/css/style.css" rel="stylesheet" type="text/css" /> <script src="/public/vender/jquery/dist/jquery.js" type="text/javascript"></script> <script src="/public/vender/bootstrap/dist/js/bootstrap.js"></script>
效果:
越努力越幸运