Django 的模板继承

1 和前面一样，创建工程

2 配置 views.py 文件， urls.py 文件

3 新建templates 文件夹， 在里面新建两个文件， index.html, home.html

4 在settings.py 文件添加路径， 运行程序，如图所示

因为是模板继承，所以这里以bootstrap 框架为例，首先去官网 下载，我们只是简单的页面，所以只下载简易版

5 新建一个staticfiles文件夹, 将下载下来的三个文件夹复制进去

6 在settings 文件里进行设置

7, 打开bootstrap教程，复制里面的导航栏的代码进行练习，将代码复制到templates文件夹下的base.html 文件里，
并且在最上面加上 {% load static %}
还有link 这里的引入：

    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

8 打开index.html 文件，只写一句

{% extends 'base.html' %}

表示继承base.html 里的所有代码，
运行代码，打开浏览器，看到如些界面

至此一个简单的模板继承已经写完，下面将介绍它的一些高级用法，
比如修改继承的代码的一些属性
实例一
我们在base.html 文件里进行如下配置，

{% block style %}
    <style>
        *{
            color: red !important;
        }
    style>
    {% endblock style %}
# 中间一行代码是html原有的，这里只是加上{block}
 {% block nav %}
    <nav class="navbar navbar-default" role="navigation">
        {% endblock nav %}

完成以后刷新页面可以看到所有字体变红

在index.html 文件里，还是继承了base.html ，在此基础上进行修改

{% block style %}
<style>
    *{
        color: blue !important;
    }
style>
{% endblock style %}

{% endblock style %}

#同上面的注释
{% block nav %}
    <nav class="navbar navbar-inverse" role="navigation">
{% endblock nav %}

可以看到更改后的字体颜色变为蓝色，而且默认背景颜色也改了

实例二
这个代码比较简单，直接上图片对照 下面这个是base.html文件的

下面这个是index.html 文件修改后的

实例三
在base.html 文件的最后进行如下配置

<h1 id="des">这是一个专门为自己定做的网站h1>
    <script src="{% static 'js/jquery.js' %}">script>
    <script src="{% static 'js/bootstrap.js' %}">script>
    {% block script %}
        <script>
            $('#des').css({
                'color': 'blue',
                'font-size': '100px'
            })
        script>
    {% endblock script %}

可以看到

在index.html 文件里配置如下

{% block script %}
    <script>
        $('#des').css({
            'color': 'pink',
            'font-size': '50px'
        })
    script>
{% endblock script  %}

完了以后运行可以看到

最后我们在home.html 文件里进行如下配置，和上面两个形成对比

{% extends 'base.html' %}

{% block style%}
{% endblock style%}

{% block body %}
{% endblock body%}

{% block script %}
{% endblock script %}