逻辑Flask——模板继承

最新推荐文章于 2025-02-25 02:39:18 发布

原创最新推荐文章于 2025-02-25 02:39:18 发布 · 1.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flask #python #后端

Flask 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Flask中的模板继承，强调了include、macro和block的使用区别，详细阐述了block在模板继承中的作用和语法。同时，文章讲解了如何在Flask中加载静态资源，包括css、js和图片的存放位置及引用方式。最后，讨论了父模板与子模板的关系，以及在项目结构中的最佳实践。

一、常见复用

include：适合固定不变的继承（如开头和结尾）

关注点：include更适合做一些小量的继承（如开头和结尾）
具体可见：https://blog.csdn.net/pick_ears/article/details/122084013
在这里插入图片描述

宏maroc：可在本页面或其它页面进行多次局部调用

作用：相当于类里面创建一个方法，可以在本html页面进行多次调用使用，也可以导入到其它HTML，实例化进行使用
优点：高效、便利

在这里插入图片描述

block：对父模板某个block进行重写，不重写部分全部应用

在这里插入图片描述

澄清

宏不是模板继承！
有一些相同的代码，我们可以使用模板继承 base.html 将刚刚写的index.html的内容拿到base.html 模板中
不使用宏以及import的原因：宏只适用于调用，不能够重写！模板继承：就是block

二、模板继承block

前言

面向对象的特征：继承、多态、封装
模板继承，相似于类的继承
Flask中的模板可以继承，通过继承可以把模板中许多重复出现的元素抽取出来，放在父模板中，并且父模板通过定义block给子模板开一个口，子模板根据需要，再实现这个block，假设现在有一个base.html这个父模板
心
应用场景：一些include不适合的场景，有批量重复的地方，但也有少许要修改的地方
相当于类的重写

作用

作用：
1、将相似的代码抽离出来，减少代码的重复率
2、可以在子模板中重写方法
关键：在基类中使用block，还需要给指定的block进行命名

语法

父模板中定义基类，子模板中使用父模板中的类，可以使用block进行重写某个block

	父模板base.html中
	{% block header %}
	  <ul>
	    <li>国际</li>
	    <li>军事</li>
	    <li>时事</li>
	    <li>娱乐</li>
	  </ul>
	{% endblock %}
	
    子模板中index.html
    1、继承父模板
    {% extends 'base.html' %}
    如果不重写父模板中指定的block，则默认显示该block

注意：若子类中不重写block，则默认显示base中所有的block

案例

若是想要将base.html中的title改掉
利用block修改父模板在base.html中写
如果在子模板中，不重写父类，则会默认全显示

重写父模板

父模板base.html中
{% block footer %}
<div class="footer">
    这是网页尾部
</div>
{% endblock %}

子模板中
{% block footer %}
<div class="footer">
    wangyeweibu
</div>
{% endblock %}

嵌套使用模板

嵌套也可以在子模板中写，也可以进行修改

父模板base.html中
{% block footer %}
<div class="footer">
    这是网页尾部
    {% block foo %}
    <div class="foo">
        foo
    </div>
    {% endblock %}
</div>
{% endblock %}

字模板index.html中
    {% block footer %}
    <div class="footer">
        这是网页尾部问问
        {% block foo %}
        <div class="foo">
            foo
        </div>
        {% endblock %}
    </div>
    {% endblock %}

注释block整块代码

