12. 爬虫训练场项目，jinja2 模板继承，项目继续迭代
本篇博客我们将前端模板的通用部分进行抽离，便于整理管理，使用的是 jinja2 中模板继承相关技术。
Flask 模板引擎
flask 为了实现模板代码的宠用，jiaja2 提供了块（Block）和宏（Macro）来提高代码的继承和复用性。
块（Block）：用于精简代码，可以通过继承 （extend）复用代码；宏（Macro）：使用宏提高模板复用性，减少复杂度。
让我们先从块说起。
块（Block）
使用块功能，基本逻辑是在模板文件中先声明一个 {% block block_name %} 和 {% endblock %} 的占位语句块，然后在继承的文件中，使用相同的语句块，此时子模板就会替换父模板中相应的语句块。
使用的时候需要注意两个要点。
- 模板不支持多继承，子模板中定义的块，不能同时替换两个父模板中的块；
- 模板中不能定义同名块。
正式编码的时候，建议在 endblock 关键字后跟快名，可以增加代码可读性。
下面编写一个基础模板文件，命名为 base.html，在 app/templates 目录中进行创建，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% if title%}
<title>{{title}}|爬虫训练场，让天下没有失效的爬虫</title>
{% else %}
<title>爬虫训练场，让天下没有失效的爬虫</title>
{%endif%}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="{{url_for('static',filename='css/base.css')}}" />
</head>
<body>
{%block content%}{%endblock content%}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在该文件中，你会发现仅建立了一个 HTML 结构，重点包含 html、head、body 标签以及 CSS 和 JS 文件。
其中添加了一个块，即 {%block content%}{%endblock content%}，用于在后续子模板中提供替换位置。
下面就可以让其它文件继承 base.html 模板，首先修改的是 index.html 文件，继承关键字使用 extends，代码如下。
{% extends "base.html" %}
接下来修改 app/templates/index.html 文件，示例代码如下所示。
{% extends "base.html" %} {% block content %} 下图所示的核心代码 {% endblock %}
由于重复代码较多，这里仅展示核心代码和缩进截图，如下所示。
index.html 文件，从基础模板 base.html 中继承页面布局，所以可以删除原 index.html 文件中 head 部分代码。
更细的块拆解
前文仅对首页 index.html 文件进行了模板继承，实践中可以将模板拆解的更加细致，在 app/templates 目录中建立一个新文件夹，起名为 common，然后再其中建立 header.html，footer.html，nav.html 三个文件。
下面对 index.html 文件再次进行拆解，首先 header.html 部分拆解出头部 head 部分，然后在 base.html 中使用下述代码进行导入。
{%include 'common/header.html' %}
接下来拆解 nav.html，将页面导航标签进行拆解，最后是底部版权部分，迁移到 footer.html 文件中。
经过一番调整，templates/index.html 文件已经修改为如下内容。
{% extends "base.html" %} {% block content %} {% include 'common/nav.html'%}
代码卡片内容 {% include 'common/footer.html'%} {% endblock %}
完善 general 目录和 school 目录 HTML 文件
在前文我们已经提炼出模板文件，接下来就可以对其它 HTML 代码文件进行一番修改。
首先是 general 目录下的文件，修改为如下内容。
table.html、imgs.html、news.html 修改之后的代码如下所示。
{% extends "base.html" %} {% block content %} {% include 'common/nav.html'%}
<div class="container mt-5">……</div>
{% include 'common/footer.html'%} {% endblock %}
除此之外，我们将百度统计代码也进行一下迁移，在 common 目录中建立 tj.html，然后将统计代码移植到这里，接下来在 header.html 文件进行导入即可。
如果被继承父模板的块中存在数据，希望在此基础上继续添加，可以使用 {{super()}}，然后在下面继续追加代码。
宏（Macro）
下面补充 Flask 模板引擎中宏的相关概念，先了解一下宏类似函数，在 templates 目录中建立一个 _form.html 文件，然后输入如下代码。
定义一个不带参数的宏
{% macro input() %}
<input type="text" name="username" value="" />
{% endmacro %}
使用如下代码调用宏。
{{ input() }}
定义带参数的宏
{% macro input2(name, type='text', value='',placeholder='') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value|e }}" placeholder="{{ placeholder }}"/>
{%- endmacro %} {{ input2('username',placeholder="占位符") }}
看完上述代码，相信你已经能体会到 Flask 宏的概念了，如果希望在其它文件中使用宏，需要进行导入，语法结构和 Python import 基本一致，示例如下。
- 直接使用
import……as……； - 使用
from……import……； - 使用
from……import……as……。
例如我们在测试文件 bt.html 文件导入刚刚创建的宏，代码如下。
{% from "_form.html" import input %} {{input()}}
也可以使用下述代码。
{% import "_form.html" as f %} {{f.input()}}
在导入宏的时候，可以增加关键字 with context，此时可以把当前模板中的一些上下文变量传递给宏所在的模板文件。
📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕，可以点点小手赞一下
🌻 发现错误，直接评论区中指正吧
📆 橡皮擦的第 809 篇原创博客
- 点赞
- 收藏
- 关注作者
评论（0）