模版繼承和block的目的就是為了減少前端代碼量
flask_ones.py
#encoding:utf-8
from flask import Flask,url_for,redirect,render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/login/')
def login():
return render_template('login.html')
if __name__ == '__main__':
app.run(debug=True)
html文件
#################### index.html ################## <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav{ background:rebeccapurple; height:65px; } ul{ overflow: hidden; } ul li{ float: left; list-style: none; padding:0 10px; line-height: 65px; } ul li a{ color: white; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">發布問答</a></li> </ul> </div> <h1>這是index頁面</h1> </body> </html> #####################login.html###################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸頁面</title> <style> .nav{ background:rebeccapurple; height:65px; } ul{ overflow: hidden; } ul li{ float: left; list-style: none; padding:0 10px; line-height: 65px; } ul li a{ color: white; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">發布問答</a></li> </ul> </div>
<h1>這是login頁面</h1>
</body>
</html>
對比index.html和login.html的代碼發現，除了紅色的代碼部分，其余代碼均一樣，而如果有其他更多類似的頁面，會加大代碼的量，因此引出以下的模版繼承和block
語法：
{% extends "base.html" %}
{% block name %}
....
{% endblock %}
所以以上代碼簡化為：
同級目錄新建一個common.html，將相同的代碼部分通過繼承帶進去，如下：
common.html(公共代碼部分)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav{
background:rebeccapurple;
height:65px;
}
ul{
overflow: hidden;
}
ul li{
float: left;
list-style: none;
padding:0 10px;
line-height: 65px;
}
ul li a{
color: white;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">發布問答</a></li>
</ul>
</div>
{% block main %}
{% endblock %}
</body>
</html>
此時index.html和login.html代碼為:
#index.html
{% extends "base.html" %} #代表繼承base.html {% block main %} #這里的main要與base.html里blcok的設定的名字相同 <h1>這是index頁面</h1> #將這里的內容傳到base.html的block下，並在本文件里應用 {% endblock %}
#login.html {% extends "base.html" %} {% block main %} <h1>這是登陸頁面</h1> {% endblock %}
