需要继承的情况：
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; 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 %}
加载静态文件使用url_for
{% extends 'base.html' %}
{% block title %}
首页
{% endblock %}
{% block mycss %}
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
{% endblock %}
{% block middle %}
<div id="d1">周强不懂浪漫</div>
<div><img src="{{ url_for('static',filename='image/a1.png') }}" alt=""></div>
<div></div>
{% endblock %}
{% block foot %}
this is foot
{% endblock %}
include导入
include：包含
在A，B，C页面有共同的部分，但其他页面没有这部分，这个时候使用include
步骤：
1、先定义一个公共部分xxx.html
2、谁使用include过来，{% include '文件夹/xxx.html' %} 这个文件夹必须是template目录下的
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('/welcome') def welcome(): return render_template('welcome.html') if __name__ == '__main__': app.run(host='127.0.0.1', port=5000)
template/common/header.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>头部</title> </head> <body> <div style="background-color: deeppink;height: 50px"></div> </body> </html>
template/welcome.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎页面</title> </head> <body> {% include 'common/header.html' %} <div style="background-color: darkseagreen;height: 100px;"></div> </body> </html>