【玩转全栈】----Django模板的继承

先赞后看，养成习惯！！！

目录

模板继承的好处

模板继承的语法规则

更新代码

上文中的部门管理页面：

【玩转全栈】----Django制作部门管理页面-CSDN博客

大家会发现，由于定义了多个html文件，多个html文件中有很大冗余的代码，比如导航栏、引入文件代码等等，这样的话一个文件的代码量可能就非常大，可读性不高。有没有什么方法能简化操作呢，当然，可以通过模板间的继承语法。

模板继承的好处

Django模板的继承通过定义一个基础模板（如包含页面头部、导航栏和底部的整体布局），允许其他模板在此基础上扩展和定制，从而实现代码复用和统一管理。这种方式减少了重复代码的编写，提高了开发效率和可维护性。当需要更改页面布局时，只需修改基础模板即可统一更新所有子模板，避免逐个修改多个文件。此外，模板继承使页面结构清晰，便于团队协作。子模板中仅需关注特定内容区域的定义，符合模块化和分离关注点的设计原则，大幅提升了项目的可扩展性和灵活性。

模板继承的语法规则

首先需要定义一个模板html文件，模板文件中的一切都会被其他html文件继承，在与其他html文件不同的位置加上：

{% block content %}{% endblock %}

可以理解为占位符，content 是该处占位符的名字，可以修改。

在要引入模板html的文件中，在最前面加入引入语句：

{% extends 'layout.html' %}

layout.html就是模板文件的文件名。

然后是内容：

{% block content %}


"""
内容
"""


{% endblock %}

当然也可以些多个占位符，给一些特定语法区域留位置，比如css、js.

更新代码

通过这样的方式，能大大缩短子文件的代码量，像之前的用户管理页面，使用了模板语法后就是这样了:

layout.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <style>
        .navbar{
            border-radius: 0;
        }
        .my-div{
            height: 600px;
            width: 900px;
            margin: auto ;
            {#margin-top: 40px ;#}
            {#margin-top: 20px;#}
            border: 1px solid #d5dfe3;
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 5px 5px 22px #aaa;
        }
    </style>
</head>
<body>

{#<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>#}
{#<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>#}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">广西联通</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">位于 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">时间</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">地点 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">重庆</a></li>
            <li><a href="#">江西</a></li>
            <li><a href="#">上海</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">福建</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">黑龙江</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
            {% csrf_token %}
            <label>
                <input type="text" class="form-control" placeholder="Search">
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">
{#相当于占位符#}
    {% block content %}{% endblock %}
</div>
</body>
</html>

depart_list.html:

{% extends 'layout.html' %}
{% block content %}
    <div class="container-fluid">
<div class="my-div">
    <div style="margin-bottom: 10px">
        <a class="btn btn-primary" href="/depart/add/">
{#            target="_blank"使得跳转打开新页面#}
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            新建部门</a>
    </div>
    <div>
        <div class="panel-heading">
            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
            部门列表</div>
        <div class="bs-example" data-example-id="contextual-table">
        <table class="table">
          <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 %}
        </table>
      </div>
    </div>
</div>
</div>
{% endblock %}

depart_add.html:

{% extends 'layout.html' %}
{% block content %}
    <style>
        .navbar{
            border-radius: 0;
        }
        .my-div{
            height: 600px;
            width: 900px;
            margin: auto ;
            {#margin-top: 40px ;#}
            {#margin-top: 20px;#}
            border: 1px solid #d5dfe3;
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 5px 5px 22px #aaa;
        }
    </style>

<div class="my-div">
    <div class="container">
        <div class="panel panel-default"  style="width: 750px;margin-top: 100px">
          <!-- Default panel contents -->
          <div class="panel-heading">新建 部门</div>
          <div class="panel-body">
            <form class="form-horizontal" method="POST">
                {% csrf_token %}
              <!-- 部门名输入框 -->
              <div class="form-group">
                <label for="inputDepartmentName" class="col-sm-2 control-label">部门名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入部门名" name="title" value="XX部">
                </div>
              </div>

              <!-- 管理员密码输入框 -->
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">管理员密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd">
                </div>
              </div>

              <!-- 保存按钮 -->
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary">保 存</button>
                </div>
              </div>
            </form>

          </div>

          <!-- Table -->
          <table class="table">
            ...
          </table>
        </div>
    </div>
</div>
{% endblock %}

depart_edit.html:

{% extends 'layout.html' %}

{% block content %}
    <style>
        .navbar{
            border-radius: 0;
        }
        .my-div{
            height: 600px;
            width: 900px;
            margin: auto ;
            {#margin-top: 40px ;#}
            {#margin-top: 20px;#}
            border: 1px solid #d5dfe3;
            padding: 20px 40px;
            border-radius: 10px;
            box-shadow: 5px 5px 22px #aaa;
        }
    </style>
    <div class="my-div">
    <div class="container">
        <div class="panel panel-default"  style="width: 750px;margin-top: 100px">
          <!-- Default panel contents -->
          <div class="panel-heading">修改 部门</div>
          <div class="panel-body">
            <form class="form-horizontal" method="POST">
                {% csrf_token %}
              <!-- 部门名输入框 -->
              <div class="form-group">
                <label for="inputDepartmentName" class="col-sm-2 control-label">部门名 :</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputDepartmentName" placeholder="请输入部门名" name="title" value="{
  
  { obj.title }}">
                </div>
              </div>

               <!-- 管理员密码输入框 -->
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">管理员密码 :</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="请输入管理员密码" name="pwd">
                </div>
              </div>

              <!-- 保存按钮 -->
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary">保 存</button>
                </div>
              </div>
            </form>

          </div>

          <!-- Table -->
          <table class="table">
            ...
          </table>
        </div>
    </div>
</div>
{% endblock %}

感谢您的三连!!!