在最外层的%%两侧进行##注释即可，该整块代码都不会执行

    {#% block footer %#}
    <div class="footer">
        这是网页尾部问问
        {% block foo %}
        <div class="foo">
            foo
        </div>
        {% endblock %}
    </div>
    {#% endblock %#}

空模板(不推荐)

父模板中写一个空模板，子模板再往里面添加内容
不推荐原因：可以在父模板中写所需模板，当子模板继承父模板时，若不再重写。则会全部继承

父模板base.html中
{% block demo %}
{% endblock %}

字模板index.html中
    {% block demo %}
        <p>这是我在子模板中自定义的内容（没有值，只能从父模板中获取，可以写在父模板前）</p>
        <p>写在一个空模板中，即可进行显示</p>
        <p>这种在空白模板中写的方式，直接放在父模板中写即可，
        因为在子模板中会继承父模板中所有的block</p>
    {% endblock %}

注意两点

1、block 一定要取上名字，要不基类中有多个block时，子模板无法识别是哪一个block
2、只要最外层的%%两侧进行##注释即可，该整块代码都不会执行
3、只要不重写block，当字模板继承父模板时，所有的block都会继承

效果显示

在这里插入图片描述

父模板与字模板中的代码

父模板base.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title>
        {% block title %}
        base基类
        {% endblock %}
    </title>
</head>
<body>
<!--block 一定要取上名字，要不基类中有多个block时，子模板无法识别是哪一个blocK-->
{% block header %}
  <ul>
    <li>国际</li>
    <li>军事</li>
    <li>时事</li>
    <li>娱乐</li>
  </ul>
{% endblock %}

    {# 嵌套显示 #}
{# 若子类中不重写block，则默认显示base中所有的block #}
{# 嵌套也可以在子模板中写，也可以进行修改 #}
{% block footer %}
<div class="footer">
    这是网页尾部
    {% block foo %}
    <div class="foo">
        foo
    </div>
    {% endblock %}
</div>
{% endblock %}

{% block demo %}
{% endblock %}


</body>
</html>

字模板index.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>这是首页</h1>
    <p>这是我在子模板中自定义的内容（没有值，只能从父模板中获取，可以写在父模板前）</p>

    {% extends 'base.html' %}
<!--     若是想要将base.html中的title改掉 -->
<!--    利用block修改父模板 在base.html中写-->
<!--      如果在子模板中，不重写父类，则会默认显示  -->
    {% block footer %}
        <div class="footer">
            zheshiweibu
        </div>
    {% endblock %}

    {# % block title % #}
    这是子模板的标题
    {# % endblock % #}

    <!--  title会在浏览器的url上进行显示  -->
    {% block title %}
    {# block 中 拿到父模板的内容 #}
    {{ super() }}
    这是子模板的标题
    {% endblock %}

    <!--子模板中。也可以重写嵌套的block-->
    <!--  只要最外层的%%两侧进行##注释即可，该整块代码都不会执行  -->
    {#% block footer %#}
    <div class="footer">
        这是网页尾部问问
        {% block foo %}
        <div class="foo">
            foo
        </div>
        {% endblock %}
    </div>
    {#% endblock %#}

    <!-- 注意相同的block名不能出现两次  会报错 -->
    <p>这是我在子模板中自定义的内容（没有值，只能从父模板中获取，可以写在父模板前）</p>

    {% block demo %}
        <p>这是我在子模板中自定义的内容（没有值，只能从父模板中获取，可以写在父模板前）</p>
        <p>写在一个空模板中，即可进行显示</p>
        <p>这种在空白模板中写的方式，直接放在父模板中写即可，
        因为在子模板中会继承父模板中所有的block</p>
    {% endblock %}

</body>
</html>

项目结构

在这里插入图片描述

三、加载静态资源

静态文件的配置 – 以list.html为例
Web应用中会出现大量的静态文件来使得网页更加生动美观。类似于CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源。在Jinja中加载静态文件非常简单，只需要通过url_for全局函数就可以实现
方法：通过url_for加载静态文件

css样式

位置：在该项目下新建static静态文件夹，再创建css样式文件夹，再写对应的css文件
在对应的HTML页面写

 <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css')}}">

js逻辑

位置：同样是在static的文件夹下创建js的文件夹
在对应的HTML页面写

<script src="{{ url_for('static',filename='js/index.js') }}"></script>

css与js文件引入的地方，均写在 <title>Title</title> 上面即可。

图片images

位置：同样是在static的文件夹下创建images的文件夹
应用：在body中写

<img src="{{ url_for('static',filename='images/hua.png') }}" alt="">

加载静态资源的放在父模板还是子模板中？父模板中会更好子模板中可能加载不出来

应用案例

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css')}}">
    <script src="{{ url_for('static',filename='js/index.js') }}"></script>
    <title>Title</title>
</head>
<body>
<!--若是该图片找不到，alt是提示显示-->
<img src="{{ url_for('static',filename='images/hua.png') }}" alt="huahua">

</body>
</html>