先赞后看，养成习惯！！！
目录
模板继承的好处
模板继承的语法规则
更新代码
上文中的部门管理页面：
【玩转全栈】----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 %}感谢您的三连!!!
![[MCAL]Mcu配置](https://i-blog.csdnimg.cn/direct/a16b6a49a2a84f108c97c4e22ca2eb3a.png)
