一个系统网站往往需要统一的结构,这样看起来比较“整洁”。
比如说,一个页面中都有标题、内容显示、底部等几个部分。如果在每一个网页中都进行这几部分的编写,那么这个网站将会有很多冗余部分,浪费时间还不美观,机智的程序员是不会这么干的。
那有没有什么办法呢?当然有。这时可以采用模板继承,即将相同的部分提取出来,形成一个base.html,具有这些相同部分的网页通过继承base.html来得到对应的模块。
一、继承语法
模板的继承语法如下:
{% extends “模板名称” %}
(学过Java的小伙伴是不是觉得很熟悉?!)
二、块的概念
模板继承包括基本模板和子模板。
基本模板里包含了网站里基本元素的基本骨架,但里面有一些空的或不完善的块(block)需要用子模板来填充。
在父模块中:
...
{% block block的名称 %}
{% endblock %}
...
在子模块中:
...
{% block block的名称 %}
子模板中的代码
{% endblock %}
...
接下来,在templates目录中创建index.html、base.html和product.html 3个文件。
base.html作为基类(父模块),index.html和product.html文件作为子类(子模块),子类去继承基类的基本内容。
base.html文件内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} -我的网站</title>
</head>
<body>
{% block body %}
这是基类(base.html)中的内容
{% endblock %}
</body>
</html>
index.html文件内容如下:
{% extends "base.html" %}
{% block title %}网站首页{% endblock %}
{% block body %}
{{ super() }}
<h4>这是网站首页(index.html)的内容!</h4>
{% endblock %}
product.html文件内容如下:
{% extends "base.html" %}
{% block title %}产品列表页{% endblock %}
{% block body %}
<h4>这是产品列表页(product.html)的内容!</h4>
获取网页标题内容:<h4>{{ self.title() }}</h4>
{% endblock %}
extends.py文件内容如下:
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/product')
def product():
return render_template('product.html')
if __name__ == "__main__":
app.run(debug=True)
运行后我们可以看到网站首页是这样的:
再切换路径到产品页:
默认情况下,子模块如果实现了父模板定义的block,那么子模板block中的代码就会覆盖父模板中的代码。例如,子模块中的{% block title %}重新定义标签名称后,与基类中的“-我的网站”组合成新的网页名称。
如果想要在子模块中仍然保持父模块中的代码,那么可以使用{{ supper() }}来实现,如index.html中{% block body %}代码块中使用{{ supper() }}方法,将基类中的内容“这是基类(base.html)中的内容”继承到了子模块中;
同时,也不影响子模块中添加新内容。
(这里和python中类的super方法相同,指定父类)
如果想要在一个block中调用其他block中的代码,可以通过{{ self.其他block名称() }}实现。比如product.html文件中的{{ self.title() }}方法,调取了同文件中的title属性。
模板的继承还可以这么理解:就是在一个html文档中事先写好框架,然后要往里面放东西时,先用{% block blockname %}{% endblock %}放一个空的块在里面作为基础模块,接下来被别的子模块导入的时候,用子模块里相同名称的模块替代。
对于相同的内容来说就不需要重复写,大大节省了时间。是不是很溜?!?!