模板的继承
绝大多数 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 继承的派生模板，这就是我让应用程序的所有页面拥有统一外观布局而不用重复编写代码的秘诀。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论