flask---》自定义过滤器模板继承 include 宏

最新推荐文章于 2024-02-01 16:23:58 发布

骑猪去兜风z1

最新推荐文章于 2024-02-01 16:23:58 发布

阅读量722

点赞数 2

分类专栏： flask(更订中) 文章标签： flask python 后端

本文链接：https://blog.csdn.net/qq_52385631/article/details/127597844

版权

flask(更订中) 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

自定义过滤器

介绍

# 过滤器本质就是函数
1. 通过flask模块中的add_template_filter方法
a. 定义函数，带有参数和返回值
b. 添加过滤器 app.add_template_filter(function,name='')
c. 在模板中使用： {{ 变量 | 自定义过滤器 }}
2。使用装饰器完成
a. 定义函数，带有参数和返回值
b. 通过装饰器完成，@app.template_filter('过滤器名字')装饰步骤一的函数
c. 在模板中使用： {{ 变量 | 自定义过滤器 }}

第一种使用方式

view

@app.route('/')
def hello_world():
    msg = 'hello everyone hello world'
    li = [3, 7, 9, 1, 5]
    return render_template('define_filter.html', msg=msg, li=li)

# 过滤器本质就是函数
# 第一种方式
def replace_hello(value):
    print('------>', value)
    value = value.replace('hello', '')
    print('======>', value)
    return value.strip()  # 将 替换的结果返回


app.add_template_filter(replace_hello, 'replace')

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
</head>
<body>
{{ msg }}
<hr>
{{ msg | replace }}
<hr>
{{ li }}
<hr>
{{ li | listreverse }}
</body>
</html>

第二种

view

# 第二种方式 装饰器
@app.template_filter('listreverse')
def reverse_list(li):
    temp_li = list(li)
    temp_li.reverse()
    return temp_li

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
</head>
<body>
{{ msg }}
<hr>
{{ msg | replace }}
<hr>
{{ li }}
<hr>
{{ li | listreverse }}
</body>
</html>

模板继承

介绍

模板继承：
需要模版继承的情况：
1。多个模板具有完全相同的顶部和底部
2。多个模板具有相同的模板内容，但是内容中部分不一样
3。多个模板具有完全相同的模板内容

标签：
{% block 名字 %}

{% endblock %}

1.定义父模板
2.子模板继承父模板
使用步骤：
父模板：
1。定义一个base.html的模板
2。分析模板中哪些是变化的比如：{% block title %}父模板的title{% endblock %}
对变化的部分用block进行"预留位置"也称作：挖坑
3。注意：样式和脚本需要提前预留
{% block mycss %}{% endblock %}
{% block myjs %}{% endblock %}

子使用父模板：
1。 {% extends '父模板的名称' %}将父模板继承过来
2。找到对应的block（坑）填充，每一个block都是有名字的。

使用

父模板 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;
            height: 50px;
        }

        #head ul li {
            float: left;
            width: 100px;
            text-align: center;
            font-size: 18px;
            height: 50px;
            line-height: 50px;
        }

        #middle {
            height: 900px;
            background-color: azure;
        }

        #foot {
            height: 50px;
            line-height: 50px;
            background-color: darkseagreen;
        }
    </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>

子模板

{% extends 'base.html' %}
{% block title %}
    首页
{% endblock %}
{% block mycss %}
    <style>
        #middle{
            background-color: deeppink;
            color: white;
            font-weight: bold;
        }
        .div1{
            width: 33%;
            height: 500px;
            float: left;
            border: 1px solid red;
        }
    </style>
{#   /static/<filename> #}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
{% endblock %}

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

{% block middle %}
    <div class="div1" id="d1"> </div>
    <div class="div1"> </div>
    <div class="div1"> </div>
    <img src="{{ url_for('static',filename='images/a1.png') }}" alt="">
{% endblock %}

include

介绍

include: 包含
在A，B，C页面都共同的部分，但是其他页面没有这部分。
这个时候考虑使用include
步骤：
1。先定义一个公共的模板部分,xxx.html
2。谁使用则include过来， {% include '文件夹/xxx.html' %}

html header.html


<div style="height: 50px;background-color: deeppink"></div>

html 01.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>

宏

介绍

宏：macro
1。把它看作是jinja2的一个函数，这个函数可以返回一个HTML字符串
2。目的：代码可以复用，避免代码冗余

定义两种方式：
1。在模板中直接定义：
类似： macro1.html 中定义方式
2。将所有宏提取到一个模板中：macro.html
谁想使用谁导入：
{% import 'macro.html' as xxx %}
{{ xxx.宏名字(参数) }}

html macro.html 定义

{% macro form(action,value='登录',method='post') %}
    <form action="{{ action }}" method="{{ method }}">
        <input type="text" placeholder="用户名" name="username">
        <br>
        <input type="password" placeholder="密码" name="password">
        <br>
        <input type="submit" value="{{ value }}">
    </form>
{% endmacro %}

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏的使用2</title>
</head>
<body>
{% import 'macro/macro.html' as func %}
{{ func.form('/welcome',value='注册') }}

{% set username ='zhangsan' %}

{{ username }}

{% with num=1000  %}
   {{ num }}
{% endwith %}

{{ num }}

</body>
</html>

骑猪去兜风z1

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
flask---》自定义过滤器模板继承 include 宏

模板继承：需要模版继承的情况：1。多个模板具有完全相同的顶部和底部2。多个模板具有相同的模板内容，但是内容中部分不一样3。多个模板具有完全相同的模板内容标签：{% block 名字 %}1.定义父模板2.子模板继承父模板使用步骤：父模板：1。定义一个base.html的模板2。分析模板中哪些是变化的比如：{% block title %}父模板的title{% endblock %}对变化的部分用block进行"预留位置"也称作：挖坑3。
复制链接

扫一扫