我们在上一节代码基础上增加一些代码，样式：

文件名index.html，代码：

{% from 'macros/forms.html' import input %}

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">

    <title>宏</title>

    <style>

        *{
            list-style: none;
            text-decoration: none;
        }

        .header{
            height: 60px;
            background: #3a3a3a;
            color: #fff;
            margin-bottom: 20px;
        }

        .header .nav-group{
            margin-left: 10px;
        }

        .header .nav-group li{
            float: left;
            line-height: 60px;
            margin: 0px 20px;
        }

        .nav-group li a{
            color: #fff;
        }

        .footer{
            height: 60px;
            background: #3a3a3a;
        }

        .footer p{
            color: #fff;
            margin-left: 30px;
            padding-top: 20px;
        }

    </style>
</head>
<body>

    <div class="header">

        <ul class="nav-group">

            <li><a href="#">新闻</a></li>

            <li><a href="#">音乐</a></li>

            <li><a href="#">贴吧</a></li>

            <li><a href="#">视频</a></li>

        </ul>

    </div>

    <table>

        <tbody>

            <tr>

                <td>账号</td>

                <td>{{ input(placeholder="请输入账号") }}</td>

            </tr>

            <tr>

                <td>密码</td>

                <td>{{ input(type="password", placeholder="请输入密码") }}</td>

            </tr>

            <tr>

                <td></td>

                <td>{{ input(type="submit", value="提交") }}</td>

            </tr>

        </tbody>

    </table>

    <div class="footer">

        <p>页面底部</p>

    </div>
</body>
</html>

现在考虑这样一个问题，如果页面头部和底部是很多页面要用的样式，那么如果在每一个新的文件中都要复制相同的代码肯定不是我们希望的，这时候就可以用到include标签了：

  • 用法

{% include '引用文件路径' %}

用include前提是把相同的代码先提取出来，所以我们将对应的代码先提取成文件：

文件结构：

headers.html

<style>

    *{
        list-style: none;
        text-decoration: none;
    }

    .header{
        height: 60px;
        background: #3a3a3a;
        color: #fff;
        margin-bottom: 20px;
    }

    .header .nav-group{
        margin-left: 10px;
    }

    .header .nav-group li{
        float: left;        
        line-height: 60px;        
        margin: 0px 20px;    
    }

    .nav-group li a{
        color: #fff;    
    }
</style>

<div class="header">

    <ul class="nav-group">

        <li><a href="#">新闻</a></li>

        <li><a href="#">音乐</a></li>

        <li><a href="#">贴吧</a></li>

        <li><a href="#">视频</a></li>

    </ul>
</div>

footers.html

<style>

    .footer{
        height: 60px;
        background: #3a3a3a;
    }

    .footer p{
        color: #fff;
        margin-left: 30px;        
        padding-top: 20px;    
    }
</style>

<div class="footer">

    <p>页面底部</p>
</div>

将公共部分提取出以后在调用的地方只需要用include标签调用即可：

index.html

{% from 'macros/forms.html' import input %}

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">

    <title>宏</title>
</head>
<body>

    {% include 'index/headers.html' %}
    <table>

        <tbody>

            <tr>

                <td>账号</td>

                <td>{{ input(placeholder="请输入账号") }}</td>

            </tr>

            <tr>

                <td>密码</td>

                <td>{{ input(type="password", placeholder="请输入密码") }}</td>

            </tr>

            <tr>

                <td></td>

                <td>{{ input(type="submit", value="提交") }}</td>

            </tr>

        </tbody>

    </table>

    {% include 'index/footers.html' %}
</body>
</html>

如果还有一个详情页，那么只需要：

detail.html

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">

    <title>Detail</title>
</head>
<body>

    {% include 'index/headers.html' %}
        <p>这是详情页</p>

    {% include 'index/footers.html' %}
</body>
</html>

显示

 
 
获取最新内容请关注公众号：自动化测试实战

