Flask之模板继承

喜欢ヅ旅行 2023-01-19 14:53 48阅读 0赞

Flask之模板继承

1 什么是模板继承

模板继承是jinja里面最有力的部分了。就相当于在模板里面创建一个基础的骨架，里面的内容一般是一个网站中的常用元素，比如说网页的头部与尾部。这样下次需要用的话我们直接继承就好了。

2 基础模板

我们来新建一个 base.html，它定义了一个简单的 HTML 骨架，用 于显示一个简单的两栏页面。“子”模板的任务是用内容填充空的块：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &nbsp;&nbsp;&nbsp; {% block head %} &nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" href="{ { url_for('static', filename='style.css') }}"&gt; &nbsp;&nbsp;&nbsp; &lt;title&gt;{% block title %}{% endblock %} - My Webpage&lt;/title&gt; &nbsp;&nbsp;&nbsp; {% endblock %} &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp; &lt;div id="content"&gt;{% block content %}{% endblock %}&lt;/div&gt; &nbsp;&nbsp;&nbsp; &lt;div id="footer"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% block footer %} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp;copy; Copyright 2010 by &lt;a href="http://www.baidu.com/"&gt;you&lt;/a&gt;. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endblock %} &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

在这个例子中，\{% block %\}定义了几个可以被子模版填充的地方。接下来我们来写几个子模版：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:424.7pt;"> {% extends "test01.html" %} {% block title %}Index{% endblock %} {% block head %} &nbsp; { { super() }} &nbsp; &lt;style type="text/css"&gt; &nbsp;&nbsp;&nbsp; .important { color: #336699; } &nbsp; &lt;/style&gt; {% endblock %} {% block content %} &nbsp; &lt;h1&gt;hello&lt;/h1&gt; &nbsp; &lt;p class="important"&gt; <pre style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; 欢迎您</pre> {% endblock %} </td> 
 </tr> 
 </tbody> 
</table>

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70][]

这里 \{% extends %\} 标记是关键，它告诉模板引擎这个模板“扩展”了另一个模板， 当模板系统评估这个模板时会先找到父模板。这个扩展标记必须是模板中的第一个标记。 如果要使用父模板中的块内容，就要使用 \{ \{ super() \}\} 。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5OTQwMg_size_16_color_FFFFFF_t_70]: /images/20221021/537675800dc040fa9187ceec70b72da9.png