python?include標簽的使用方式及說明
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" >產(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" >服務宗旨</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)站首頁主體部分
</div>
<footer>
網(wǎng)站首頁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文件就能發(fā)現(xiàn),我將公共和私有代碼部分都在一塊,假設網(wǎng)站有幾十個頁面,我將所有公共代碼和私有代碼
都放一塊,如果有一天要修改某個公共代碼塊,哪就得修改幾十個頁面,那將是件非常麻煩的事。為了方便管理項目,我們將頁面公共、私有代碼部分抽取出來。
我們新建一個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" >產(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" >服務宗旨</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>然后新建一個footer.html文件,把footer標簽中的內容復制到該文件中。
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<footer>
網(wǎng)站首頁footer部分
</footer>
</footer>
</body>
</html>我們在運行主app文件,結果如下:

(^-^),為啥沒有居中,背景色也不見了??因為我們沒有把樣式引入進來(嗯,頁面太丑了,沒法看了,趕緊關了!?。?/p>
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">
網(wǎng)站首頁主體部分
</div>
{% include "footer.html" %}
</body>
</html>再運行主app文件,結果如下:

嗯,結果是不是和之前一樣,對吧!
通過上面例子,相信大部分小伙伴都明白了include標簽的作用及用法。總之一句話,include標簽的作用就相當于把抽取的代碼復制到當前頁面中。
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
使用實現(xiàn)python連接hive數(shù)倉的示例代碼
這篇文章主要為大家詳細介紹了使用實現(xiàn)python連接hive數(shù)倉的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
使用django-crontab實現(xiàn)定時任務的示例
這篇文章主要介紹了使用django-crontab實現(xiàn)定時任務,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Python Sql數(shù)據(jù)庫增刪改查操作簡單封裝
這篇文章主要為大家介紹了Python Sql數(shù)據(jù)庫增刪改查操作簡單封裝,感興趣的小伙伴們可以參考一下2016-04-04

