模板之继承

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

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

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

模板的父类

master.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>

模板的子类

son.html

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

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

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

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

猜你喜欢