实际开发中，会有多个html页面，这些html页面中有很多东西是重复的， 比如引入的css,js的路径，还有一些内容的重复， 为了避免进行多次重复的操作，就需要定义一个公共的页面，然后其他页面复用/继承这个公共的页面， 再加上自己本身不同的内容
1.首先，定义一个公共的base.html页面，这个页面是其他所有页面都要用到的
在head,main,js部分都会留出一个入口，等其他页面继承的时候，在里面添加内容
附上如下部分代码
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="origin">
<!-- TDK and ICO -->
<title>{{ web_site.title }}</title>
<meta name="description"
content="{{ web_site.desc }}">
<meta name="keywords" content="Python自学,Python爬虫,Django博客,Python web开发,个人博客">
<!--站长验证-->
<link rel="shortcut icon" href="/static/blog/img/favicon.ico" type="image/x-icon"/>
<!-- Bootstrap and font-awesome CSS -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="/static/js/headroom.min.js"></script>
<!-- blog CSS -->
<link href="/static/css/base.css" rel="stylesheet">
{% block css %}
{% endblock %}
<!--根据cookies判断是否启用暗色主题-->
</head>
<main>
<div class="container">
<div class="row">
{% block content %}
{% endblock %}
<div class="col-lg-4">........
</main>
<script src="/static/js/js.cookie.min.js?v=20191123.12"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
{% block js %}
{% endblock %}
2.在其它页面继承复用base.html,比如在index.html页面
代码如下：
{% extends 'base.html' %}
{% block css %}
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/index1111.min.css" rel="stylesheet">
{% endblock %}
{% block content %}
<div class="col-lg-8"...>
{% endblock %}
注意：在base.html页面和index.html页面里面的入口名称要一致