需要继承的情况：
1、多个模版具有相同的顶部和底部
2、多个模版具有相同的模版内容，但是内容部分不一样
3、多个模版具有完全相同的模版内容
标签
{% block 名字 %}
{% endblock %}
1、定义父模版
2、子模版继承父模版
步骤：
父模版：
1、定义一个base.html的模版
2、分析模版中哪些是变化的 比如：{% block tilte %}父模版title{% endblock %} 对变化的部分用block惊醒“预留位置”
3、注意： 样式和脚本 需要提前预留
{% block mycss %}{% endblock %}
{% block myjs %}{% endblock %}
自模版继承父模版：
1、{% extends "父模版名称" %} 将父模版继承过来
2、找到对应的block填充
app.py
from flask import Flask
from flask import make_response, request, render_template,redirect,url_for
import setting,json
app = Flask(__name__)
app.config.from_object(setting)
@app.route('/base')
def load_base():
return render_template('base.html')
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5000)
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
继承
{% endblock %}
</title>
<style>
#head{
height: 50px;
background-color: bisque;
}
#head ul{
list-style: none;
height: 50px;
}
#head ul li{
float: left;
width: 100px;
text-align: center;
font-size: 18px;
line-height: 50px;
}
#middle{
height: 900px;
background-color: darkseagreen;
}
#foot{
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div id="head">
<ul>
<li>首页</li>
<li>秒杀</li>
<li>超市</li>
<li>会员</li>
</ul>
</div>
<div id="middle">
{% block middle %}
我是中间部分
{% endblock %}
</div>
<div id="foot">
{% block foot %}
我是底部部分
{% endblock %}
</div>
{% block myjs %}
<script>
btn = document.getElementById('btn')
btn.onclick=function (){
alert("别点我啊")
}
</script>
{% endblock %}
</body>
</html>
index.html
{% extends 'base.html' %}
{% block title %}
首页
{% endblock %}
{% block middle %}
<button id="btn">我是中间部分</button>
{% endblock %}
{% block foot %}
this is foot
{% endblock %}