模板的继承
-
定义模板: layout.html
{% block content %}{% endblock %}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>员工管理系统</title>
{% load static %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}" />
{% block css %}{% endblock %}
<style>
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<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>
<strong><a class="navbar-brand" href="/users/list/">员工管理系统</a></strong>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/depart/list/"><strong>部门管理</strong></a></li>
<li><a href="/users/list/"><strong>用户管理</strong></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<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>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 新建区域 -->
<div>
{% block content %}{% endblock %}
</div>
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>-
继承模板
{% extends 'layout.html' %}
{% block content %}
<h1>首页</h1>
{% endblock %}<!-- 修改部门管理depart_list.html举例 -->
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<div>
<a href="/depart/add/">
<button class="btn btn-success"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
新建部门</button>
</a>
</div>
<div style="margin-top: 20px;">
<div class="panel panel-default">
<div class="panel-heading">
<strong>
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 部门列表
</strong>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>部门ID</th>
<th>部门名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for iteam in depart_list %}
<tr>
<th scope="row">{{ iteam.id }}</th>
<td>{{ iteam.dep_id }}</td>
<td>{{ iteam.title }}</td>
<td>
<a class="btn btn-primary btn-xs" href="/depart/{{ iteam.id }}/edit/"> 编辑 </a>
<a class="btn btn-danger btn-xs" href="/depart/del/?nid={{ iteam.id }}"> 删除 </a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}-
格式
#定义父模板可被重写内容
{% block block_name %}
...可以被子模板覆盖的内容
{% endblock block_name %}
#继承父模板
{% extends '父模板名称' %}
#子模板重写父模板
{% block block_name %}
...子模板覆盖后呈现的新内容
{% endblock block_name %}<!-- 举例 -->
<!-- 定义父模板 base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome to 我的课堂 {% endblock title %}</title>
</head>
<body>
<!--区域1默认区域不可以被子模板修改-->
<p>亲爱的同学您好：</p>
<hr>
<!--区域2可以被子模板重写-->
{% block content %}
<p>这是主体内容可以被子模板重写</p>
{% endblock content %}
<hr>
<!--区域3可以被子模板重写-->
{% block footer %}
<p>这是结尾的内容也可以被重写</p>
{% endblock footer %}
</body>
</html>
<!-- 定义子模板文件 test.html 继承父模板 -->、
{% extends 'index/base.html' %}
<!--重写title-->
{% block title %} 欢迎你学习Django教程 {% endblock %}
<!--区域1保持父模板默认状态-->
<!--对父模板的区域2进行重写-->
{% block content %}
{% for item in course %}
<li>{{ item }}</li>
{% endfor %}
{% endblock content %}
{% block footer %}
<p>最后希望<span style="color:green">{{ name }}</span>可以学有所成</p>
{% endblock footer %}
-
如果有个别页面不需要用到指定的css、js样式,可以这么做
{% block css %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}" />
<style>
.navbar {
border-radius: 0;
}
</style>
{% endblock css %}
{% block js %}
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
{% endblock js %}在layout.html模板中将css区域独立出来