django父模板的动态参数|极客教程

django父模板的动态参数

在Django中，我们经常会使用模板来渲染网页内容。而为了避免在每个模板中都重复编写相同的代码，我们可以使用父模板（base template）来包含共享的部分，然后在子模板中继承父模板并添加特定的内容。有时候，我们希望给父模板传递一些动态的参数，以便在不同页面中显示不同的内容。本文将详细介绍如何在Django中实现父模板的动态参数。

1. 创建父模板

首先，我们需要创建一个父模板，可以命名为base.html。在这个模板中，我们可以定义一些共享的HTML结构和样式，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/contact/">Contact</a></li>
        </ul>
    </nav>

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

    <footer>
        © 2021 My Website
    </footer>
</body>
</html>

在上面的代码中，我们定义了一个基本的HTML结构，包括页面标题、导航栏、主要内容和页脚。注意如何使用{% block %}标签来定义可被替换的内容块。

2. 创建子模板

接下来，我们可以创建一个子模板来继承父模板并添加特定的内容。假设我们有一个名为home.html的子模板，在这个模板中我们可以定义页面特定的内容，并且可以传递动态参数给父模板，如下所示：

{% extends "base.html" %}

{% block title %}Home - My Website{% endblock %}

{% block content %}
    <h2>Welcome to the Home Page</h2>
    <p>This is the home page of My Website.</p>
    <p>{{ dynamic_content }}</p>
{% endblock %}

在上面的代码中，我们使用{% extends %}标签来继承父模板base.html，然后使用{% block %}标签来填充父模板中定义的可替换内容块。注意如何使用{{ dynamic_content }}来引用动态参数。

3. 传递动态参数

现在，我们需要在视图函数中传递动态参数给子模板。假设我们有一个视图函数如下：

from django.shortcuts import render

def home(request):
    dynamic_content = "This is dynamic content."
    return render(request, 'home.html', {'dynamic_content': dynamic_content})

在上面的视图函数中，我们定义了一个名为dynamic_content的动态参数，并将其传递给子模板home.html。

4. 运行示例

现在，我们可以运行示例代码来查看父模板的动态参数是如何工作的。假设我们已经在urls.py中配置了home视图函数的路由，我们可以访问/home/来查看效果。页面将显示如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home - My Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/contact/">Contact</a></li>
        </ul>
    </nav>

    <main>
        <h2>Welcome to the Home Page</h2>
        <p>This is the home page of My Website.</p>
        <p>This is dynamic content.</p>
    </main>

    <footer>
        © 2021 My Website
    </footer>
</body>
</html>