Flask第31课——include标签

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

文件名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>

显示

 

 

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