模板的那些事

1.模板继承

在HTML里，我们经常会重复使用一个HTML页面的框架，然后在复制里面的代码，在粘贴到其他的页面里，这样既费力又费时，所以可以通过下面的方法，来改善这个问题，那么这个方法是什么呢？就是模板继承啦！

模板继承是3.1.2版本添加的一项更加灵活的模板布局方式，模板继承不同于模板布局，甚至来说，应该在模板布局的上层。模板继承其实并不难理解，就好比类的继承一样，模板也可以定义一个基础模板（或者是布局），并且其中定义相关的区块（block），然后继承（extend）该基础模板的子模板中就可以对基础模板中定义的区块进行重载。
因此，模板继承的优势其实是设计基础模板中的区块（block）和子模板中替换这些区块。
每个区块由<block></block>标签组成，并且不支持block标签的嵌套。

那我们来简单的举例一下吧！

模板的父类

father.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>       #子类将会在{% block title %} {% endblock %}这里面填写子类网页的标题内容
    <link rel="stylesheet" href="/static/commons.css" />
    <style>
        .pg-header{
            height: 50px;
            background-color: seashell;
            color: green;
        }
    </style>
    {% block css %} {% endblock %}                        #子类将会在 {% block css %} {% endblock %}这里面填写子类网页的样式
</head>
<body>
    <div class="pg-header">模板之继承</div>
    
</body>
</html>

模板的子类

son1.html

{% extends 'father.html' %}    #告知继承的是master.html

{% block title %}模板之继承{% endblock %}   #替换父类模板的{% block title %}{% endblock %}添加标题内容

{% block css %}   #替换父类模板的{% block css %}{% endblock %}添加样式
    <style>
        body{
            background-color: red;
        }
    </style>
{% endblock %}

到此为止，这就是模板的继承

2.模板导入

承接上文，既然模板继承已经知道，那么模板导入也变得很轻松

模板导入，什么是模板导入呢？我先举个例子吧，假如你在做一个项目，但是这个项目的所有.html文件中都要有一个div的模态框，然而，为了实现这个功能你不得不在每个html文件中重复写他，既耗力又费时，所以可以通过模板导入来完成这项工作，利用模板导入，可以用简短的语句条令，来完成很多重复复杂的任务！这就是它的便捷之处!

首先先创建一个模板，为了通俗易懂，没做那么多的修饰

tag.html

<div style="border: 1px solid red;width: 400px;height: 200px">
    <input type="text" />
</div>

son1.html

{% extends 'father.html' %}

{% block titel %}
子类
{% endblock %}

{% block css %}
<style>
    body{
        margin: 0;
    }
    .pg_title{
        height: 48px;
        background-color: aqua;
        color: red;
    }
</style>
{% endblock %}

{% block content %}
    <div>
        <ul>
            {% for u in user_list %}
                <li>{{ u }}</li>
            {% endfor %}
        </ul>
    </div>
    {% include 'tag.html' %}   #导入之前创建的模板，可以在这个页面中显示tag.html的所创建的样式
{% endblock %}

3.模板的执行

模版的创建过程，对于模版，其实就是读取模版（其中嵌套着模版标签），然后将 Model 中获取的数据插入到模版中，最后将信息返回给用户。

def current_datetime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now %s.</body></html>" % now
    return HttpResponse(html)

View Code