flask模版继承和include

需要继承的情况：

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>