python include標籤的使用方式及說明

2023-03-02 18:00:44

include標籤如何使用？

include標籤的使用

在講python include標籤使用之前，我們新建一個include_demo專案

截圖如下

專案新建好了，再在templates檔案下新建一個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" >首頁</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" >產品中心</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" >服務宗旨</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>
            </ul>
        </nav>
        <div class="main">
            網站首頁主體部分
        </div>
       <footer>
            網站首頁footer部分
       </footer>
 
</body>
</html>

然後在include_demo.py頁面渲染一下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)

執行include_demo.py檔案，執行結果如下：

在這裡主要是為了方便講解include標籤，所有沒太注重前端頁面部分。

通過上面index.html檔案就能發現，我將公共和私有程式碼部分都在一塊，假設網站有幾十個頁面，我將所有公共程式碼和私有程式碼

都放一塊，如果有一天要修改某個公共程式碼塊，哪就得修改幾十個頁面，那將是件非常麻煩的事。為了方便管理專案，我們將頁面公共、私有程式碼部分抽取出來。

我們新建一個header.html檔案，把css樣式及nav標籤內容複製到header.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" >首頁</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" >產品中心</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" >服務宗旨</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>
            </ul>
        </nav>
</body>
</html>

然後新建一個footer.html檔案，把footer標籤中的內容複製到該檔案中。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <footer>
            網站首頁footer部分
     </footer>
     </footer>
</body>
</html>

我們在執行主app檔案，結果如下：

(＾－＾)，為啥沒有居中，背景色也不見了？？因為我們沒有把樣式引入進來（嗯，頁面太醜了，沒法看了，趕緊關了！！）

OK！我們將公共程式碼抽取出來後。記得在index.html檔案中用include標籤匯入header、footer程式碼塊，程式碼如下：

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

再執行主app檔案，結果如下：

嗯，結果是不是和之前一樣，對吧！

通過上面例子，相信大部分小夥伴都明白了include標籤的作用及用法。總之一句話，include標籤的作用就相當於把抽取的程式碼複製到當前頁面中。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

python include標籤的使用方式及說明

目錄

include標籤如何使用？

include標籤的使用

截圖如下

總結

熱門文章