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

    自定义过滤器

    介绍

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

    第一种使用方式

    view

    1. @app.route('/')
    2. def hello_world():
    3.     msg = 'hello everyone hello world'
    4.     li = [3, 7, 9, 1, 5]
    5.     return render_template('define_filter.html', msg=msg, li=li)
    6.  
    7. # 过滤器本质就是函数
    8. # 第一种方式
    9. def replace_hello(value):
    10.     print('------>', value)
    11.     value = value.replace('hello', '')
    12.     print('======>', value)
    13.     return value.strip()  # 将 替换的结果返回
    14.  
    15.  
    16. app.add_template_filter(replace_hello, 'replace')

     html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>自定义过滤器title>
    6. head>
    7. <body>
    8. {{ msg }}
    9. <hr>
    10. {{ msg | replace }}
    11. <hr>
    12. {{ li }}
    13. <hr>
    14. {{ li | listreverse }}
    15. body>
    16. html>

    第二种

    view

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

    html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>自定义过滤器title>
    6. head>
    7. <body>
    8. {{ msg }}
    9. <hr>
    10. {{ msg | replace }}
    11. <hr>
    12. {{ li }}
    13. <hr>
    14. {{ li | listreverse }}
    15. body>
    16. 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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>
    6.         {% block title %}父模板的title{% endblock %}
    7.     title>
    8.     <style>
    9.         #head {
    10.             height: 50px;
    11.             background-color: bisque;
    12.         }
    13.  
    14.         #head ul {
    15.             list-style: none;
    16.             height: 50px;
    17.         }
    18.  
    19.         #head ul li {
    20.             float: left;
    21.             width: 100px;
    22.             text-align: center;
    23.             font-size: 18px;
    24.             height: 50px;
    25.             line-height: 50px;
    26.         }
    27.  
    28.         #middle {
    29.             height: 900px;
    30.             background-color: azure;
    31.         }
    32.  
    33.         #foot {
    34.             height: 50px;
    35.             line-height: 50px;
    36.             background-color: darkseagreen;
    37.         }
    38.     style>
    39.     {% block mycss %}{% endblock %}
    40. head>
    41. <body>
    42. <div id="head">
    43.     <ul>
    44.         <li>首页li>
    45.         <li>秒杀li>
    46.         <li>超市li>
    47.         <li>图书li>
    48.         <li>会员li>
    49.     ul>
    50. div>
    51. <div id="middle">
    52.     {% block middle %}
    53.         <button id="btn">我是中间部分button>
    54.     {% endblock %}
    55. div>
    56.  
    57. <div id="foot">
    58.     我是底部
    59. div>
    60. {% block myjs %}
    61.  
    62. {% endblock %}
    63. body>
    64. html>

    子模板

    1. {% extends 'base.html' %}
    2. {% block title %}
    3.     首页
    4. {% endblock %}
    5. {% block mycss %}
    6.     <style>
    7.         #middle{
    8.             background-color: deeppink;
    9.             color: white;
    10.             font-weight: bold;
    11.         }
    12.         .div1{
    13.             width: 33%;
    14.             height: 500px;
    15.             float: left;
    16.             border: 1px solid red;
    17.         }
    18.     style>
    19. {#   /static/<filename> #}
    20.     <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
    21. {% endblock %}
    22.  
    23. {% block myjs %}
    24.     <script>
    25.             btn = document.getElementById('btn')
    26.             btn.onclick=function(){
    27.                 alert('别点我啊！')
    28.             }
    29.     script>
    30. {% endblock %}
    31.  
    32. {% block middle %}
    33.     <div class="div1" id="d1"> div>
    34.     <div class="div1"> div>
    35.     <div class="div1"> div>
    36.     <img src="{{ url_for('static',filename='images/a1.png') }}" alt="">
    37. {% endblock %}
    38.  
    39.

    include

    介绍

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

     html header.html

    1.  
    2. <div style="height: 50px;background-color: deeppink">div>

    html 01.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>欢迎页面title>
    6. head>
    7. <body>
    8. {% include 'common/header.html' %}
    9. <div style="background-color: darkseagreen; height: 100px;">div>
    10. body>
    11. html>

    宏

    介绍

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

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

    html macro.html 定义

    1. {% macro form(action,value='登录',method='post') %}
    2.     <form action="{{ action }}" method="{{ method }}">
    3.         <input type="text" placeholder="用户名" name="username">
    4.         <br>
    5.         <input type="password" placeholder="密码" name="password">
    6.         <br>
    7.         <input type="submit" value="{{ value }}">
    8.     form>
    9. {% endmacro %}
    10.  
    11.

    使用

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>宏的使用2title>
    6. head>
    7. <body>
    8. {% import 'macro/macro.html' as func %}
    9. {{ func.form('/welcome',value='注册') }}
    10.  
    11. {% set username ='zhangsan' %}
    12.  
    13. {{ username }}
    14.  
    15. {% with num=1000  %}
    16.    {{ num }}
    17. {% endwith %}
    18.  
    19. {{ num }}
    20.  
    21. body>
    22. html>

  • 相关阅读:
    eladmin 如何实现文件的上传
    ThreadLocal详解
    周二补丁日（Patch Tuesday）
    Golang 开发实战day03 - Arrays & Slices
    搭建自己的以图搜图系统 (一)：10 行代码以图搜图
    基于YOLOv7算法的混凝土结构表面裂缝自主识别
    Oracle特殊恢复：异常掉电导致的ORA-600 [kfrValAcd30]故障处理
    Reinforcement Learning 强化学习（三）
    Day667.开发避免踩坑注意点 -Java业务开发常见错误
    绘制矩阵散点图
  • 原文地址：https://blog.csdn.net/qq_52385631/article/details/127597844