koa-artTemplate 的使用

最新推荐文章于 2021-12-08 09:00:00 发布

weixin_30312557

最新推荐文章于 2021-12-08 09:00:00 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guangzhou11/p/10184550.html

本文详细介绍了如何使用模板引擎在父页面中加载资源包、头部、中间内容及底部，并展示了子页面如何通过继承父页面来实现特定内容的填充。此外，还提供了拆分页面的具体示例，包括footer、header和link部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>