页面如下，顶部和底部是公用的
要实现公用，需要用到Django里的block
贴一下这个页面的源代码：
<html >
<head>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
{% block title%}<title>列表页</title>{% endblock %}
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/event_manage/">CCTESTER MockServer</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active" id="menu_server"><a href="{% url "mock:server" %}">SERVER</a></li>
<li id="menu_router"><a href="/router_list/">Router</a></li>
<li id="menu_response"><a href="/response_list/">Response</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
<li><a href="#">{{request.user.username }}</a></li>
<li><a href="/logout/">退出</a></li>
{% endif %}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
{% block content %}
<div class="container theme-showcase" role="main">
<!--查询-->
<div class="page-header" style="margin-top: 80px;">
<div id="navbar" class="navbar-collapse collapse" style="float:left;">
<form class="navbar-form" method="get" action="/server_list/">
<div class="form-group">
<input name="server_name" type="text" placeholder="name" class="form-control" >
</div>
<button type="submit" class="btn btn-success" >搜索</button>
</form>
</div><!--/.navbar-collapse -->
<div style="float:right;">
<button type="submit" class="btn btn-primary" onclick="window.location.href='{% url 'add_server' %}'" style="margin-top: 8px;">添加</button>
</div>
</div>
<!--表单-->
<div class="row" >
<div class="col-md-6" style="width: 900px;">
<table class="table table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>path</th>
</tr>
</thead>
<tbody>
{% for server in all_server %}
<tr>
<td>{{ server.id }}</td>
<td>{{ server.name }}</td>
<td>{{ server.path }}</td>
<td><a href="/server_id/2" >编辑</a></td>
<td><a href="/del_api/2">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
<div class="container theme-showcase" role="main">
<div class="page-header">
</div>
<footer class="footer">
<p>© Company 2020, Author:鲲鹏 CCTESTER</p>
</footer>
</div> <!-- /container -->
<script>
window.onload = function () {
var menu_server = document.getElementById("menu_server")
var menu_router = document.getElementById("menu_router")
var menu_response = document.getElementById("menu_response")
menu_server.className='active'
menu_router.className=''
menu_response.className=''
}
</script>
</body>
</html>
切换页面，需要替换中间的一段内容，所以在这段代码前后加上{% block content %}和{% endblock %}
然后再看一下替换这个页面中间一部分内容的代码：
{% extends "mock/base.html" %}
{% block title%}<title>新增 Server</title>{% endblock %}
{% block content %}
<!--添加表单-->
<div class="row" style="margin-top: 80px;">
<div class="page-header">
<h3 style="margin-left: 150px;"> 添加API_SERVER </h3>
</div>
<div class="col-md-6" style="width: 800px;">
<form class="form-horizontal" role="form" action="" method="post" style="margin-left: 30px;">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">name:</label>
<div class="col-sm-10">
<input name="name" type="text" >
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">path:</label>
<div class="col-sm-10">
<input name="path" type="text" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</div>>
{% endblock %}
效果