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

文件名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. WPF自定义控件的两种方式

    方法A: 第一步:My自定义控件:Control 第二步:针对  “My自定义控件” 类型,编写<style>或<模板>(UI的外观完全由用户自己定义) 第三步: 使用My自定 ...

  2. Phonetics: Lecture Three 语音 第三课 Teacher:Patrick

    元音字母: [u]   put [pʊt]  push [pʊʃ]  full [fʊl]  sugar ['ʃʊgɚ]  cook [kʊk]  look [lʊk]   took [tʊk] (v ...

  3. java克隆机制

    看了下面博客就很明白了 http://www.cnblogs.com/Qian123/p/5710533.html#_label0 java对象创建方式有三种: 1.通过new对象 2.通过java克 ...

  4. Professional layer CodeForces - 1103D (状压,gcd)

    大意: 给定$n$元素序列$a$, 现在想要让$gcd(a_1,a_2,...,a_n)=1$. 对于每个$a_i$可以除以一个不超过$k$的因子, 代价为$e_i$, 假设一共选择了$x$个元素去除 ...

  5. YOLO v2 损失函数源码分析

    损失函数的定义是在region_layer.c文件中,关于region层使用的参数在cfg文件的最后一个section中定义. 首先来看一看region_layer 都定义了那些属性值: layer ...

  6. python-day13--装饰器

    1.开放封闭的原则: 1.对扩展是开放的 为什么要对扩展开放呢? 我们说,任何一个程序,不可能在设计之初就已经想好了所有的功能并且未来不做任何更新和修改.所以我们必须允许代码扩展.添加新功能. 2.对 ...

  7. BZOJ1605 [Usaco2008 Open]Crisis on the Farm 牧场危机

    标题好长&&我是权限狗,汪汪! 题没看懂的我以为这是一道极难滴题目...然后,然后我就看懂题了. 数据少给了一个条件K <= 30...(没这条件还做个鬼...) f[k, i, ...

  8. PHP:php中的双引号和单引号的区别

    双引号: $a="369"; $b="$a"; echo $b;//输出:369 单引号: $a="369"; $b='$a'; echo ...

  9. bzoj1089

    题解: 递推 f[i]=f[i-1]^n+1 ans=f[d]-f[d-1] 代码: #include<bits/stdc++.h> using namespace std; int n, ...

  10. Flask初级（五）flash在模板中使用继承，模板的模板

    Project name :Flask_Plan templates:templates static:static 继续上一篇文章. 我们不希望每个页面都写一遍引入js,css,导航条……………… ...