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;
            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 %}

 

上一篇:linux 服务器安全加固和内核参数调优 nf_conntrack


下一篇:自定义监控脚本--监控端口