Flask中jinja2的继承实现方法及实例

下面是关于Flask中jinja2的继承实现方法及实例的完整攻略：

一、什么是jinja2的继承？

在Flask中使用jinja2作为模板引擎，可以方便的进行HTML页面的渲染。而模板引擎jinja2提供了模板的继承功能。它允许我们在一个基础模板中定义通用的结构和布局，然后在衍生模板中进行不同的内容扩展。

简单来说，jinja2的继承就是可以在一个基础页面中定义一些通用的结构和布局，然后在子页面中进行扩展和定制化。这样可以减少HTML代码的重复，提高页面开发效率。

二、jinja2继承的实现方法

要实现jinja2的继承功能，需要以下步骤：

创建一个基础模板（base.html）文件，定义通用的结构和布局，例如head、header、footer等部分。这些部分使用{% block %}和{% endblock %}标签包裹起来，表示它们是一个可重写的代码块。
创建一个子模板（child.html）文件，通过{% extends %}标签来继承基础模板。在子模板中，使用{% block %}和{% endblock %}标签来覆盖基础模板中的代码块，并添加新的内容。

三、示例一：基础模板和子模板的实现

1. 创建一个基础模板（base.html）文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Welcome{% endblock %}</title>
    {% block css %}
        <link href="/static/css/style.css" rel="stylesheet">
    {% endblock %}
</head>
<body>

<header>
    {% block header %}
        <div class="logo"><a href="/">My Web Site</a></div>
    {% endblock %}
</header>

{% block content %}

{% endblock %}

{% block javascript %}
    <script src="/static/js/jquery.min.js"></script>
{% endblock %}

<footer>
    {% block footer %}
        <div class="copy">&copy; 2022 My Web Site</div>
    {% endblock %}
</footer>

</body>
</html>

这个基础模板文件包含了如下区块：

{% block title %}和{% endblock %}：页面标题
{% block css %}和{% endblock %}：引入CSS样式表文件
{% block header %}和{% endblock %}：页面头部
{% block content %}和{% endblock %}：页面内容
{% block javascript %}和{% endblock %}：引入JavaScript脚本文件
{% block footer %}和{% endblock %}：页面底部
创建一个子模板（child.html）文件，通过{% extends %}标签来继承基础模板，代码如下：

{% extends 'base.html' %}

{% block title %}My Web Site - Home{% endblock %}

{% block content %}
    <div class="main">
        <h1>Welcome to My Web Site!</h1>
        <p>We offer the best services in town.</p>
    </div>
{% endblock %}

在上面的子模板文件中，通过{% extends %}标签来继承基础模板文件（base.html）。同时，通过{% block %}和{% endblock %}标签来覆盖基础模板文件中的代码块，并添加新的内容。在这个例子中，覆盖了标题和内容两个代码块。

四、示例二：子模板继承其他子模板

在jinja2中，子模板可以继承其他子模板，这样就可以实现更加复杂的页面布局和组合。下面，我们就来看一个例子。

1. 创建一个基础模板（base.html）文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Welcome{% endblock %}</title>
</head>
<body>

<header>
    {% block header %}
        <div class="logo"><a href="/">My Web Site</a></div>
    {% endblock %}
</header>

{% block content %}

{% endblock %}

{% block javascript %}
    <script src="/static/js/jquery.min.js"></script>
{% endblock %}

<footer>
    {% block footer %}
        <div class="copy">&copy; 2022 My Web Site</div>
    {% endblock %}
</footer>

</body>
</html>

这个基础模板文件和之前的例子中有些不同。它只包含了标题、头部、底部和JavaScript代码块。内容代码块已经被移动到两个子模板中。

创建一个子模板（home.html）文件，代码如下：

{% extends 'base.html' %}

{% block title %}My Web Site - Home{% endblock %}

{% block content %}
    <div class="main">
        <h1>Welcome to My Web Site!</h1>
        <p>We offer the best services in town.</p>
    </div>
{% endblock %}

创建一个子模板（about.html）文件，代码如下：

{% extends 'base.html' %}

{% block title %}My Web Site - About Us{% endblock %}

{% block content %}
    <div class="main">
        <h1>About Us</h1>
        <p>We are a small but dedicated team of professionals.</p>
    </div>
{% endblock %}

在上述例子中，子模板home.html和about.html都继承了基础模板base.html，然后在内容代码块中分别添加了不同的内容。

五、总结

在Flask中使用jinja2模板引擎，通过继承可以实现HTML模板的复用。仅需要在基础模板中定义通用的HTML结构和布局，子模板则能通过继承机制，使用并扩展基础模板中的代码模块和样式，大大提高了页面开发效率。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Flask中jinja2的继承实现方法及实例 - Python技术站

Flask中jinja2的继承实现方法及实例

一、什么是jinja2的继承？

二、jinja2继承的实现方法

三、示例一：基础模板和子模板的实现

1. 创建一个基础模板（base.html）文件，代码如下：

四、示例二：子模板继承其他子模板

1. 创建一个基础模板（base.html）文件，代码如下：

五、总结

相关文章