Flask模板继承实践-优快云博客

本文介绍如何使用Flask中的Jinja2模板继承特性，通过创建基础模板简化重复代码，实现导航栏等公共元素的统一管理和复用。

引用自：http://www.pythondoc.com/flask-mega-tutorial/templates.html#id5

模板继承
在这一章结束前我们将讨论最后一个话题。

在我们的 microblog 应用程序中，在页面的顶部需要一个导航栏。在导航栏里面有编辑账号，登出等等的链接。

我们可以在 index.html 模板中添加一个导航栏，但是随着应用的扩展，越来越多的模板需要这个导航栏，我们需要在每一个模板中复制这个导航栏。然而你必须要保证每一个导航栏都要同步，如果你有大量的模板，这需要花费很大的力气。

相反，我们可以利用 Jinja2 的模板继承的特点，这允许我们把所有模板公共的部分移除出页面的布局，接着把它们放在一个基础模板中，所有使用它的模板可以导入该基础模板。

所以让我们定义一个基础模板，该模板包含导航栏以及上面谈论的标题(文件 app/templates/base.html):

<html>
  <head>
    {% if title %}
    <title>{{title}} - microblog</title>
    {% else %}
    <title>microblog</title>
    {% endif %}
  </head>
  <body>
    <div>Microblog: <a href="/index">Home</a></div>
    <hr>
    {% block content %}{% endblock %}
  </body>
</html>
在这个模板中，我们使用 block 控制语句来定义派生模板可以插入的地方。块被赋予唯一的名字。

接着现在剩下的就是修改我们的 index.html 模板继承自 base.html (文件 app/templates/index.html):

{% extends "base.html" %}
{% block content %}
<h1>Hi, {{user.nickname}}!</h1>
{% for post in posts %}
<div><p>{{post.author.nickname}} says: <b>{{post.body}}</b></p></div>
{% endfor %}
{% endblock %}

View Code

通过{%block%}{%endblock%}来控制继承后，可以添加新内容的地方。