1. 前言
静态网页的内容是静态的,所以如果有像导航栏这种每个页面都需要的固定内容,也还是不得不在每个页面编写一遍。
这除了会导致代码非常臃肿,还会让修改变得很繁琐,如果想修改导航中的一个链接,也不得不修改所有包含导航的页面。
使用动态网页技术中的模板,可以轻松的解决这个问题,FLask的模板继承在解决这个问题上更是非常的简洁。
2. 创建项目
首先创建flask-temp文件夹,用于演示模板继承功能。
在flask-temp下建立templates文件,用于存放网页,flask会自动识别该目录下的网页及网页模板。
3. 创建基模板
基模板页面用于提取网页中的公共部分,并设定好预留的自定义内容的位置。我们在templates目录下新建base.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--预留插入标题位置-->
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
<!--导航,内容固定-->
<ul>
<li>
<a href="#">首页</a>
<a href="#">新闻中心</a>
<a href="#">产品中心</a>
<a href="#">联系我们</a>
</li>
</ul>
<!--预留插入网页内容部分-->
{% block content %}
{% endblock %}
</body>
</html>
解释下,除了{%%}包裹的部分,都是固定的内容;而{%%}包裹的部分,是预留的插入位置,也就是说其他页面继承了基模板页面后,会继承固定内容,只需要完善预留的插入位置即可。
4. 继承模板
接下来,我们可以开发一个新闻中心页面news.html,通过继承base.html来自动生成固定部分,我们仅仅需要在news.html中完善预留插入位置的内容。
{% extends 'base.html' %}
<!--插入到block title位置-->
{% block title %}
新闻中心
{% endblock %}
<!--插入到block content-->
{% block content %}
<h1>新闻中心</h1>
<p>
这里是新闻中心页面
</p>
{% endblock %}
5. 开发app.py
在flask-demo文件夹下新建app.py,并编写代码如下:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/news')
def news():
return render_template('news.html')
if __name__ == '__main__':
app.run(debug=True)
所以当项目启动后,访问/news路径,即可访问到news.html网页,而该网页继承了base.html,所以python即可根据模板继承的规则渲染news.html然后返回给浏览器。
浏览`http://127.0.0.1:5000/news’,效果如下,可见固定部分已经继承成功!
6. 小结
在JSP、ASP.NET中,均有相关的模板继承复用的机制,但是Flask的实现可以说足够简单了。
上手简单,易用,强烈推荐!