首页 > 其他分享> 文章详细

flask模版继承和include

2021-09-13 16:31:59 阅读：144 来源： 互联网

标签：__ flask 模版 html block base include endblock

需要继承的情况：

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

标签：__,flask,模版,html,block,base,include,endblock
来源： https://www.cnblogs.com/fat-girl-spring/p/15262985.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

flask模版继承和include