Django模板系统

Django 的模板系统是一个强大的工具，它提供了一种将数据和 HTML 页面分离的方法，从而让开发人员可以更容易地维护和修改代码。在本文中，我们将深入了解 Django 模板系统的各个方面，包括模板语法、模板继承和模板标签等。

模板语法

Django 模板系统使用类似于 Jinja2 的模板语法。模板语法的主要特点是使用双大括号 {% ... %} 和单大括号 {{ ... }} 来标记模板标签和变量。下面是一些常用的模板标签和变量：

模板标签

{% if ... %}：条件语句，如果条件为真，则执行其中的代码块。
{% for ... in ... %}：循环语句，遍历一个列表或 QuerySet 中的每个元素。
{% block ... %} 和 {% endblock %}：用于定义一个块，可以在模板继承中被子模板重写。
{% extends ... %}：模板继承语句，用于指定模板继承关系。
{% include ... %}：包含一个子模板。

模板变量

{{ var }}：将一个变量的值插入到模板中。
{{ var|filter }}：将一个变量的值通过一个过滤器进行处理。
{{ var.attribute }}：访问一个对象的属性。
在模板语法中，我们还可以使用管道符号 | 将一个变量的值传递给一个过滤器，例如：

{{ text|truncatewords:30 }}

这将使用 truncatewords 过滤器来截断 text 变量的值，只保留前 30 个单词。

模板继承

Django 模板系统的另一个重要特性是模板继承。模板继承可以让我们将重复的代码抽象到一个父模板中，并在子模板中继承它。通过模板继承，我们可以大大减少代码的重复性，提高代码的可维护性和可重用性。

在 Django 中，模板继承是通过 {% extends ... %} 标签来实现的。我们可以创建一个父模板，将其中的一部分代码抽象出来，并在子模板中通过 {% block ... %} 标签来重写它。例如：

<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Default Title{% endblock %}</title>
    {% block extra_head %}{% endblock %}
</head>
<body>
    <div class="container">
        {% block content %}
        <p>This is the default content.</p>
        {% endblock %}
    </div>
    {% block extra_footer %}{% endblock %}
</body>
</html>

在上面的代码中，我们定义了一个名为 base.html 的父模板。在其中，我们使用 {% block ... %} 标签定义了三个块：title、extra_head 和 content。这些块可以在子模板中被重写。

下面是一个示例子模板：

<!-- child.html -->
{% extends 'base.html' %}

{% block title %}Child Title{% endblock %}

{% block extra_head %}
    <link rel="stylesheet" href="style.css">
{% endblock %}

{% block content %}
    <h1>Welcome to my website!</h1>
    <p>This is the content of the child template.</p>
{% endblock %}

在子模板中，我们通过 {% extends ... %} 标签来指定父模板，并通过 {% block ... %} 标签来重写父模板中的三个块。注意，在子模板中我们只需要定义需要重写的块，而不需要包含父模板中的全部内容。

当我们渲染 child.html 模板时，Django 将会先渲染父模板，然后将子模板中重写的块插入到父模板中相应的位置。最终的输出结果将是：

<!DOCTYPE html>
<html>
<head>
    <title>Child Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Welcome to my website!</h1>
        <p>This is the content of the child template.</p>
    </div>
</body>
</html>