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

文件名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 4.x 资源加载

    using UnityEngine; using System.Collections; using System.IO; public class LoadResource : MonoBehavi ...

  2. Java EE、Java SE和Java ME

    Java SE=Java Standard EditionJava EE=Java Enterprise EditionJava ME=Java Mobile Edition SE主要用于桌面程序,控 ...

  3. 使用Jenkins实现maven项目一键部署

    下面的博客请详细的,值得一看:jenkins+maven+svn实现简单的一键发布 http://blog.csdn.net/pein_zero/article/details/52597615#co ...

  4. LeetCode--176--第二高的薪水

    问题描述: 编写一个 SQL 查询,获取 Employee 表中第二高的薪水(Salary) . +----+--------+ | Id | Salary | +----+--------+ | 1 ...

  5. php--------使用 isset()判断字符串长度速度比strlen()更快

    isset()速度为什么比strlen()更快呢? strlen()函数函数执行起来相当快,因为它不做任何计算,只返回在zval 结构(C的内置数据结构,用于存储PHP变量)中存储的已知字符串长度.但 ...

  6. string类的用法笔记

    要想使用标准C++中string类,必须要包含 #include <string>// 注意是<string>,不是<string.h>,带.h的是C语言中的头文件 ...

  7. python 小练习 9

    还记得中学时候学过的杨辉三角吗?具体的定义这里不再描述,你可以参考以下的图形: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 .............. 先 ...

  8. jquery插件Loadmask

    Loadmask是一个jquery plugin,使用此插件可以在DOM元素加载或更改内容时为此DOM元素添加一个屏蔽层,以防止用户互动,同时起到提醒用户后台任务正在运行的作用. 它可实现的效果:

  9. Pandas DataFrame 数据选取和过滤

    This would allow chaining operations like: pd.read_csv('imdb.txt') .sort(columns='year') .filter(lam ...

  10. js 实现智能输入数字

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...