看起来好多了吧? 赶紧试试这个新版本的应用程序 。看看模板是如何工作的 。在浏览器中加载页面后 。你需要从浏览器查看HTML源代码并将其与原始模板进行比较 。
render_template()函数调用Flask框架原生依赖的Jinja2模板引擎 。Jinja2用render_template()函数传入的参数中的相应值替换{{…}}块 。
控制结构—-if条件、for循环、继承上述过程只是理解了:Jinja2模板引擎 如何在渲染过程中用实际值 替换 (模板中的)占位符 。接下来将认识到更多 Jinja2在模板文件中支持的更多强大操作:if条件、for循环、继承等 。源自官网的这句话:
Thereareafewkindsofdelimiters.ThedefaultJinjadelimitersareconfiguredasfollows:{%...%}forStatements{{...}}forExpressionstoprinttothetemplateoutput{#...#}forCommentsnotincludedinthetemplateoutput#...##forLineStatements
if、for、继承均在{% … %}块中写控制语句 。if条件形如:
{%iftitle%}...语句块{%else%}...语句块{%endif%}
app/templates/index.html:模板中添加条件语句
<html><head>{%iftitle%}<title>{{title}}-Microblog</title>{%else%}<title>WelcometoMicroblog!</title>{%endif%}</head><body><h1>Hello,{{user.username}}!</h1></body></html>
上述代码中if语句块的功能是:若视图函数index()没有传递title占位符变量的值 。则index.html模板将会提供默认值(else语句块中) 。而不是显示空标题 。尝试将routes.py中render_template()中的title=’Home’,删除 。效果:图略
for循环在模板中形如:
{%forpostinposts%}...语句块{%endfor%}
需求:登录用户可在主页中查看最新的帖子 。实现:首先 。用虚拟对象的方法来创建一些用户、帖子 。以供显示 。app/routes.py:视图函数中的假帖子
fromappimportappfromflaskimportrender_template#从flask包中导入render_template函数@app.route('/')@app.route('/index')defindex():user={'username':'Miguel'}#用户posts=[#创建一个列表:帖子 。里面元素是两个字典 。每个字典里元素还是字典 。分别作者、帖子内容 。{'author':{'username':'John'},'body':'BeautifuldayinPortland!'} 。{'author':{'username':'Susan'},'body':'TheAvengersmoviewassocool!'}]returnrender_template('index.html',title='Home',user=user,posts=posts)
帖子列表 可包含任意数量的元素 。由视图函数index()决定将在页面中显示的帖子数量 。而模板index.html不能假设这有多少个帖子 。因此它需要准备好以通用方式呈现视图发送来的尽可能多的帖子 。在模板index.html中 。用for循环遍历所有的帖子并呈现 。app/templates/index.html:在模板中的for循环
<html><head>{%iftitle%}<title>{{title}}-Microblog</title>{%else%}<title>WelcometoMicroblog!</title>{%endif%}</head><body><h1>Hello,{{user.username}}!</h1>{%forpostinposts%}<div><p>{{post.author.username}}says:<b>{{post.body}}</b></p></div>{%endfor%}</body></html>
模板继承形如:
{%extends"base.html"%}{%blockcontent%}...{%endblock%}
现在 。大部分Web应用程序在页面顶部有一个导航栏 。它常包含一些常用链接:如登录、退出、编辑个人资料等 。可以很轻松地将导航栏添加到index.html模板 。甚至更多的HTML页面中 。但随着应用程序的增长(页面数量的增多) 。这些页面都将使用相同的导航栏 。不可能每一个页面都增加一份相同的导航栏代码 。
Jinja2具有模板继承功能 。完美解决上述问题 。在实际操作中 。将所有模板共有的页面布局部分移至基础模板中 。其他模板则继承自它 。
实例:实现一个简单的导航栏 。其他模板继承它 。在app/templates目录下创建一个基础模板文件 base.html 。app/templates/base.html:带导航栏的基础模板
<html><head>{%iftitle%}<title>{{title}}-Microblog</title>{%else%}<title>WelcometoMicroblog</title>{%endif%}</head><body><div>Microblog:<ahref=https://www.wangchuang8.com/"/index">Home
{%blockcontent%}{%endblock%}