二. Flask框架之Jinja2模板
Flask渲染Jinja模板
使用render_template()函数,
如:render_template('about.html',**context)
。**context为关键字参数。
@app.route('/about')
def about():
context={
'username':'123'
}
return render_template('about.html',**context)
过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{ username }}
{{ username|length }}
<div>
{{ books|join("、")}}
</div>
</body>
</html>
过滤器官方文档:
https://jinja.palletsprojects.com/en/3.0.x/templates/#list-of-builtin-filters
控制语句
if 语句
{% if kenny.sick %}
Kenny is sick.
{% elif kenny.dead %}
You killed Kenny! You bastard!!!
{% else %}
Kenny looks okay --- so far
{% endif %}
for 语句
- 普通遍历
<ul>
{% for user in users %}
<li>{{ user.username|e }}</li>
{% endfor %}
</ul>
- 字典遍历
<dl>
{% for key, value in my_dict.iteritems() %}
<dt>{{ key|e }}</dt>
<dd>{{ value|e }}</dd>
{% endfor %}
</dl>
部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
{% if age > 18 %}
您已成年!
{% elif age<18 %}
您未成年!
{% else %}
您刚成年!
{% endif %}
</div>
<div>
{% for book in books %}
{{ book }}
{% endfor %}
</div>
<div>
{% for key,value in person.items() %}
{{ key }}:{{ value }}
{% endfor %}
</div>
</body>
</html>
模板继承
Flask中的模板可以继承,通过继承可以把模板中许多重复出现的元素抽取出来,放在父模板中,并且父模板通过
定义block给子模板开一个口
,子模板
根据需要,再实现这个block
,假设现在有一个base.html这个父模板,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="base.css" />
<title>{% block title %}{% endblock %}</title>
{% block head %}{% endblock %}
</head>
<body>
<div id="body">{% block body %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2008 by <a href="http://domain.invalid/">you</a>
{% endblock %}
</div>
</body>
</html>
{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.detail{
color: red;
}
</style>
{% endblock %}
{% block content %}
<h1>这里是首页</h1>
<p class="detail">
首页的内容
</p>
{% endblock %}
静态文件的配置
Web应用中会出现大量的静态文件来使得网页更加生动美观。类似于CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源。
在Jinja中加载静态文件非常简单,只需要通过
url_for
全局函数就可以实现,看以下代码:
<link href="{{ url_for('static',filename='about.css') }}">
完整代码
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/control')
def control():
context={
'person':{'name':'hh','age':18},
'books':['红楼梦', '三国演义'],
'age':18
}
return render_template('control.html',**context)
@app.route('/')
def hello_world():
return 'Hello World!'
@app.route('/about')
def about():
context={
'username':'123',
'books' : ['红楼梦', '三国演义']
}
return render_template('about.html',**context)
if __name__ == '__main__':
app.run()
版权声明:本文为qq_44824148原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。