{% include %}标签
在拉勾网中我们可以发现，他的每个网页的头部和尾部都是一样的，那么他是每个html文件中都写了这些代码吗？
答案肯定是否定的。这个时候就需要用到我们的{% include %}标签了。

新建一个项目，然后在里面新建一个base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %}{% endblock %}
     <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 网站标题 -->
    {% load static %}
    <!--图标-->
    <link rel="shortcut icon" href="{% static "favicon.ico" %}" />
    <!-- 在手机显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">


    {% block topothercssjs %}{% endblock %}

</head>
<body>


{% block nav%}
    {% include 'include/nav.html' %}
{% endblock %}

{% block content%} {% endblock %}

<!-- Footer -->
<footer class="py-3 bg-dark" id="footer">
    <div class="container">
        <h5 class="m-0 text-center text-white">Copyright @ 永生</h5>
    </div>
</footer>

{% block bottomjs%}{% endblock %}

</body>
</html>

base.html没有带block是公有的,带的私有的,

例如在index.html用法,

{% extends 'include/base.html' %}

{% load static %}

{% block title %}
          <title>首页</title>
{% endblock %}

{% block topothercssjs %}
             <!-- 引入bootstrap的css文件 -->
    {#    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">#}
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

        <!-- 引入monikai.css -->
        <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
        <!--导入css-->
        <link rel="stylesheet" href="{% static 'common/common.css' %}">
        <link rel="stylesheet" href="{% static 'common/jquery.pagination.css' %}">
         <!-- 引入vuejs -->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.js"></script>

        <script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
{% endblock %}

{% block content%}
     <!--轮播图-->
    <div id="demo" class="carousel slide col-md-6 container " data-ride="carousel" >
        <!--底部指示器-->
          <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
          </ul>

         <!--轮播内容-->
          <div class="carousel-inner" >
              {% for article in all_article %}
                       <!--align="center"图片居中, text-danger警告文本,字体红色-->
                  {% if article.id == num1  %}
                <div class="carousel-item active " align="center">
                    <a href="{% url 'home:detail' %}?id={{ article.id }}">
                        <img src="{{ article.avatar.url }}"  height="400">  <!--设置高固定,宽自适应-->
                        <div class="carousel-caption text-danger">{{ article.title }}</div>
                    </a>
                </div>
                {% endif %}
                  {% if article.id == num2  %}

                    <div class="carousel-item" align="center">
                        <a href="{% url 'home:detail' %}?id={{ article.id }}">
                             <img src="{{ article.avatar.url }}"  height="400">
                            <div class="carousel-caption text-danger">{{ article.title }}</div>
                         </a>

                    </div>
                  {% endif %}

                {% if article.id == num3  %}

                    <div class="carousel-item" align="center">
                        <a href="{% url 'home:detail' %}?id={{ article.id }}">
                             <img src="{{ article.avatar.url }}"  height="400">
                            <div class="carousel-caption text-danger">{{ article.title }}</div>
                         </a>

                    </div>
                  {% endif %}

              {% endfor %}
          </div>

     <!--左右按钮-->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>

</div>


<!-- content -->
<div class="container">
    <!-- 列表循环 -->

    {% for article in articles %}
{# 现实大块按钮,警告色#}
   <button type="button" class="btn btn-outline-warning btn-lg btn-block text-left" >

        <div class="row mt-2">
            <!-- 文章内容 -->
            <!-- 标题图 -->
            <div class="col-3">
                <img src="{{ article.avatar.url }}" alt="avatar" style="max-width:100%; border-radius: 20px">
            </div>
            <div class="col">
                <!-- 栏目 -->
                <a  role="button" href="#" class="btn btn-sm mb-2 btn-warning">{{ article.category.title }}</a>
            <!-- 标签 -->
                <span>
                        <a href="#" class="badge badge-secondary">{{ article.tags }}</a>
                </span>
                <!-- 标题 -->
                <h4>
                    <b><a href="{% url 'home:detail' %}?id={{ article.id }}" style="color: black;">{{ article.title }}</a></b>
                </h4>
                <!-- 摘要 -->
                <div>
                    <p style="color: gray;">
                        {{ article.sumary }}
                    </p>
                </div>
                <!-- 注脚 -->
                <p>
                    <!-- 查看、评论、时间 -->
                    <span><i class="fas fa-eye" style="color: lightskyblue;"></i>{{ article.total_views }}&nbsp;&nbsp;&nbsp;</span>
                    <span><i class="fas fa-comments" style="color: yellowgreen;"></i>{{ article.comments_count }}&nbsp;&nbsp;&nbsp;</span>
                    <span><i class="fas fa-clock" style="color: pink;"></i>{{ article.created|date }}</span>    <!-- date 日期过滤器 -->
                </p>
            </div>

{#            <hr style="width: 100%;"/>#}
            </div>
   </button>
    {% endfor %}


    <!-- 页码导航 -->
    <div class="pagenation" style="text-align: center">
        <div id="pagination" class="page"></div>
    </div>
</div>

{% endblock%}


{% block bottomjs%}
    <!-- 引入js -->
    <script type="text/javascript" src="{% static 'js/host.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.pagination.min.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            $('#pagination').pagination({
                currentPage: {{ page_num }},
                totalPage: {{ total_page }},
                callback:function (current) {

                    <!-- 地址栏复制 -->
                    location.href = '/?cat_id={{ category.id }}&page_size={{ page_size }}&page_num='+current;
                }
            })
        });
    </script>

{% endblock %}

总结

1.{% extends 'base.html' %}的意思时继承自base.html，这个里面有的代码继承之后的模板中全部都有。
2.base.html中的{% block content %}是一个接口，我们可以以在继承的模板中间使用{% block content %}来改变里面的代码。
3.使用{% block content %}标签之后，父模板中{% block content %}标签中的代码都不会在子模板中显示出来。（就像上面base.html中的我是父摸版中的代码从来没有显示出来过。）
4.如果想要父模板中{% block content %}标签中的代码显示出来，则需要添加{{ block.super }}就能够显示了。
5.如果我们在子模板中将代码放在{% block content %}标签的外面，Django是不会给我们渲染的，即是没有效果的。
6.{% extends 'base.html' %}标签必须是第一个标签，因此我们一般都是将 {% extends 'base.html' %}放在第一行。
7.{% extend %}标签和{% include %}传参数是一样的，如果给子模板传递了一个参数，那么该子模板中的父模板能接收到参数，而其他子模板中不能接收到参数。