flask模版繼承和block

時間 2019-11-18

標籤 flask 模版繼承 block 欄目 Python 简体版

原文原文鏈接

模版繼承和block的目的就是爲了減小前端代碼量html

flask_ones.py前端

#encoding:utf-8
from flask import Flask,url_for,redirect,render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/login/')
def login():
    return render_template('login.html')


if __name__ == '__main__':
    app.run(debug=True)

html文件flask

#################### index.html ################## <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .nav{ background:rebeccapurple; height:65px;
        } ul{ overflow: hidden;
        } ul li{ float: left; list-style: none; padding:0 10px; line-height: 65px;
        } ul li a{ color: white;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">發佈問答</a></li>
        </ul>
    </div>
    <h1>這是index頁面</h1>
</body>
</html> #####################login.html###################
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    <style> .nav{ background:rebeccapurple; height:65px;
        } ul{ overflow: hidden;
        } ul li{ float: left; list-style: none; padding:0 10px; line-height: 65px;
        } ul li a{ color: white;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">發佈問答</a></li>
        </ul>
    </div>
　　 <h1>這是login頁面</h1>

</body>
</html>

對比index.html和login.html的代碼發現，除了紅色的代碼部分，其他代碼均同樣，而若是有其餘更多相似的頁面，會加大代碼的量，所以引出如下的模版繼承和blockapp

語法：url

{% extends "base.html" %}

{% block name %}
    ....
{% endblock %}

因此以上代碼簡化爲：spa

同級目錄新建一個common.html，將相同的代碼部分經過繼承帶進去，以下：debug

common.html(公共代碼部分)code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            background:rebeccapurple;
            height:65px;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            list-style: none;

            padding:0 10px;
            line-height: 65px;
        }

        ul li a{
            color: white;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">發佈問答</a></li>
        </ul>
    </div>
    {% block main %}

 {% endblock %}

</body>
</html>

此時index.html和login.html代碼爲:htm

#index.html

{% extends "base.html" %}　　　　　　#表明繼承base.html

{% block main %}　　　　　　　　　　　　　　　　#這裏的main要與base.html裏blcok的設定的名字相同　　 <h1>這是index頁面</h1>　　　　　　　　　　　#將這裏的內容傳到base.html的block下，並在本文件裏應用 {% endblock %}


#login.html
{% extends "base.html" %}

{% block main %}
    <h1>這是登錄頁面</h1>
{% endblock %}

相關標籤/搜索

每日一句

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