模版继承和block的目的就是为了减少前端代码量
flask_ones.py
#encoding:utf-8
from flask import Flask,url_for,redirect,render_templateapp = 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="#" 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" >发布问答</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="#" 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" >发布问答</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="#" 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" >发布问答</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 %}
