关于模板引擎的继承和导入：

一、继承extend

通常页面切换时，页面布局中不动的内容，写成母版，通过继承使用，

（一）母版中，使用{% extend css %}{%end%}、{% extend body %}{%end%}、{% extend js %}{%end%}，布局自定义部分内容，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>matherMOD</title>
    <!--公共样式-->
    <style>
        .title{
            height:44px;
            background-color:yellow;
            color:blue;
            font-size:24px;
        }
        .body{
            height:800px;
        }
        .foot{
            height:44px;
            background-color:pink;
            font-size:24px;
        }
    </style>
    <!--自定义样式-->
    {% block css %}{% end %}
</head>
<body>
    <div class="title">
        欢迎光临
    </div>
    <div class="body">
    {% block body %}{% end %}
    </div>
    <div class="foot">
        拜拜
    </div>
    {% block js %}{% end %}
</body>
</html>
View Code

（二）继承母版的时候：

　　1、使用{% extends ‘          ’ %}导入模板，

　　2、同样使用{% extend css %}{%end%}、{% extend body %}{%end%}、{% extend js %}{%end%}，设置自定义部分内容的具体，

{% extends '../master/matherMOD.html' %}

{% block body %}
    <h1>account</h1>
    <h2>登录</h2>
{% end %}

{% block js %}
    <script>
        console.log('account')
    </script>
{% end %}
View Code

 二、导入include

页面中经常使用的组件，写成单独的模板，进行导入使用，

（一）将组建写成单独的模板，

<form action="/">
    <span>用户名：</span> <input type="text" name="name" id="username">
    <span>密码：</span> <input type="password" name="pwd" id="password">
    <input type="submit" value="提交">
</form>
View Code

（二）导入模板：使用语句{%include ‘    ’ %}

{% extends '../master/matherMOD.html' %}
<!--注意extends后面使用单引号-->

{% block body %}
    <h1>hello</h1>
    <h2>你好</h2>
    {% include '../include/form.html' %}        <!--注意单引号和空格-->
{% end %}

{% block js %}
    <script>
        console.log('hello')
    </script>
{% end %}
View Code

（三）导入语句仅相当于将代码块复制过来，同样可以使用返回值进行渲染，

<form action="/">
    <span>用户名：</span> <input type="text" name="name" id="username">
    <span>密码：</span> <input type="password" name="pwd" id="password">
    <input type="submit" value="提交">
</form>
{% for item in num %}
<h4>{{ item }}</h4>
{% end %}
View Code