目录
什么叫模板继承呢模板页完整代码什么叫模板继承呢
在我的理解就是:在前端页面中肯定有很多页面中有很多相同的地方,比如页面顶部的导航栏,底部的页脚等部分,这时候如果每一个页面都重写一遍,会很麻烦,而且也没必要。
(资料图)
这时候就可以做一个模板,叫做父模板,里面放上相同的部分,不同的部分先使用其他东西占位,然后在不同的页面中,继承这个父模板,不同的部分填充不同的内容。
模板页
首先做一个模板页面,模板是这样子的:
上下都是不变的东西,中间的部分是不同的,不同的页面继承这个模板页,然后在中间填充不同的内容。
导航栏的两个超链接:
注意:这里的跳转路径是指定到某一个路由,不是某一个html页面。
相同部分的代码就是普通的html
代码,只有需要填充的区域代码写法不同:
首先是标题title,其他页面需要继承模板页,所以模板页的标题不能写死,而是需要动态变化的,所以需要先用一个block占位:
写法是这样的,title
标签中间的内容由一个block占着,这个block叫做title,名字可以随意,后面会根据名字选择block来填充。
{% block title %}{% endblock %}
然后是中间区域:
不同的部分 {% block body %} {% endblock %}
这里也有一个block
,叫做body。注意:每一个block都需要一个{% endblock %}
作为block的结束位置。
完整代码
{% block title %}{% endblock %} 不同的部分
{% block body %} {% endblock %}
继承模板的页面:index.html
现在新建一个页面:index.html
,它继承之前的模板页面:
由于是继承了父模板,所以首先要指定这个模板继承哪一个模板。{% extends "模板.html" %}
,表示继承叫做模板.html
的页面。然后分别指定不同的block中填充不同的内容。
{% extends "模板.html" %} {% block title %} 继承了模板页的 首页 {% endblock %} {% block body %}首页中的内容
{% endblock %}
这个页面对应的路由是/
,对应的视图函数是:
#根路径,渲染index.html页面 @app.route("/") def index(): return render_template("index.html")
继承模板的页面:about.html
首先about页面对应的路由时/about
,对应的视图函数:
#/about路径,渲染about.html页面 teams = ["小明","小红","小刚"] @app.route("/about") def about(): #以关键字参数的形式把teams传递到about.html页面中 return render_template("about.html",teams = teams)
这里我们传递一个列表过去,在about.html
页面中加载出来。
about.html
{% extends "模板.html" %} {% block title %} 继承模板页的 about页面 {% endblock %} {% block body %}about页面中的内容
我们的团队成员有: {% for name in teams %} #拿到传递的参数列表,遍历
对应的py文件:模板继承练习.py
from flask import Flask,render_template app = Flask(__name__,template_folder="../templates") #根路径,渲染index.html页面 @app.route("/") def index(): return render_template("index.html") #/about路径,渲染about.html页面 teams = ["小明","小红","小刚"] @app.route("/about") def about(): return render_template("about.html",teams = teams) if __name__ == "__main__": app.run()
执行效果如下:
到此这篇关于Flask模板继承深入理解与应用的文章就介绍到这了,更多相关Flask模板继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
X 关闭
X 关闭
- 15G资费不大降!三大运营商谁提供的5G网速最快?中国信通院给出答案
- 2联想拯救者Y70发布最新预告:售价2970元起 迄今最便宜的骁龙8+旗舰
- 3亚马逊开始大规模推广掌纹支付技术 顾客可使用“挥手付”结账
- 4现代和起亚上半年出口20万辆新能源汽车同比增长30.6%
- 5如何让居民5分钟使用到各种设施?沙特“线性城市”来了
- 6AMD实现连续8个季度的增长 季度营收首次突破60亿美元利润更是翻倍
- 7转转集团发布2022年二季度手机行情报告:二手市场“飘香”
- 8充电宝100Wh等于多少毫安?铁路旅客禁止、限制携带和托运物品目录
- 9好消息!京东与腾讯续签三年战略合作协议 加强技术创新与供应链服务
- 10名创优品拟通过香港IPO全球发售4100万股 全球发售所得款项有什么用处?