Teamplate 模板

渊渔
29 阅读4分钟

模板（Templates）

在 Django 中，模板用于渲染动态 HTML 页面，并结合后端传递的数据来展示内容。Django 模板引擎使用一种简洁的模板语言，允许我们在 HTML 文件中嵌入 Python 代码块。模板使得前端与后端逻辑分离，提高了开发效率和可维护性。

1. 模板基础语法

渲染变量

在模板中，使用 {{ }} 来插入变量值。Django 模板引擎会自动将这些变量的值渲染到 HTML 页面中。

<h1>{{ title }}</h1>
<p>{{ message }}</p>

假设传递了 title="Django 模板" 和 message="欢迎学习 Django 模板引擎"，渲染后的结果是：

<h1>Django 模板</h1>
<p>欢迎学习 Django 模板引擎</p>

模板控制语句

控制语句用 {% %} 来表示，可以包含逻辑语句、循环等。

条件语句

{% if user.is_authenticated %}
    <p>欢迎，{{ user.username }}！</p>
{% else %}
    <p>请登录</p>
{% endif %}

这段代码根据用户是否已登录来显示不同的内容。

循环语句

<ul>
    {% for post in posts %}
        <li>{{ post.title }}</li>
    {% empty %}
        <li>没有找到文章</li>
    {% endfor %}
</ul>

这段代码会循环输出所有 posts 中的标题。如果 posts 列表为空，显示 没有找到文章。

2. 模板继承

模板继承是 Django 中的一项重要特性，它允许我们创建基本的模板结构，并通过继承的方式在其他模板中复用这些结构。这样可以减少代码重复，提高代码的可维护性。

基本继承

  1. 创建基础模板：base.html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}网站标题{% endblock %}</title>
</head>
<body>
    <header>
        <h1>网站头部</h1>
    </header>

    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/about/">关于</a></li>
        </ul>
    </nav>

    <div>
        {% block content %} {% endblock %}
    </div>

    <footer>
        <p>版权 © 2025</p>
    </footer>
</body>
</html>
  1. 子模板继承：home.html
{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block content %}
    <h2>欢迎来到首页</h2>
    <p>这里是首页内容</p>
{% endblock %}

在 home.html 中，我们通过 {% extends "base.html" %} 继承了 base.html，并且用 {% block %} 来填充父模板中的空白部分（title 和 content）。

模板包含

{% include %} 标签用于在模板中插入其他模板的内容，适合用来重用小的代码块，如页头、页脚等。

<!-- 包含公共页头 -->
{% include 'header.html' %}

<h2>关于我们</h2>
<p>我们是一家科技公司。</p>

<!-- 包含公共页脚 -->
{% include 'footer.html' %}

3. 加载静态文件

静态文件（如 CSS、JavaScript 和图片）通常与模板分离，Django 提供了一个 static 标签来引用静态文件。

配置静态文件路径

在 settings.py 中配置静态文件路径：

STATIC_URL = '/static/'

在模板中引用静态文件

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/main.js' %}"></script>

通过 {% load static %} 加载静态文件标签，之后可以使用 {% static 'path/to/file' %} 来引用静态文件。注意，静态文件路径是相对于 STATICFILES_DIRS 配置的路径。

4. 模板标签与过滤器

模板标签（Template Tags）

模板标签用于在模板中执行各种任务，如输出内容、逻辑控制、循环、过滤等。

输出标签

{{ name }}  <!-- 输出变量 -->

逻辑标签

{% if user.is_authenticated %}
    <p>欢迎，{{ user.username }}！</p>
{% endif %}

循环标签

{% for post in posts %}
    <h2>{{ post.title }}</h2>
{% empty %}
    <p>没有找到文章</p>
{% endfor %}

自定义标签

Django 允许开发者创建自定义模板标签。自定义标签通常存放在 templatetags 目录下。以下是一个简单的例子：

  1. 创建自定义标签：

在 myapp/templatetags/custom_tags.py 中：

from django import template

register = template.Library()

@register.filter
def uppercase(value):
    return value.upper()
  1. 加载并使用自定义标签：

在模板中：

{% load custom_tags %}
<p>{{ 'hello' | uppercase }}</p>  <!-- 输出 "HELLO" -->

模板过滤器（Template Filters）

过滤器用于处理和格式化数据。Django 提供了许多内置过滤器。

常用内置过滤器

  • date：格式化日期。
  • length：获取列表长度。
  • default：设置默认值。
  • lower：转换为小写。

示例：

<p>{{ some_date|date:"Y-m-d" }}</p>  <!-- 输出格式化的日期 -->
<p>{{ name|lower }}</p>  <!-- 转换为小写 -->

5. 模板继承和可重用组件

Django 的模板继承机制大大提高了模板的重用性。你可以将网站的共同部分（如导航栏、页脚、头部等）提取到独立的模板中，并在不同的页面中通过继承和包含来使用它们。

6. 模板调试

在开发过程中，如果模板渲染出现问题，Django 提供了调试工具，帮助开发者快速发现问题。

启用模板调试

在 settings.py 中，确保启用 TEMPLATES 设置的 DEBUG 模式：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'debug': True,
        },
    },
]

这样可以在模板中看到详细的错误信息，例如，无法找到模板或模板语法错误。

总结

Django 模板引擎提供了强大的功能，允许开发者方便地渲染 HTML 页面并将后端数据传递给前端。模板继承、静态文件加载、模板标签和过滤器等功能，使得模板更具灵活性和可重用性，帮助开发者高效构建 Web 应用。

avatar
文章
阅读
粉丝