python?include標(biāo)簽的使用方式及說(shuō)明

更新時(shí)間：2023年03月02日 11:44:05 作者：現(xiàn)在叫阿湯哥

這篇文章主要介紹了python?include標(biāo)簽的使用方式及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

include標(biāo)簽如何使用？

include標(biāo)簽的使用

在講python include標(biāo)簽使用之前，我們新建一個(gè)include_demo項(xiàng)目

截圖如下

項(xiàng)目新建好了，再在templates文件下新建一個(gè)index.html文件，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style: none;}
        a{text-decoration: none;
            color: #ffffff;}
        nav,footer,.main{width:1000px; height:40px; margin:0 auto;}
        ul{width: 1000px; height:40px; line-height: 40px;
            background-color:#000000;}
        li{width:120px; height:40px; line-height:40px; text-align: center;
        float:left;}
        .main{clear:both; line-height:40px; background-color:pink;}
        footer{height:40px;  background-color: green;}
    </style>
</head>
<body>
 
        <nav>
            <ul>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >首頁(yè)</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >關(guān)于我們</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >產(chǎn)品中心</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >新聞中心</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >服務(wù)宗旨</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >聯(lián)系我們</a></li>
            </ul>
        </nav>
        <div class="main">
            網(wǎng)站首頁(yè)主體部分
        </div>
       <footer>
            網(wǎng)站首頁(yè)footer部分
       </footer>
 
</body>
</html>

然后在include_demo.py頁(yè)面渲染一下index模板文件，代碼如下：

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

運(yùn)行include_demo.py文件，運(yùn)行結(jié)果如下：

在這里主要是為了方便講解include標(biāo)簽，所有沒太注重前端頁(yè)面部分。

通過(guò)上面index.html文件就能發(fā)現(xiàn)，我將公共和私有代碼部分都在一塊，假設(shè)網(wǎng)站有幾十個(gè)頁(yè)面，我將所有公共代碼和私有代碼

都放一塊，如果有一天要修改某個(gè)公共代碼塊，哪就得修改幾十個(gè)頁(yè)面，那將是件非常麻煩的事。為了方便管理項(xiàng)目，我們將頁(yè)面公共、私有代碼部分抽取出來(lái)。

我們新建一個(gè)header.html文件，把css樣式及nav標(biāo)簽內(nèi)容復(fù)制到header.html頁(yè)面中。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style: none;}
        a{text-decoration: none;
            color: #ffffff;}
        nav,footer,.main{width:1000px; height:40px; margin:0 auto;}
        ul{width: 1000px; height:40px; line-height: 40px;
            background-color:#000000;}
        li{width:120px; height:40px; line-height:40px; text-align: center;
        float:left;}
        .main{clear:both; line-height:40px; background-color:pink;}
        footer{height:40px;  background-color: green;}
    </style>
</head>
<body>
      <nav>
            <ul>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >首頁(yè)</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >關(guān)于我們</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >產(chǎn)品中心</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >新聞中心</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >服務(wù)宗旨</a></li>
                <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >聯(lián)系我們</a></li>
            </ul>
        </nav>
</body>
</html>

然后新建一個(gè)footer.html文件，把footer標(biāo)簽中的內(nèi)容復(fù)制到該文件中。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <footer>
            網(wǎng)站首頁(yè)footer部分
     </footer>
     </footer>
</body>
</html>

我們?cè)谶\(yùn)行主app文件，結(jié)果如下：

(＾－＾)，為啥沒有居中，背景色也不見了？？因?yàn)槲覀儧]有把樣式引入進(jìn)來(lái)（嗯，頁(yè)面太丑了，沒法看了，趕緊關(guān)了?。。?/p>

OK！我們將公共代碼抽取出來(lái)后。記得在index.html文件中用include標(biāo)簽導(dǎo)入header、footer代碼塊，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   {% include "header.html" %}
        <div class="main">
            網(wǎng)站首頁(yè)主體部分
        </div>
    {% include "footer.html" %}
</body>
</html>

再運(yùn)行主app文件，結(jié)果如下：