外观
模板
局部模板
在Web程序中,通常会为每一个页面编写一个独立的模板,比如主页、管理、设置。这些模板通常可以直接在视图函数中渲染并作为HTML主体。这种模板称为主模板或全局模板。除此之外,还会用到很多页面共有的模板,如导航栏、侧边栏、页脚等。这种模板称为局部模板或次模板。
为了和普通模板区分开来,局部模板的命名通常以一个下画线开始,如,定义一个_left_menu.html文件作为后台页面的主模板,然后在每个页面中使用include标签引用该模板,代码如下:
{% include '_left_menu.html' %}模板继承
模板继承类似于Python的类继承。Jinja2允许用户天添加一个父模板,将网页的导航栏、页脚等公共部分放在单独的HTML代码中,而每一个继承父模板的子模板在渲染时会一并渲染父模板并将它作为子模板的一部分。使用这种方法可以避免编写相同的HTML代码。
在Jinja2中,使用关键字extends实现模板的继承。
例:
run.py
# run.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/login')
def login():
return render_template('login.html')
if __name__ == '__main__':
app.run()这个代码非常简单,主要是在根路由下渲染index.html,在login路由下渲染login.html,注意看下方父模板和子模板的构造。
base.html:
<!doctype html>
<html lang="zh">
<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>
{% block content %}
{% endblock %}
{% include 'foot.html' %}
</body>
</html>在这个模板中,在最后使用了include指令将页脚包含在基模板中,内容部分使用block指令包含,命名为content,详细的页面在子模板中编写,在渲染时名字为content的占位符就会被具体内容替代。
index.html:
{% extends 'base.html' %}
{% block content %}
主页内容
{% endblock %}index.html就是base.html的子模板,使用extends指令声明此页面继承自base.html基模板。然后在block中写出具体的内容。
login.html
{% extends 'base.html' %}
{% block content %}
登录页面
{% endblock %}运行run.py,在浏览器中输入127.0.0.1:5000和127.0.0.1:5000/login时,除了显示它们自己的页面以外,由于它们都包含了foot.html,因此页脚都包含在了每一页。