欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

python?flask之模板繼承方式

 更新時間：2023年03月02日 10:39:58   作者：現(xiàn)在叫阿湯哥  
這篇文章主要介紹了python?flask之模板繼承方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

flask之模板繼承

為什么要用模板繼承？

原因很簡單，因為模板繼承能讓我們在實(shí)現(xiàn)效果的前提下少些很多代碼！

咱廢話不多說，先來看個小例子，看完我講的這個例子，相信你能更加明白模板繼承的好處、優(yōu)點(diǎn)！（為了讓大家能夠更加明白模板繼承的優(yōu)點(diǎn)，在這里我先以傳統(tǒng)方式來做）

首先、在static目錄下新建一個style目錄（用于存放所有的css文件），然后新建一個style文件（style.css），其代碼如下：

*{margin: 0; padding: 0;}
ul{list-style: none;}
li{width:100px; float: left;}
.cl_btoh{clear: both;}
 
#head{width:800px; height:50px; line-height: 50px; margin:0 auto; background-color: #303641;}
#head a{color:#ECEFF1;}
#head ul{line-height: 50px;}
#head li{text-align: center;}
 
#main{height:400px; width:800px; background-color: yellowgreen; margin: 0 auto; color:#FFFFFF;
text-align: center; line-height: 400px;}
 
#footer{height:40px; width:800px; margin: 0 auto; background-color: #3B666B; color:#FFFFFF;
text-align: center; line-height: 40px;}

在templates模板目錄下新建一個index.html文件（首頁）和一個list.html（列表頁）

index.html文件代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}">
	</head>
	<body>
        {# head start#}
        <div id="head">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">養(yǎng)生新聞</a></li>
                <li><a href="#">人群養(yǎng)生</a></li>
                <li><a href="#">兩性養(yǎng)生</a></li>
                <li><a href="#">生活養(yǎng)生</a></li>
                <li><a href="#">飲食養(yǎng)生</a></li>
                <li><a href="#">中醫(yī)養(yǎng)生</a></li>
            </ul>
        </div>
        <div class="cl_btoh"></div>
 
        {#  main start  #}
        <div id="main">
            <h4>這是index頁面主體部分</h4>
        </div>
 
        {#  footer start  #}
        <div id="footer">
            <h4>網(wǎng)站底部內(nèi)容</h4>
        </div>
	</body>
</html>

list.html文件代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}">
	</head>
	<body>
        {# head start#}
        <div id="head">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">養(yǎng)生新聞</a></li>
                <li><a href="#">人群養(yǎng)生</a></li>
                <li><a href="#">兩性養(yǎng)生</a></li>
                <li><a href="#">生活養(yǎng)生</a></li>
                <li><a href="#">飲食養(yǎng)生</a></li>
                <li><a href="#">中醫(yī)養(yǎng)生</a></li>
            </ul>
        </div>
        <div class="cl_btoh"></div>
 
        {#  main start  #}
        <div id="main">
            <h4>這是list頁面主體部分</h4>
        </div>
 
        {#  footer start  #}
        <div id="footer">
            <h4>網(wǎng)站底部內(nèi)容</h4>
        </div>
	</body>
</html>

然后我們再創(chuàng)建一個test.py文件，其代碼如下：

from flask import Flask,render_template
 
app = Flask(__name__)
 
@app.route("/")
def index():
    return render_template("index.html")
 
@app.route("/list/")
def my_list():
    return render_template("list.html")
 
if __name__ == "__main__":
    app.run(debug=True)

運(yùn)行test.py文件，打開瀏覽器，看看運(yùn)行效果，結(jié)果如下。

這兩個運(yùn)行結(jié)果，除了中間部分不一樣，頭部、底部都一樣，是吧？？我可以坦白告訴大家，基本上每個網(wǎng)站頭部、尾部都一樣，不信你可以打開新浪，網(wǎng)易、豆瓣網(wǎng)站瞅瞅.....有點(diǎn)跑題了哈！！咱言歸正傳。

既然我們知道網(wǎng)站頭部、底部都一樣，哪我們是不是可以把網(wǎng)站頭部、底部代碼抽取出來，放到公共頁面中，下次需要我們在繼承或者調(diào)用就OK了，是吧？說干就干?。?/p>

我們在templates目錄下新建一個base.html文件，這個文件（base.html）可以稱為父模板或基模板，其代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}">
</head>
<body>
    {% block head %}
         <div id="head">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">養(yǎng)生新聞</a></li>
                <li><a href="#">人群養(yǎng)生</a></li>
                <li><a href="#">兩性養(yǎng)生</a></li>
                <li><a href="#">生活養(yǎng)生</a></li>
                <li><a href="#">飲食養(yǎng)生</a></li>
                <li><a href="#">中醫(yī)養(yǎng)生</a></li>
            </ul>
        </div>
        <div class="cl_btoh"></div>
    {% endblock %}
 
 
    {% block main %}
         <div id="main">
            <h4>這是index頁面主體部分</h4>
        </div>
    {% endblock %}
 
    {% block footer %}
         <div id="footer">
            <h4>網(wǎng)站底部內(nèi)容</h4>
        </div>
    {% endblock %}
</body>
</html>

我們在父模板中定義好了接口后，子模板（index.html 跟 list.html）的代碼可以刪除了。刪除了不能就這樣走人完事了，我們還得實(shí)現(xiàn)我們之前的效果對吧！

在index.html文件中，我們通過extends語句來導(dǎo)入父模板，然后就能在子模板中衍生父模板定義的接口。

index.html代碼如下：

{% extends "base.html" %}

咦，咋就一行代碼嘞，阿湯鍋，你在逗我呢？嗯，沒錯，就一行代碼！夠精簡吧！！丫的，不信是吧？不信我們運(yùn)行看看效果，結(jié)果如下：

結(jié)果是不是和之前一模一樣，是吧？現(xiàn)在有個需求，啥需求呢？比如我想將index.html頁面“網(wǎng)站底部內(nèi)容“這幾個字改成footer，哪怎么做呢？

做法：

在index.html頁面中，重寫父模板定義的footer接口，如果沒有定義，就得在父模板先定義再重寫。（由于我們在父模板中定義了，哪我們就無需定義），index.html其代碼如下：

{% extends "base.html" %}
 
{% block footer %}
     <div id="footer">
            <h4>footer</h4>
     </div>
{% endblock %}

運(yùn)行，試試，看是不是實(shí)現(xiàn)了我們得需求！

嗯，底部文字確實(shí)變成了footer，不過呢，現(xiàn)在又有一個新需求。我想要在這是index頁面主體部分加一行內(nèi)容，咋辦呢？有朋友可能會說：哪還不簡單，直接在index.html block main中定義就ok了唄。嗯，我們來試試這法子，在index.html增加如下代碼：

{% block main %}
    <div id="main">
        <p>test</p>
    </div>
{% endblock %}

運(yùn)行結(jié)果如下：

阿湯哥、咋回事？不是說好的在這是index頁面主體部分下面加一行內(nèi)容？？之前的內(nèi)容跑哪去了？為什么會出現(xiàn)這樣的情況呢？？原因很簡單，因為我們在子模板定義的內(nèi)容將父模板接口定義的內(nèi)容覆蓋了，哪有啥解決辦法呢？要想實(shí)現(xiàn)功能，只需增加一個super變量即可，代碼如下：

{% block main %}
    {{ super() }}
    <div style="height:auto;width: 800px;background-color:yellowgreen;margin:0 auto;"><b>ee</b></div>
{% endblock %}

再運(yùn)行試試，結(jié)果實(shí)現(xiàn)了我們想要的結(jié)果。

在模板繼承中，我們需要注意以下幾點(diǎn)：

1、子模板第一段必須是{% extends "父模板文件路徑" %}

2、子模板內(nèi)容必須寫在父模板定義的接口中，寫在接口外面的內(nèi)容不會被渲染。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論