自定义过滤器
介绍
# 过滤器本质就是函数
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>