Flask框架——模板复用（继承、包含、宏）

2021-12-05 本文已影响0人白巧克力LIN

在上篇文章中，我们学习了Flask框架——模板变量、控制块、过滤器，这篇文章我们学习Flask框架——模板复用(继承、include、宏)。

模板复用

在很多网站中，头部和底部模块都是相同的，例如在淘宝中头部内容几乎是一样的，如下图所示：

如上图所示，首页与子页面只有中间内容部分不相同，头部、底部的内容都相同，那么是不是每个网页都要写这种内容相同的HTML代码呢。答案是：不是。这时我们可以使用模板复用，模板复用有三种方法：继承（extends）、包含（include）、宏（macro）。

继承（extends）

继承是为了复用模板中的公共内容。一般Web开发中，继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中，子模板直接继承，而不需要重复书写。
标签语法为：

#父模板
{% block 名字 %}      #名字是任意的
{% endblock %}

#子模板
{% extends '父模板的名字'  %}

继承可以分为两步：

1、定义父模板：

定义一个base.html的模板；
分析模板中哪些是变化的，对变化部分用标签语法block进行“预留位置”；
一般情况下，样式css和脚本js是需要提前预留的。

2、子模板继承父模板：

继承父模板内容；
通过block名字找到对应的标签block来填充内容。

示例代码如下所示：

首先我们创建一个父模板base.html文件，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    # 预留编写网页名的block
    <title>{% block title %}父模板的title{% endblock %}</title>
<style>
    #head{
        height: 50px;
        background-color: bisque;
    }
    #head ul{
        list-style: none;
    }
    #head ul li{
         float: left;
        width: 100px;
        text-align: center;
        font-size: 18px;
        height: 50px;
        line-height: 50px;
    }

    #middle{
        height: 500px;

    }
    #foot{
        height: 50px;
        line-height: 50px;
        background-color: aqua;

    }
</style>
# 预留编写样式css的block
{% block mycss%}{% endblock %}
</head>
<body>
    <div id="head">
        <ul>
            <li>首页</li>
            <li>秒杀</li>
            <li>超市</li>
            <li>图书</li>
            <li>会员</li>
        </ul>
    </div>

    <div id="middle">
    # 预留编写中间内容的block
    {% block middle %}<button id="btn">我是中间部分</button>{% endblock %}
    </div>

    <div id="foot">我是底部内容</div>

# 预留编写脚本的block
{% block myjs %}{% endblock %}
</body>
</html>

我们通过style标签为网页添加了一些样式，并默认网页名、样式、中间内容、脚本是变化的，所以预留了网页名、样式、中间内容、脚本的位置并设置了一些样式。

接下来创建子模板，其代码如下所示：

{% extends 'base.html' %}

# 填充网页名的block
{% block title %}子模板网页名{% endblock %}

# 填充样式的block
{% block mycss %}
<style>
    #middle{
        background-color: chocolate;
    }
    .div1 {
        width: 33%;
        height: 50px;
        float: left;
    }
</style>
{% endblock %}

# 填充脚本的block
{% block myjs %}
<script>
        btn=document.getElementById('btn')
        btn.onclick=(function () {
            alert('欢迎学习Flask框架')
        })
</script>
{% endblock %}

# 填充中间内容的的block
{% block middle %}
    <div class="div1" id="d1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
{% endblock %}

这里我们通过网页名、样式、中间内容、脚本的block标签来填充子模板页面的内容展示。

父、子模板都写好了，接下来编写视图函数来展示效果，视图函数代码如下所示：

#展示父模板页面
@app.route('/base')
def load_base():
    return render_template('base.html')

# 展示子模板页面
@app.route('/')
def index():
    return render_template('index.html')

运行结果如下所示：

当我们需要导入脚本、样式或者图片等其他内容，而不是在父、子模板中编写脚本、样式呢。这时我们可以使用link标签、img标签通过url_for或者通过相对路径导入。

url_for语法为：

url_for('文件夹名',filename='路径/文件名')

# 相对路径
<link rel="stylesheet" href="../static/css/style.css">

# url_for 
<link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
<img src="{{ url_for('static',filename='images/封面.png') }}">

一般情况下，我们都是使用url_for方法导入，而且把脚本、样式、图片等文件放在Flask项目中的静态文件static，如下图所示：

包含（include）

在A、B、C页面都有共同的部分，而其他页面没有这个部分，这个时候就可以考虑使用include包含。

其语法格式为：

{% include '文件夹/模板文件' %}

包含(include)步骤为：

定义一个公共部分文件夹，再在文件夹中创建公共部分的模板；
哪个页面有该公共部分的内容，就通过include语法使用该公共部分的模板。

首先创建一个公共部分文件夹及模板，模板文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部</title>
</head>
<body>
<h1>我被包含过来了</h1>
</body>
</html>

公共模板有了，现在编写一个welcome.html来使用公共模板页面，其代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
</head>
<body>
{# 使用公共模板 #}
{% include 'common/header.html' %}
<div >欢迎学习Flask框架</div>
</body>
</html>

好了，接下来编写视图函数，其代码如下所示：

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

运行结果如下图所示：

宏（macro）

宏（macro）可以看作为jinja2的一个函数，其返回是一个HTML字符串或者一个模板，为了避免反复地编写同样的模板代码，出现了代码冗余，可以把同样的模板代码写成函数并进行复用。

定义宏（macro）有两种方式：直接在模板中定义宏和把所有用写在一个宏模板文件中。

其语法格式如下：

#定义宏
{% macro 宏名(参数) %}
    代码块
{% endmacro %}

#导入宏
{% import '宏文件' as 别名 %}

#使用宏
{{ 别名.宏名(参数) }}

在模板中直接定义宏

首先我们创建一个名为macro1.html模板文件，其文件内容如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏的定义</title>
</head>
<body>
{# 定义宏 #}
{% macro input(value) %}
    <input type="submit" placeholder="{{ value }}">
{% endmacro %}

{# 调用宏 #}
{{ input('提交') }}
</body>
</html>

这里我们定义了一个名为input的宏，其作用是创建一个提交按钮，然后通过{{ input('参数') }}调用了宏。

编写视图函数，主要代码如下所示：

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

运行结果如下图所示：

把所有宏定义在一个宏文件中

首先我们创建一个macro.html宏文件，其内容如下所示：

{% macro input(value) %}
   <input type="text" placeholder="{{ value }}" name="username">
{% endmacro %}

然后创建一个模板文件来使用macro.html宏文件，其内容如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏的使用</title>
</head>
<body>
{% import 'macro.html' as f %}
{{   f.input('用户名') }}
</body>
</html>

这里我们通过import导入了宏文件，通过as给宏起了别名f，然后通过f.input()调用了宏的方法。

视图函数代码如下所示：

@app.route('/macro1')
def use_macro1():
    return render_template('macro2.html')

运行结果如下图所示：

好了，Flask框架——模板复用（继承、包含、宏）就讲到这里了，下篇文章继续学习Flask框架——蓝图、flask-script，感谢观看！！！
公众号：白巧克力LIN

Flask框架——模板复用（继承、包含、宏）

模板复用

继承（extends）

包含（include）

宏（macro）

在模板中直接定义宏

把所有宏定义在一个宏文件中

猜你喜欢

热点阅读