VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > Python基础教程 >

  • 带你认识 flask 的模板(4)

模板的继承

绝大多数Web应用程序在页面的顶部都有一个导航栏，其中带有一些常用的链接，例如编辑配置文件，登录，注销等。我可以轻松地用HTML标记语言将导航栏添加到index.html模板上，但随着应用程序的增长，我将需要在其他页面重复同样的工作。尽量不要编写重复的代码，这是一个良好的编程习惯，毕竟我真的不想在诸多HTML模板上保留同样的代码。

Jinja2有一个模板继承特性，专门解决这个问题。从本质上来讲，就是将所有模板中相同的部分转移到一个基础模板中，然后再从它继承过来。

所以我现在要做的是定义一个名为base.html的基本模板，其中包含一个简单的导航栏，以及我之前实现的标题逻辑。您需要在模板文件app/templates/base.html中编写代码如下：

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<html>    <head>      {% if title %}      <title>{{ title }} - Microblog</title>      {% else %}      <title>Welcome to Microblog</title>      {% endif %}    </head>    <body>        <div>Microblog: <a href="/index">Home</a></div>        <hr>        {% block content %}{% endblock %}    </body></html>

 

在这个模板中，我使用block控制语句来定义派生模板可以插入代码的位置。 block被赋予一个唯一的名称，派生的模板可以在提供其内容时进行引用。

通过从基础模板base.html继承HTML元素，我现在可以简化模板index.html了：

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

自从基础模板base.html接手页面的布局之后，我就可以从index.html中删除所有这方面的元素，只留下内容部分。 extends语句用来建立了两个模板之间的继承关系，这样Jinja2才知道当要求呈现index.html时，需要将其嵌入到base.html中。而两个模板中匹配的block语句和其名称content，让Jinja2知道如何将这两个模板合并成在一起。现在，扩展应用程序的页面就变得极其方便了，我可以创建从同一个基础模板base.html继承的派生模板，这就是我让应用程序的所有页面拥有统一外观布局而不用重复编写代码的秘诀。

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

 

运行效果如下


相关教程