在Flask的模板中有一个特性和Django内不同,这个特性就是宏。宏的功能和python中的函数类似。
声明宏
{% macro 宏的名字(参数) %} 内容 {% endmacro %} 复制代码
调用宏
{{ 宏的名字(参数) }} 复制代码
在python函数可以实现代码复用的作用,在模板中宏也有类似的作用。
二、使用
创建一个Flask项目,并在模型声明如下代码:
- 无参宏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {#声明#} {% macro macro_input() %} 输入框:<input type="text"> <br> {% endmacro %} {#调用#} {{ macro_input() }} {{ macro_input() }} </body> </html> 复制代码
我们在浏览器调试一下:
- 有参宏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {#声明#} {% macro macro_input(tip,type,name) %} {{ tip }}<input type="{{ type }}" name="{{ name }}"> <br> {% endmacro %} {#调用#} {{ macro_input('账号:','text','email') }} {{ macro_input('密码:','password','pwd') }} </body> </html> 复制代码
- 缺省宏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {#声明#} {% macro macro_input(tip,type,name,value='123') %} {{ tip }}<input type="{{ type }}" name="{{ name }}" value="{{ value }}"> <br> {% endmacro %} {#调用#} {{ macro_input('账号:','text','email') }} {{ macro_input('密码:','password','pwd','123456789') }} </body> </html> 复制代码
三、导入宏
宏的定义可以声明在另一个html中,然后通过import这种方式导入进来使用。新建一个html文件,声明如下代码:
{#声明#} {% macro macro_input(tip,type,name,value='123') %} {{ tip }}<input type="{{ type }}" name="{{ name }}" value="{{ value }}"> <br> {% endmacro %} 复制代码
注意虽然是html文件,但是没有html文件的结构。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {% from 'common_macro.html' import macro_input %} {#别名#} {#{% from 'common_macro.html' import macro_input as input %}#} {#调用#} {{ macro_input('账号:','text','email') }} {{ macro_input('密码:','password','pwd','123456789') }} </body> </html> 复制代码
四、宏的内部变量
-
varargs : 这是一个列表。如果调用宏时传入的参数多于宏声明时的参数,多出来的没指定参数名的参数就会保存在这个列表中。
-
kwargs : 这是一个字典。如果调用宏时传入的参数多于宏声明时的参数,多出来的指定了参数名的参数就会保存在这个字典中。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {#声明#} {% macro macro_input(tip,type,name,value='123') %} {{ tip }}<input type="{{ type }}" name="{{ name }}" value="{{ value }}"> <br> <br>{{ varargs }} <br> {{ kwargs }}<br> {% endmacro %} {{ macro_input('账号:','text','email',11,22,33,44,age=12) }} {{ macro_input('密码:','password','pwd','123456789') }} </body> </html> 复制代码
我们在浏览器调试一下: