Python Flask 简明教程(8)--模板之继承

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的实现可以说足够简单了。


上手简单,易用,强烈推荐!

上一篇:好程序员web前端教程分享js模板模式


下一篇:Asp.net MVC 示例项目"Suteki.Shop"分析之---数据验证