为了渲染模版,Flask使用了一个名为Jinja2的模版引擎。
一个简单的使用模版的栗子:
首先在工程文件夹下创建templates文件夹,里面放入两个模版:mainpage.html和user.html,内容如下:
mainpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Flask!</title>
</head>
<body>
<h1>Hello Flask!</h1>
</body>
</html>
user.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>userpage</title>
</head>
<body>
<h1>Hello Flask! Username is {{name}}!</h1>
</body>
</html
# -*- coding: UTF-8 -*-
from flask import Flask,render_template
app=Flask(__name__)
#-------------------------------------------
@app.route('/')
def hello_falsk():
return render_template('mainpage.html')
@app.route('/user/<username>')
def show_username(username):
return render_template('user.html',name=username)
#------------------------------------------
if __name__=='__main__':
app.run(debug=True)
以上是一个简单的小栗子。
在模版中使用控制结构:
以下是一个在模版中使用控制结构的栗子:
使用if else·············
#使用控制结构—— if esle
@app.route('/user/<username>')
def show_username(username):
return render_template('user.html',name=username)
user.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>userpage</title>
</head>
<body>
{% if name=="Molly" %}
<h1>Hello Flask! Username is {{name}}!</h1>
{% else %}
<h1>Hello Flask! Username is stranger!</h1>
{% endif %}
</body>
</html>
使用for········
#使用控制结构——for循环
@app.route('/sitemap')
def show_sitemap():
return render_template('sitemap.html',webmaplist=[1,2,3])
sitemap.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>userpage</title>
</head>
<body>
{% for page in webmaplist %}
<h1>Page:{{page}} </h1>
{%endfor%}
</body>
</html>
可以将sitemap.html转化为宏的模式:
<!DOCTYPE html>
{% macro show_page(page)%}
<h1>Page:{{page}} </h1>
{%endmacro%}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webmap</title>
</head>
<body>
{% for page in webmaplist %}
{{show_page(page)}}
{%endfor%}
</body>
</html>
也可以将宏的部分保存在单独文件中,从需要的模版中导入:
<!DOCTYPE html>
{% import 'macro_test.html' as macros %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webmap</title>
</head>
<body>
{% for page in webmaplist %}
{{macros.show_page(page)}}
{%endfor%}
</body>
</html>
{% macro show_page(page)%}
<h1>Page:{{page}} </h1>
{% endmacro %}
模版可以继承,假设有一个base.html定义如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% block head %}
<title>{% block title %}{% endblock %}</title>
{% endblock %}
<h1>Welcome ! -----</h1>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
定义了head、title和body的块,在其他html中可以继承并改变一些参数:
{% extends "base.html"%}
{% block title %}Hello Flask!{% endblock%}
{% block head%}
{{super()}}
{% endblock%}
{% block body%}
<h1>Hello Flask ! ! !</h1>
{% endblock%}
这里我们继承了base.html,其中head块,我们使用了super()来获取原来的内容不加以改变,其他块都重新定义。
使用bootstrap
Bootstrap是Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代Web 浏览器。
以下是一个使用bootstrap的栗子:
# -*- coding: UTF-8 -*-
from flask import Flask,render_template
from flask_bootstrap import Bootstrap
app=Flask(__name__)
bootstrap=Bootstrap(app)
#----------------------------------------------------
@app.route('/')
def hello_falsk():
return render_template('mainpage_bootstrap.html')
#----------------------------------------------------
if __name__=='__main__':
app.run(debug=True)
其中mainpage_bootstrap.html内容如下:
{% extends "bootstrap/base.html"%}
{% block title %}My Flask Application{% endblock%}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<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="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, Flask!</h1>
</div>
</div>
{% endblock %}
这个栗子中,mainpage.html继承了bootstrap的base.html,其中定义了三个块:title、navbar和content,这些块都是base模版提供的,本例子中对其进行了改造。title会出现在网页头部,navbar表示导航条,content表示主体内容。
以下是bootstrap中base模版所有可用的块:
自定义错误界面的方法:
@app.errorhandler(404)
def error404(e):
return render_template('error_bootstrap.html'),404
@app.errorhandler(500)
def error500(e):
return render_template('error_bootstrap.html'),500
使用Moment
Flask-Moment库可以在浏览器中渲染日期和时间。
# -*- coding: UTF-8 -*-
from flask import Flask,render_template
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from datetime import datetime
app=Flask(__name__)
moment=Moment(app)
bootstrap=Bootstrap(app)
#-----------------------------------------------------------------------------------------------------------------------
@app.route('/')
def hello_falsk():
return render_template('mainpage_moment.html',current_time=datetime.utcnow())
#-----------------------------------------------------------------------------------------------------------------------
if __name__=='__main__':
app.run(debug=True)
mainpage_moment.html如下:
{% extends "base.html" %}
{% block title %}{{ super() }}{% endblock %}
{% block navbar %}{{ super() }}{% endblock %}
{% block content %}{{ super() }}{% endblock %}
{% block scripts %}
{{ super() }}
<div class="container">
<div class="page-header">
<h3>
<p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>
</h3>
</div>
</div>
{% endblock %}
到目前为止,我们已经有了一个比较健全的base模版:
{% extends "bootstrap/base.html" %}
{% block title %}Flasky - My Application{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<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="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Welcome to Flasky! </h1>
</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}