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 %}
复制代码

 加载静态文件使用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>
复制代码

 

posted @   fat_girl_spring  阅读(207)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示