在上篇文章中，我们学习了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
网友评论