Flask第31課——include標籤

時間 2019-12-07

原文原文鏈接

咱們在上一節代碼基礎上增長一些代碼，樣式：html

文件名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標籤了：spa

用法code

{% include '引用文件路徑' %}

用include前提是把相同的代碼先提取出來，因此咱們將對應的代碼先提取成文件：orm

文件結構：視頻

headers.htmlhtm

<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.htmlblog

<style>    .footer{
        height: 60px;
        background: #3a3a3a;
    }    .footer p{
        color: #fff;
        margin-left: 30px;        
        padding-top: 20px;    
    }
</style>

<div class="footer">    <p>頁面底部</p>
</div>

將公共部分提取出之後在調用的地方只須要用include標籤調用便可：input

index.htmlit

{% 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>

顯示

獲取最新內容請關注公衆號：自動化測試實戰

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。