搜索
您的当前位置：首页正文

Python_Flask 模板继承

来源：步旅网

一

代码一

# -*- codeing = utf-8 -*-
# @Time : 2021/8/23 14:09
# @Author : 二帆
# @File : app1.py
# @Software : PyCharm

from flask import Flask,render_template
import settings

app = Flask(__name__)
app.config.from_object(settings)

@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()



# -*- codeing = utf-8 -*-
# @Time : 2021/8/20 10:28
# @Author : 二帆
# @File : settings.py
# @Software : PyCharm

ENV = 'development'
DEBUG = True

# @File : index.html
{% extends 'base.html' %}

{% block title %}
     首页
{% endblock %}

{% block mycss %}
     <style>
        #middle{
            background-color: cornflowerblue;
            color: red;
            font-weight: bold;
     </style>
{% endblock %}

{% block myjs %}
    <script>
        btn = document.getElementById('btn')
        btn.onclick=function(){
            alert('别点我！')
        }
    </script>
{% endblock %}


# @File : base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}父模板的title{% endblock %}</title>
    <style>
        #head{
            height:50px;
            background-color: bisque;
        }
        #head ul{
            list-style: none;
        }
        #head ul li{
            float: left;
            width:100px;
            text-align: center;
            font-size:18px;
            height:50px;
            line-height: 50px;
        }
        #middle{
            height: 600px;
        }
        #foot{
            height: 50px;
            line-height: 50px;
            background-color: darkcyan;
        }
    </style>
    {% block mycss %}{% endblock %}
</head>
<body>
    <div id="head">
        <ul>
            <li>首页</li>
            <li>秒杀</li>
            <li>超市</li>
            <li>会员</li>
            <li>图书</li>
        </ul>
    </div>
    <div id="middle">
        {% block middle%}
            <button id="btn">我是中间部分</button>
        {% endblock %}
    </div>
    <div id="foot">
        我是底部
    </div>
    {% block myjs %}

    {% endblock %}
</body>
</html>

展示一

总结一

二

代码二

# -*- codeing = utf-8 -*-
# @Time : 2021/8/23 14:09
# @Author : 二帆
# @File : app1.py
# @Software : PyCharm

from flask import Flask,render_template
import settings

app = Flask(__name__)
app.config.from_object(settings)

@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()



#index.html

{% extends 'base.html' %}

{% block title %}
     首页
{% endblock %}

{% block mycss %}
     <style>
        #middle {
            background-color: cornflowerblue;
            color: red;
            font-weight: bold;
        }
        .div1{
            width: 33%;
            float: left;
            border: 1px solid red;
            height: 500px;
        }
     </style>
{% endblock %}

{% block myjs %}
    <script>
        btn = document.getElementById('btn')
        btn.onclick=function(){
            alert('别点我！')
        }
    </script>
{% endblock %}

{% block middle %}
    <div class='div1'></div>
    <div class='div1'></div>
    <div class='div1'></div>
{% endblock %}

#base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}父模板的title{% endblock %}</title>
    <style>
        #head{
            height:50px;
            background-color: bisque;
        }
        #head ul{
            list-style: none;
        }
        #head ul li{
            float: left;
            width:100px;
            text-align: center;
            font-size:18px;
            height:50px;
            line-height: 50px;
        }
        #middle{
            height: 600px;
        }
        #foot{
            height: 50px;
            line-height: 50px;
            background-color: darkcyan;
        }
    </style>
    {% block mycss %}{% endblock %}
</head>
<body>
    <div id="head">
        <ul>
            <li>首页</li>
            <li>秒杀</li>
            <li>超市</li>
            <li>会员</li>
            <li>图书</li>
        </ul>
    </div>
    <div id="middle">
        {% block middle%}
            <button id="btn">我是中间部分</button>
        {% endblock %}
    </div>
    <div id="foot">
        我是底部
    </div>
    {% block myjs %}

    {% endblock %}
</body>
</html>

展示二

总结二

总结

标签

{% block 名字%}

{% endblock %}
1.定义父模板
2.子模板继承父模板

步骤

父模板

1.定义一个base.html模板
2. 分析模板中那些是变化的比如： {% block title %}父模板的title{% endblock %}
3. 对变化的部分用block进行“预留位置”，也称作挖坑
4. 注意：样式和脚本：需要提前预留

子使用覆父模板

1.

2.找到对应的block，每一个block都是有名字的

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

Copyright © 2019- 版权所有

Top