模板中的继承和include标签

一般我们的网站虽然页面多，但是很多部分是重用的，比如页首，页脚，导航栏之类的。对于每个页面，都要写这
些代码，很麻烦。
Flask的Jinja2模板支持模板继承功能，省去了这些重复代码。

第一种方法： 使用extends 方法继承
父模板：

<div>
    {% block temp1 %}
    <p> parent页面的头部</p>
    <hr>
    {% endblock %}
    <hr>

    {% block temp2 %}
    <p> parent页面的尾部部</p>
    {% endblock %}
</div>

　　子模版：

 

{% extends "parent.html" %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子模版内容</title>
</head>
<body>
<div>
    {% block temp1 %}
    {{ super() }}
    <p>这个是子模版内容</p>
    {% endblock %}
</div>

</body>
</html>

需要注意的是子模版 中html 第一行代码{ % extend “parent.html" %} 表面继承关系， 如果不想修改父 模板中temp1 中的函数，需要添加{{ super() }}方法，
就可以完全继承父模板内容了，实现效果如下：

 第二种方法：使用include 继承（企业使用最多）

include标签
这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置。include 标签，如果想要使用父模版中的变
量，直接用就可以了。include 的路径，也是跟import 一样，直接从templates 根目录下去找，不要以相对路
径去找。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>include标签内容</title>
</head>
<body>
{% include "header.html" %}
<p>include 中间内容</p>
{% include "footer.html" %}

</body>
</html>

 

 
最后我们看下实现效果：（其实和第一种方法一样的效果）不过更简单一些

 

posted @ 2024-07-23 13:38  yongheng999  阅读(62)  评论(0)    收藏  举报