Django项目 母版和继承的基本使用
在制作的页面中，很多页面只有一小部分是有改变的，其他的部分都一样，这个时候就可以将没有变动的部分作为母版。
示例：新建一个base.html ，用来当作母版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书籍列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'fontawesome/css/fontawesome.min.css'%}"rel="stylesheet">
<style>
#imgs1 {
width: 50px;
height: 50px
}
#A1 {
padding-bottom: 5px;
}
</style>
</head>
<body>
<!--导航条开始-->
<!-- bootstrap框架 inverse设置为黑色导航条 default设置为白色-->
<nav class="navbar navbar-inverse">
<!-- bootstrap框架 container 左右两边会有一个15px的padding（内边距）container-fluid 没有内边距 不管屏幕大小 都是100% -->
<div class="container-fluid">
<!-- 这是品牌图标的设置开始-->
<div class="navbar-header">
<img id="imgs1"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F21%2F20210721122539_af638.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651157116&t=a7efb24de09f659364a478d7754d9714">
<span>图书管理系统</span>
</div>
<!--品牌图标设置结束-->
<!-- 这是导航栏其他标题设置的开始 -->
<!-- collapse 这是设置在视口大于768px时才显示-->
<!-- navbar-collapse 小于768px时 折叠的div元素会以列表的形式显示-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- navber-nav 设置ul为导航条件组件内的列表元素-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">实时监控<span class="sr-only">(current)</span></a></li>
<li><a href="#">数据分析</a></li>
<li><a href="#">日常管理</a></li>
<li><a href="#">基础设置</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<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><a href="#">用户名</a></li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="{% block publisher_class %}{% endblock %}" ><a href="/publist/">出版社列表 </a></li>
<li class="{% block book_class %}{% endblock %}"><a href="/booklist/">书籍列表 </a></li>
<li class="{% block author_class %}{% endblock %}"><a href="/author_list/">作者列表 </a></li>
</ul>
</div>
<div class="col-md-10">
{# #page-mian表示页面的主体内容#}
{% block page-main %}
{% endblock %}
</div>
</div>
</div>
<!--导航条结束-->
<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
以上的代码都是多个页面用到的同样的代码 ，其他页面只需要继承这个母版就可以了！
在 book_list.html 中继承母版
示例：
{#继承母版 base.html#}
{% extends "base.html" %}
{#把自己页面的内容 塞到母版里面相应的位置#}
{% block page-main %}
<div class="panel panel-primary">
<div class="panel-heading">图书列表</div>
<div class="panel-body">
<!-- table-striped 条纹状的表格 table-bordered 带边框的表格 table-hover 鼠标悬停效果 table-condensed 表格紧缩-->
<table class="table table-striped table-bordered table-hover table-condensed">
<!-- 这是表单的头部开始-->
<div id="A1">
<a class="btn btn-primary" href="/add_booklist/">新增图书</a>
</div>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>类型</th>
<th>出版社名称</th>
<th>操作</th>
</tr>
</thead>
<!-- 表单头部结束-->
<!-- 表单内容开始-->
<tbody>
{% for book in book_list %}
<tr>
<td>{{ book.id }}</td>
<td>{{ book.name }}</td>
<td>{{ book.type }}</td>
<td>{{ book.Publisher.name }}</td>
<td>
<a class="btn btn-info" href="/egit_book/?id={{ book.id }}">编辑</a>
<a class="btn btn-danger" href="/delete_book/?id={{ book.id }}">删除</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5" class="text-center">暂时没有数据哦~</td>
</tr>
{% endfor %}
</tbody>
<!-- 表单内容结束-->
</div>
</div>
</table>
<!-- 这是分页功能的开始-->
<nav aria-label="Page navigation">
<ul class="pagination navbar-right">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- 这是分页功能的结束-->
{% endblock %}
{% block book_class %}
active
{% endblock %}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）