Flask第31课——include标签的更多相关文章

  1. 【Flask模板】include标签

    # include标签:1. 这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置.2. `include`标签,如果想要使用父模版中的变量,直接用就可以了,不需要使用`with context ...

  2. Android 多个include标签的监听事件处理

    include标签的作用是为了xml文件代码的模块化,详细不再多提.主要是说说include标签的监听. 网上也有很多例子,不过大多是只写了一个include标签的监听,如果需要实现多个include ...

  3. include指令和include标签的区别

    区别 类别 语法 发生作用时间 包含的内容 转化成Servlet 编译时间 运行时间 include指令 <%@ include file="" %> 页面交换 实际内 ...

  4. Android优化——UI优化（二） 使用include标签复用布局

    使用include标签复用布局 - 1.include标签的作用 假如说我下图的这个布局在很多界面都用到了,我该怎么办?每个页面都写一遍的话,代码太冗余,并且维护难度加大. <LinearLay ...

  5. 【Android 界面效果25】android中include标签的使用

    在一个项目中我们可能会需要用到相同的布局设计,如果都写在一个xml文件中,代码显得很冗余,并且可读性也很差,所以我们可以把相同布局的代码单独写成一个模块,然后用到的时候可以通过<include ...

  6. JSP include标签和include指令

    test1.jsp <% int a = 5; out.println(a); %> test2.jsp <jsp:include page="/test1.jsp&quo ...

  7. Android Include标签

    编程的世界有的时候很微妙,有的时候就好像是在解决一个哲学问题,Android开发的时候,所有的布局,颜色,等(其实这些都可以称之为资源,Android中的资源是指非代码部分,如图片.音频.视频.字符等 ...

  8. mybatis include标签

    使用mybatis 的include标签达到SQL片段达到代码复用的目的 示例: xml文件 <sql id="paysql"> payid,p.oid,p.bdate ...

  9. Android中View绘制优化二一---- 使用<include />标签复用布局文件

    本文原创, 转载请注明出处:http://blog.csdn.net/qinjuning   译二:   使用<include />标签复用布局文件      翻译地址:http://de ...

随机推荐

  1. Confluence 6 设置公共访问备注

    你不能为匿名用户赋予空间管理员或者限制权限. 你可以让用户自行注册你的 Confluence 站点,同时也可以选择其他的用户注册选项,比如邀请用户注册等.请查看:Add and Invite User ...

  2. Confluence 6 获得 Active Directory 服务器证书

    上面的步骤说明了如何在你的 Microsoft Active Directory服务器上安装 certification authority (CA).这一步,你需要为你的 Microsoft Act ...

  3. js下载图片

    DownloadImgZP = imgPath => { const image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('c ...

  4. unittest参数化

    我们在写case的时候,如果用例的操作是一样的,就是参数不同,比如说要测一个登陆的接口,要测正常登陆的.黑名单用户登陆的.账号密码错误的等等,在unittest里面就要写多个case来测试. 这样的情 ...

  5. 第一个 MVC 应用程序（下半部分）

    2.4 创建一个简单的数据录入应用程序 本章的其余部分将通过一个简单的数据录入应用程序来考查 MVC 的更多基本特性.本小节打算分步进行,目的是演示 MVC 的运用. B1.设计一个数据模型 在 MV ...

  6. Intel daal4py demo运行过程

    daal安装(记得先安装anaconda): git clone https://github.com/IntelPython/daal4py.git cd daal4py conda create ...

  7. PHP:第三章——数组中的array_values

    例: <?php header("Content-Type:text/html;charset=utf-8"); //array_value(); //功能:返回数组中所有的 ...

  8. 微信小程序跨页面获取数据示例

    index.wxml <navigator class="navs" url="{{urls}}"> 中国 </navigator> i ...

  9. 数据仓库建模与ETL的实践

    一.Data仓库的架构 Data仓库(Data Warehouse DW)是为了便于多维分析和多角度展现而将Data按特定的模式进行存储所建立起来的关系型Datcbase,它的Data基于OLTP源S ...

  10. 快速切题 hdu2416 Treasure of the Chimp Island 搜索 解题报告

    Treasure of the Chimp Island Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...