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

文件名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. Unity中使用的一套敏感词过滤方式

    当项目中的敏感词数量不是很多的时候,直接用数组来遍历过滤其实也可以,但是具体的数量有多大,这个肯定不好说,因此,对.txt中的敏感词合理组织后再进行过滤就显得非常有必要了. 如上图,左边是txt中配置 ...

  2. JavaScript的深拷贝和浅拷贝总结

    深拷贝和浅拷贝 深拷贝:拷贝实例:浅拷贝:拷贝引用(原对象). 说深拷贝和浅拷贝之前,我先去了解了下高程书上的JavaScript的变量类型: 基本类型:undefined.null.Boolean. ...

  3. hdu2609 最小表示法

    Give you n ( n < 10000) necklaces ,the length of necklace will not large than 100,tell me How man ...

  4. thinkphp中页面中时间的默认显示

    1,第一我们都知道thinkphp 控制器和页面是通过$this->assgin();或着$this->在页面中要得到的值的随便变量   ,来传值的 比如(此方法是在有时间控件才能使用的) ...

  5. hdu-2147-博弈

    kiki's game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 40000/10000 K (Java/Others)Total ...

  6. 从客户端(......)中检测到有潜在危险的 Request.Form 值

    在提交表单时候,asp.net 提示:"从客户端(......)中检测到有潜在危险的 Request.Form 值" .asp.net中的请求验证特性提供了某一等级的保护措施防止X ...

  7. OC Xcode中常见的错误

    在开发的过程中难免会遇到很多的错误,可是当看到系统给出的英文时,又不知道是什么意思.所以这篇文章总结了Xcode中常见的一些英文单词及词组,可以帮助初学的人快速了解给出的提示.多练习,就肯定能基本掌握 ...

  8. sql 数据库显示 正在恢复

    问题原因:Sql Server 一直显示正在恢复.有事务未恢复或者还原数据库造成 处理办法: 步骤一:数据库上右键->任务->分离 步骤二:数据库上右键->任务->脱机 数据库 ...

  9. popen strtok 函数的使用

    FILE * popen ( const char * command , const char * type ); int pclose ( FILE * stream );   type 参数只能 ...

  10. 高性能mysql-----MySQL_explain关键字分析查询语句(一)

    转载地址:https://www.cnblogs.com/xpp142857/p/7373005.html   MySQL_explain关键字分析查询语句 通过对查询语句的分析,可以了解查询语句的执 ...