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

文件名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. Ubuntu 的 desktop 和 server 还是有区别。

    除了安装的包,比如 GUI, LAMP 上有差别之外,所用的内核也稍有不一样. 不过desktop可以通过安装 sudo apt-get install linux-image-server 之后,编 ...

  2. [don't have permission to access]的一个经典原因

    那就是 ..... SELinux ...... 几年前好像经历过这个恶梦.现在又经历了一回. 从Windows上传了一个目录,做一个apache的别名Alias, 结果总是没有权限. chmod 7 ...

  3. [Java学习] java泛型通配符和类型参数的范围

    本节先讲解如何限制类型参数的范围,再讲解通配符(?). 类型参数的范围 在泛型中,如果不对类型参数加以限制,它就可以接受任意的数据类型,只要它是被定义过的.但是,很多时候我们只需要一部分数据类型就够了 ...

  4. Java数组的定义和使用

    如果希望保存一组有相同类型的数据,可以使用数组. 数组的定义和内存分配 Java 中定义数组的语法有两种: type arrayName[]; type[] arrayName; type 为Java ...

  5. scRNA-seq单细胞测序数据分析工具汇总

    本文总结自一篇综述: Computational approaches for interpreting scRNA-seq data 单细胞分析分为两个层次: cell level gene lev ...

  6. English trip -- VC(情景课)8 C

    MP review: 音标(Phonetic symbol) [ɪ]    lit adj. 照亮的,点着的(light的过去式及过去分词)n. (Lit)人名:(瑞典)利特:(老)李 [ʊ]   g ...

  7. English trip -- Phonics 4 元音字母 i

    IPA   国际音标(英语:International Phonetic Alphabet [ælfəbet],缩写:IPA),早期又称万国音标 VOWELS [ɪ]   [u]   [ʌ]   [ɒ ...

  8. 12月13日 什么是help_method，session的简单理解, find_by等finder method

    helper_method Declare a controller method as a helper. For example, helper_method :link_to def link_ ...

  9. Type cvc-complex-type.2.4.a: Invalid content was found starting with element 'build'.错误的解决方法

    项目突然间爆出了这样的问题: Description Resource Path Location Typecvc-complex-type.2.4.a: Invalid content was fo ...

  10. 标准的EO验证提示错误不够完整，抛出自定义的异常。

    我们通常会在EO里面对某些数据进行验证,比如在邀请供应商注册的时候,ORACLE标准逻辑会验证被邀请的供应商是否已经存在. 其验证逻辑在 oracle.apps.pos.schema.server.S ...