day20-模板之继承

一、前言

　　我们今天来聊聊模板的继承，我们在写页面的时候，很多东西都是重复使用的，但是我们不能一个个的去复制粘贴吧，还有，那如果我某个页面里面的东西变了咋办呐。对吧，那就不就要全部改掉吗？这样太烦了，所以我们今天就来说说模板的继承，就是子模板继承父模板是如何实现的。

二、模板继承

2.1、模板定义

说明：我在父模板中定义一个block的代码块，然后在子模板中去重写这一小块的代码块

1、父模板的定义

<body>
    <div class="pg-header">帅高高管理</div>
    {% block 块名 %}
    　　html标签
　  {% endblock %}   #定义需要重写的代码块，这个代码块可以在父模板中定义多个。
    <script src="/static/jquery.js"></script>
</body>

2、子模板重写

{% extends '继承的模板名' %} #我要继承的某个模板，一个html页面只能继承一个模板，不能继承多个模板

{% block 块名 %}   #我要替换的模板里面的哪个块
    重写的内容
{% endblock %}

所以：子模板中指定的block位置，就会替换父模板中的指定的位置，然后把整个页面返回给用户。

三、 举例说明

3.1、父模板的代码块定义

说明：需要重写的代码块可以定义多个，而且每一个页面都有自己的风格。以下是父模板master.html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>   #声明标题重写的代码块
    <link rel="stylesheet" href="/static/common.css">
    <style>
        .pg-header{
            height: 48px;
            background-color: seashell;
            color: green;
        }
    </style>
</head>
<body>
    <div class="pg-header">帅高高管理</div>
    {% block content %}<h1>张其高</h1>{% endblock %}   #声明用户管理需要重写的代码块
    <script src="/static/jquery.js"></script>
</body>
</html>

如图：

 

3.2、子模板的编写

说明：子模板中需要重写父模板中定义的block的代码块，首先需要继承父模板，然后重写block代码块，一下是子模板的tpl.html

{% extends 'master.html' %}   #我要继承的master.html模板

{% block title %}用户管理{% endblock %}  #替换模板里面block title的代码块

{% block content %}   #替换模板里面block content的代码块
    <h1>用户信息</h1>
    <ul>
        {% for row in u %}
            <li>{{ row }}</li>
        {% endfor %}
    </ul>
{% endblock %}

如图：

四、重写js和css代码块

　　我们说css需要在head中，js需要在body的底部，然而每个页面都需要有自己的css和js，那怎处理这个呢？我们该如何在父模板中定义css和js的代码块呐？下面我们就来研究一下。

4.1、父模板中定义css和js的块

说明：我们需要自己定义我们的css和js的代码块。

<head>
    <style>
        .pg-header{
            height: 48px;
            background-color: seashell;
            color: green;
        }
    </style>
    {% block css %} {% endblock %}  #定义css的block块，保证了上面的样式不会被子模板覆盖
</head>
<body>
    <script src="/static/jquery.js"></script>
    {% block js %} {% endblock %}   #声明js的block块，这样写的话，既保证了在body的最底部，又能重写js代码块
</body>
</html>

如图：

4.2、重写父模板中的代码块

{% extends 'master.html' %}

{% block css %}  #定义自己的css样式
    <style>
        ....css样式
    </style>
{% endblock %}

{% block js %}   #定义自己的js
    <script>
        //...js代码
    </script>
{% endblock %}

 如图：

 

posted @ 2018-03-27 10:25  帅丶高高  阅读(231)  评论(0)    收藏  举报