Flask Web 极简教程（二）- Flask 模板（Part E）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

五、模板的宏

宏，相当于函数，可以把常用功能抽取出来，实现可重用。HTML 中也会出现重复的代码，将重复的 HTML 代码抽取出来就成为模板的宏，模板的宏是可以写在单独的 HTML 文件中。

模板中的宏的定义需要使用到 macro 关键字

{% marco 宏的名字%}
<!--HTML代码-->
{% endmarco %}

在 templates 文件夹下创建 marco.html 页面，定义并使用宏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<form action="">
    <!--定义一个宏-->
    {% macro input(name, type='text', value='')%}
        <div>
            <input class="input-control class2" type="{{ type }}" name="{{ name }}" value="{{ value }}">
        </div>
    {% endmacro %}
    
    {#  使用宏  #}
    <p>用户名：{{ input('username', value='admin') }}</p>
    {#  密码 password  #}
    <p>密 码：{{ input('password', type='password') }}</p>

</form>
</body>
</html>

这里通过宏定义了一个 input 输入框，并定义了一些参数以及设置了默认值。

在 app.py 中定义一个视图函数，该视图函数返回 marco.html 页面

@app.route('/marco')
def marco():
    return render_template('macro.html')

重新启动项目，浏览器访问 /marco

页面中显示了两个输入框，并且第一个输入框显示了设置的默认值，并且 input 框的文本类型也是通过 type 参数传递的类型。

在项目中并不会把宏的定义的代码和调用代码放在一个文件中，将宏的定义保存在 marco.html 页面中中，新建一个 form.html 并且通过 from ... import ... 来导入定义好的宏。

<form action="">

    <h2>导入并使用宏创建登录表单</h2>
    {% from 'macro.html' import input %}
   
    Username: {{ input('username', value='stark') }}
    Password: {{ input('password', type='password') }}
</form>

新建一个视图函数 forms，该函数返回 forms.html

@app.route('/forms')
def forms():
    return render_template('forms.html')

保存代码，浏览器访问 /forms

六、模板抽象，继承与包含

模板继承

在项目中每个页面都使用了公共的导航栏和底部栏，引用了公共的 js 和 css 等静态文件，这种情况下就可以使用模板的继承，既可以通过 extends 关键字继承一个基本的页面，这个页面中包含了公共的导航栏、静态文件等，在基本页面中使用 block 关键字来定义需要重写的内容。

继承的实现大概分为三个步骤：

首先在被继承的基本页面中通过 block 关键字定义需要重写的内容
接着在新的页面中使用 extends 关键字来继承基本页面
最后就可以在新的页面中通过 block 重写新的内容
如果有的页面无须重写 block 块的内容，也可以使用 super() 关键字来复用被继承页面中的内容。

在 templates 模板下新建基本页面 base.html，将公共的 html 代码放入 base.html 中，这里通过 block 定义了 title 和 content 两个需要重写的块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    {% block title %}
    <title>Title</title>
    {% endblock %}
</head>
<body>
    <div class="contain">
        <header>
            页面头部
        </header>
        <article>
            {% block content %}
                主体内容
            {% endblock %}
        </article>
        <footer>
            页面底部
        </footer>
    </div>
</body>
</html>

新增 extends.html 并继承 base.html，只需要通过 block 关键字填充中间内容即可

{% extends 'base.html' %}

{% block title %}
<title>第一个继承实现的页面</title>
{% endblock %}

{% block content %}
    <h2>这是重写了 base.html 中的 content 部分的内容</h2>
{% endblock %}

新增视图函数 extends

@app.route('/extends')
def extends():
    return render_template('extends.html')

保存代码，并在浏览器中请求 /extends

此时如果需要修改样式或者引用的文件，只需要修改 base.html 即可，比如修改 base.html 的 header，在 heade 标签中增加 css 样式。

<!--其余代码保持不变-->
<style type="text/css">
    div header {
        background-color: rebeccapurple;
    }
</style>

保存代码后，再次访问 /extends

可以看出 extends.html 页面的头部也随之更改。

当然如果不想重写 base.html 页面中定义的 block 块，也可以使用 super() 关键字来复用 base.html 页面中的内容

修改 extends.html 页面，复用 base.html 中 content block 块的内容，并增加新的内容

<!--其余代码保持不变-->

{% block content %}
    <h2>复用 base.html 中的 content 部分的内容</h2>
    {{ super() }}
    <P> 主体内容 2</P>
    <P> 主体内容 3</P>
{% endblock %}

保存代码后，再次访问 /extends

base.html 中 content block 块的内容被保留。

模板包含

当公共的模块不是所有的页面都会使用，比如导航条，可能只有一半的页面会使用同一个导航条，这是后就可以将这个导航条单独拆出来到一个页面，相当于定义一个接口，当有页面需要使用这个导航条时，可以使用 include 关键字引入。

使用模板包含大概分为几个步骤：

首先将只有部分页面才使用的导航栏单独拆到一个页面中
接着在有需要使用导航栏的页面通过 include 关键字引入

新建一个 side.html 页面，保持只有部分页面使用的导航栏

<p>这是一个只有部分页面才使用的导航</p>

在 extends.html 页面中引入这个导航栏，如果页面不需要就可以不引入

{% block content %}
    <h2>引入导航栏</h2>
    {% include 'side.html' %}
    <h2>复用 base.html 中的 content 部分的内容</h2>
    {{ super() }}
    <P> 主体内容 2</P>
    <P> 主体内容 3</P>

{% endblock %}

保存代码后，再次访问 /extends

通过模板的包含引入了在独立页面中定义的导航栏

继承与包含的区别

继承使用关键字 extends 并使用 block 关键字定义和使用代码块，被继承的页面中包含了所有公共的内容，类似于 Java 中的类或者抽象类，而包含则是使用 include 关键字来引入代码块，相当于接口的定义，并不适用于所有页面，如果有需要可以引入。