当前位置：首页 > article >正文

Django html模板的继承

article 2025/2/19 17:41:45

下面三个文件共用同一个导航条，我想通过模板的继承，避免重复代码

1.编写模板文件：layout.html

将三个文件共有的导航条那部分代码，以及静态文件导入等放到模板文件中，其余自由修改的部分使用{% block content %}{% endblock %}

{% block content %}{% endblock %} 是 Django 模板语言（DTL）中的一个重要语法，作用是定义可替换的内容区域，在父模板（基模板）layout.html中，{% block content %} 定义了一个名为 content 的块，子模板可以覆盖这个块的内容。

layout.html 完整代码如下：

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.3/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <style>
        .c1{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>

</head>
<body>

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">部门管理系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/depart/list/">部门首页</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="/depart/add">部门管理</a>
                </li>

                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>


            </ul>


        </div>

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">登录</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">注册</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="log" role="button"
                   data-bs-toggle="dropdown" aria-expanded="false">
                    豆腐乳
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">个人资料</a></li>
                    <li><a class="dropdown-item" href="#">我的账户</a></li>
                    <li><a class="dropdown-item" href="#">修改密码</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">注销</a></li>
                </ul>
            </li>

        </ul>

    </div>
</nav>

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


<script src="{% static 'plugins/bootstrap-5.3.3/js/bootstrap.bundle.min.js' %}"></script>


</body>
</html>

2.编写子文件：depart_index.html（继承模板）

这里简单编写，用作展示，代码如下

通过 {% extends 'layout.html' %} 继承了父模板 layout.html，并覆盖了父模板中的 {% block content %} 块，将其内容替换为 <h1>首页</h1>，从而实现了页面内容的定制化，同时保留了父模板的其他布局和结构。

depart_index.html：

{% extends 'layout.html' %}

{% block content %}
    <h1>首页</h1>
{% endblock %}

效果：

3.更多例子

将使用同一个导航条的文件都改成这样编写

效果

完整代码：

depart_list.html

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div class="c1">
            <a class="btn btn-success" href="/depart/add">新建部门</a>
        </div>

        <div class="card c1">
            <div class="card-header">
                <i class="fa fa-list" aria-hidden="true"></i>
                部门列表
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">

                    <table class="table table-striped table-bordered table-hover mb-0">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for obj in queryset %}
                        <tr>
                            <th scope="row">{{ obj.id }}</th>
                            <td>{{ obj.title }}</td>
                            <td>
                                <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑</a>
                                <a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                </div>

            </div>


        </div>

        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>

    </div>
{% endblock %}

depart_add.html:

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div class="c1">
            <a class="btn btn-success" href="/depart/add">新建部门</a>
        </div>

        <div class="card c1">
            <div class="card-header">
                新建部门
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="inputtitle" class="form-label">标题</label>
                        <input type="text" class="form-control" id="inputtitle" placeholder="标题" name="title">
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>

            </div>

        </div>

    </div>
{% endblock %}

depart_edit.html:

{% extends 'layout.html' %}

{% block content %}
    <div class="container">

        <div class="card c1">
            <div class="card-header">
                修改部门
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="inputtitle" class="form-label">标题</label>
                        <input type="text" class="form-control" id="inputtitle" placeholder="标题" name="title" value="{{ row_object.title }}"/>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>

            </div>

        </div>

    </div>
{% endblock %}

4.多个block

实际编写中，有的html需要bootstrap或js，有的可能不需要，这时就需要在模板中编写多个block

Django 模板中可以有多个 {% block %}，这是 Django 模板继承机制的常见用法，可以在一个模板中定义多个块，子模板可以选择性地覆盖这些块，通过不同的block名称来区分不同的block，从而实现更灵活的页面布局和内容定制。

示例

父模板 (`layout.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}默认标题{% endblock %}</title>

    <!-- 默认的 CSS 文件 -->
    {% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.3/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    {% endblock %}
</head>
<body>
    <header>
        {% block header %}
        这是默认的页头
        {% endblock %}
    </header>

    <main>
        {% block content %}
        <p>这是默认内容。</p>
        {% endblock %}
    </main>

    <footer>
        {% block footer %}
        这是默认的页脚
        {% endblock %}
    </footer>

    <!-- 默认的 JavaScript 文件 -->
    {% block js %}
    <script src="{% static 'plugins/bootstrap-5.3.3/js/bootstrap.bundle.min.js' %}"></script>
    {% endblock %}
</body>
</html>

子模板 (`child.html`)

{% extends 'layout.html' %}

<!-- 覆盖标题 -->
{% block title %}
    子模板的标题
{% endblock %}

<!-- 覆盖 CSS 文件 -->
{% block css %}
    {{ block.super }}  <!-- 保留父模板的默认 CSS -->
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">  <!-- 添加自定义 CSS -->
{% endblock %}

<!-- 覆盖页头 -->
{% block header %}
    <h1>这是子模板自定义的页头</h1>
{% endblock %}

<!-- 覆盖内容 -->
{% block content %}
    <h1>这是子模板的内容</h1>
    <p>子模板覆盖了父模板的 content 块。</p>
{% endblock %}

<!-- 覆盖页脚 -->
{% block footer %}
    <p>这是子模板自定义的页脚。</p>
{% endblock %}

<!-- 覆盖 JavaScript 文件 -->
{% block js %}
    {{ block.super }}  <!-- 保留父模板的默认 JS -->
    <script src="{% static 'js/custom.js' %}"></script>  <!-- 添加自定义 JS -->
{% endblock %}