您好,登錄后才能下訂單哦!
這篇文章主要介紹了python include標簽如何使用的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇python 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文件,結果如下:
關于“python include標簽如何使用”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“python include標簽如何使用”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。