说明：模板文件就是按照一定的规则书写的展示效果的HTML文件 模板引擎就是负责按照指定规则进行替换的工具
模板引擎选择jinja2
一、渲染模板的方法
1、将渲染的模板进行返回
|
1
|
render_template() |
2、渲染字符串返回
|
1
|
render_templates_string() |
实例
|
1
2
3
4
5
6
|
@app.route('/')def index(): #将模板内容响应给用户 return render_template('index.html') #渲染一内容响应给用户 return render_template_string('<h1 style="color:green;font-size:18px;">原谅色</h1>') |
二、模板的语法
模板中只存在俩种语法
1、变量
{{ var }}
|
1
2
3
|
#像模板文件中传参return render_template('index.html',title='首恶'){{ title }} |
2、标签
{% 标签名 %}
注意：
在模板中使用字典中的键 需要像使用对象得方式来调用
{{data.key}}
如果在模板中给定的变量不存在 则插入的是空字符串 不会报错
三、过滤器
过滤器使用管道符 | 来使用的
1、{{ var|abs }} 返回一个数值的绝对值
2、default 设置默认值
只有当给定的变量不存在时 则执行默认值
当设置default的boolean的时候 会执行默认值
|
1
|
<li>{{ data.bool|default('我是默认值',boolean=True) }}</li> |
3、first: 取出变量中的第一个字符
4、last: 取出变量中的最后一个字符
5、format： 字符的格式化
|
1
|
<li>{{ '我叫%s 我今年%d岁了 我的存款为 %.2f'|format('罗铁汉',38,23) }}</li> |
6、length: 返回变量值的长度
7、join: 拼接成字符串
|
1
2
|
<li>{{ [1,2,3,4]|join('') }}</li><li>{{ [1,2,3,4]|join('x') }}</li> |
8、safe: 不转义标签 原样显示
9、lower 转为小写
10、upper 转为大写
11、replace 替换
|
1
|
<li>{{ data.string|replace('a','x') }}</li> |
12、striptages 去除HTML标签
{{ data.html|striptags }}
四、标签
语法格式 ：{% 标签名 %}
(1) if
实例
|
1
2
3
4
5
6
7
|
{% if data.bool %} <li>{{ data.bool }}值为真</li>{% elif True %} <li>{{ True }}职位真</li>{% else %} <li>{{ data.bool }}值为假</li>{% endif %} |
(2) for 循环
实例
|
1
2
3
4
5
6
7
|
{% for i in data.xxxx %}{# 错误的迭代方法TypeError: 'bool' object is not iterable #}{# {% for i in data.bool %}#} <li>{{ i }}</li>{% else %} <li>当迭代的变量不存在时 则执行else</li>{% endfor %} |
注意：
break continue 不能够在这里使用
迭代字典
|
1
2
3
|
{% for k,v in data.items() %} <li>{{ k }}=>{{ v }}</li>{% endfor %} |
获取当前迭代的状态
| 变量 | 描述 |
|---|---|
| loop.index | 获取当前迭代的索引 从1开始 |
| loop.index0 | 获取当前迭代的索引 从0开始 |
| loop.first | 是否为第一次迭代 |
| loop.last | 是否为最后一次迭代 |
| loop.length | 迭代的长度 |
六、注释
{# 多行注释 #}
七、文件包含 include
相当于把一个文件 拷贝到当前的你的包含的位置
实例
|
1
2
3
|
{% include 'common/header.html' %}<div>我是中间的内容</div>{% include 'common/footer.html' %} |
注意：
1、包含的公共的文件中 只存放 公共的代码 除此以外什么都不要存在
2、导入的时候 如果文件和在同一级别 直接导入就可以 如果包含在某个目录中 需要写出路径
|
1
2
|
{% include 'common/header.html' %}{% include 'test.html' %} |
八、宏 macro
概念： 类似python中的函数
实例
在macro.html中
|
1
2
3
|
{% macro input(name,type='text',value='') %} <input type="{{ type }}" name="{{ name }}" value="{{ value }}">{% endmacro %} |
宏的调用
|
1
2
3
|
{{ input('text','username','') }}{{ input() }} {{ input(type='password',name='userpass') }} |
宏的导入
(1) import
|
1
2
3
|
{% import 'test.html' as test %}{% import 'common/test.html' as test %}<p>用户名： {{ test.input(type='password',name='userpass') }}</p> |
(2) form import
|
1
2
3
|
{% from 'test.html' import input %}{% from 'common/test.html' import input %}<p>用户名： {{ input(type='password',name='userpass') }}</p> |
注意：
- 宏的调用只能在定义的下方去调用 否则未定义
- 宏如果存在形参 且没有默认值 则可以调用(没意义)
- 形参的默认值 需要遵循默认值规则 有默认值的参数 放右侧
- 可以正常使用 关键字参数
九、继承 extends
语法：
- {% extends %} 继承某个模板
- {% block %} 挖坑和填坑
- {{ super() }} 调用被替换掉的代码
base.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html><html lang="en"><head>{% block header %} <meta charset="UTF-8"> {% block meta %} {% endblock %} <title>{% block title%}首页{% endblock %}</title> <style> {% block style %} p{color:red;} {% endblock %} </style> {% block link %} {% endblock %} {% block script %} {% endblock %}{% endblock %}</head><body><header>头部</header>{% block con %} 我是中间的内容部分{% endblock %}<footer>尾部</footer></body></html> |
index.html继承 base.html
|
1
2
3
4
5
6
7
8
9
10
11
12
|
{% extends 'common/base.html' %}{% block title %}我的首页{% endblock %}{% block style %} {{ super() }} p{color:green;}{% endblock %}{% block con %}<p>我是首页的内容</p> 我是首页的内容{% endblock %} |
注意：
如果当替换某个样式的时候 所有原来的样式 都消失了 去查看是否使用了super()
十、flask-bootstrap
安装
|
1
2
3
|
pip install flask-bootstrapsudo pip3 install flask-bootstrap |
使用
继承 bootstrap/base.html 基础模板 改造成适用于自己网站的base.html基础模板
自己的base.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
{% extends 'bootstrap/base.html' %}{% block navbar %} <nav class="navbar navbar-inverse" style="border-radius: 0px;"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页 <span class="sr-only">(current)</span></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >发帖子</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >个人信息</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改头像</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改密码</a></li> <li role="separator" class="divider"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登录</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>{% endblock %}{% block content %} <div class="container"> {% block pagecontent %} 网页的中间内容部分写在当前的位置 {% endblock %} </div>{% endblock %} |
使用 index.html
|
1
2
3
4
|
{% extends 'common/base.html' %}{% block title %}首页{% endblock %} |
十一、错误页面的定制
manage.py
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@app.errorhandler(404)def page_not_found(e): return render_template('common/error.html',error=e,code=404)@app.errorhandler(500)def server_error(e): return render_template('common/error.html',error=e,code=500)error.html{% extends 'common/base.html' %}{% block title %} {{ code }}错误{% endblock %}{% block pagecontent %} <div class="alert alert-danger" role="alert">{{ error }}</div>{% endblock %} |
十二、视图传递多个参数
(1) 原始传参
|
1
2
3
|
@app.route('/')def index(): return render_template('index.html',arg1=1,arg2=2...) |
(2) 使用字典
|
1
2
3
4
5
|
@app.route('/')def index(): return render_template('index.html',arg={arg1:1,arg2:2...}) kwarg={arg1:1,arg2:2...} return render_template('index.html',``) |
(3) 使用全局变量g
|
1
2
3
4
5
|
@app.route('/')def index(): g.name = '张三' g.age = 18 return render_template('index.html') |
模板中
|
1
2
3
4
|
<ol> <li>{{ g.name }}</li> <li>{{ g.age }}</li></ol> |
(4) 使用 **locals()
|
1
2
3
4
5
6
|
@app.route('/')def index(): name = '张三' age = 18 print(locals()) return render_template('index.html',**locals()) |
模板中
|
1
2
|
<li>{{ name }}</li><li>{{ age }}</li> |
十三、url_for 构造绝对的链接地址
|
1
2
3
4
|
@app.route('/test/')def test(): print(url_for('index',_external=True)) return 'test' |
十四、加载静态资源
静态资源：图片，css，js，视频，音频，，
实例
|
1
|
<img src="{{ url_for('static',filename='img/17.jpg') }}" alt=""> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://segmentfault.com/a/1190000015205323
