当我们浏览一个网站的时候发现里面的网页大部分都是相同的。
例如： 图书管理系统
注： 我们图中标红框的部分为母版（可以理解为统一格式）
- 定义母板：在 templates 中创建一个名为 base.html 的模板
base.html
<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://v3.bootcss.com/favicon.ico">
<title>Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
{% include 'nave.html' %}
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
#将图书管理系统中的左边的红框中的内容做成母版样式，供子版继承
{% block nav %}
<ul class="nav nav-sidebar">
<li><a href="/publisher_list/">出版社列表页</a></li>
<li><a href="/book_list/">图书列表页</a></li>
<li><a href="/author_list/">作者列表</a></li>
</ul>
{% endblock %}
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">出版社管理页面</h1>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">出版社列表 <i class="fa fa-thumb-tack pull-right"></i></div>
<div class="panel-body">
<div class="row" style="margin-bottom: 15px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-md-4 -->
<div class="col-md-2 pull-right">
{# <button class="btn btn-success" data-toggle="modal" data-target="#myModal">新增</button>#}
<a class="btn btn-success" href="/add_publisher/">新增出版社</a>
</div>
</div>
{# 在这里，子模板将属于各自的内容添加进去， 每个页面填充不同的内容#}
{% block main %}
{% endblock %}
<nav aria-label="Page navigation" class="text-right">
<ul class="pagination">
<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>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">用户信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</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="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
nav.html: 将图片（图书管理系统上方的样式做成母版）
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<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="https://v3.bootcss.com/examples/dashboard/#">图书管理系统</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
<li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
- 继承母板
语法：{% extends ‘base.html’ %}
book_list.html
{% extends 'base.html' %}
{% block main %}
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>title</th>
<th>publisher</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>python入门</td>
<td>北京出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>Java入门</td>
<td>天津出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>UI入门</td>
<td>上海出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
</tbody>
</table>
{% endblock %}
{% block nav %}
<ul class="nav nav-sidebar">
<li><a href="/publisher_list/">出版社列表页</a></li>
<li class="avtive"><a href="/book_list/">图书列表页</a></li>
<li><a href="/author_list/">作者列表</a></li>
</ul>
{% endblock %}
author_list.html
{% extends 'base.html' %}
{% block main %}
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>title</th>
<th>publisher</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>python入门</td>
<td>北京出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>Java入门</td>
<td>天津出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>UI入门</td>
<td>上海出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
</tbody>
</table>
{% endblock %}
{% block nav %}
<ul class="nav nav-sidebar">
<li><a href="/publisher_list/">出版社列表页</a></li>
<li class="avtive"><a href="/book_list/">图书列表页</a></li>
<li><a href="/author_list/">作者列表</a></li>
</ul>
{% endblock %}
publisher_list.html
{% extends 'base.html' %}
{% block main %}
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>title</th>
<th>publisher</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>python入门</td>
<td>北京出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>Java入门</td>
<td>天津出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>UI入门</td>
<td>上海出版社</td>
<td>
<a class="btn btn-danger" href="">删除</a>
<a class="btn btn-info" href="">修改</a>
</td>
</tr>
</tbody>
</table>
{% endblock %}
{% block nav %}
<ul class="nav nav-sidebar">
<li><a href="/publisher_list/">出版社列表页</a></li>
<li class="avtive"><a href="/book_list/">图书列表页</a></li>
<li><a href="/author_list/">作者列表</a></li>
</ul>
{% endblock %}
注： 另附上 urls.py文件 和views文件
urls.py
"""dj03 URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from dj03 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('book_list/', views.book_list),
path('publisher_list/', views.publisher_list),
path('author_list/', views.author_list),
path('base/', views.base),
]
from django.shortcuts import render
def book_list(request):
return render(request, 'book_list.html')
def publisher_list(request):
return render(request, 'publisher_list.html')
def author_list(request):
return render(request, 'author_list.html')
def base(request):
return render(request, 'base.html')
"""
Django settings for dj03 project.
Generated by 'django-admin startproject' using Django 2.1.2.
For more information on this file, see
https://docs.djangoproject.com/en/2.1/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.1/ref/settings/
"""
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '#-0c4@vp%!lp4#xrcq%0g3c7izzd+r3u5w(09u9$x=y5&a)b3j'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'dj03.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'dj03.wsgi.application'
# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/2.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates'),)