11、模板中的可复用代码块

单文件中的宏

模板文件

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>宏的定义和使用</title>
	</head>
	<body>
    {#宏的定义 #}
	  {% macro input(name, type='text', value= '') %}
      <input type="{{ type }}" name="{{ name }}" value="{{ value }}" />
		{% endmacro %}

    {#宏的使用#}
		<div style="color: #0000ff;">
			<p>用户名 :{{ input('username')}}</p>
			<p>密 码 :{{ input('password',type='password')}}</p>
			<p>登 录 :{{ input('submit',type='submit',value='登录')}}</p>
		</div>
	</body>
</html>

主程序文件

from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')
    
if __name__ == '__main__':
    app.run(debug=True)

多文件中的宏

定义宏文件 form.html

{# 定义宏,并且它包含默认值。还可以被多个文件导入 #}
{% macro input(name, type='text', value= '' ,size='20', placeholder='') %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}" size="{{ size }}" placeholder="{{ placeholder }}">
{% endmacro %}

定义模板文件 index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>宏的导入</title>
	</head>
	<body>
    {# 导入宏 #}
		{% from 'form.html' import input %}

    {# 使用宏 #}
		<div style="color: #0000ff">
			<p>用户名 :{{ input('username', placeholder='请输入用户名')}}</p>
			<p>密 码 :{{ input('password',type='password', placeholder='请输入密码')}}</p>
			<p>登 录 :{{ input('submit',type='submit',value='登录')}}</p>
		</div>
	</body>
</html>

定义主程序

from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')
    
if __name__ == '__main__':
    app.run()

include 导入模板

include 可以用来导入模板:

定义待导入的模板 header.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
	</head>
	<body>
		<div class="header">这是网页头部</div>
	</body>
</html>

定义待导入的模板 footer.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
	</head>
	<body>
		<div class="footer">这是网页尾部</div>
	</body>
</html>

定义主模板

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
		<style type="text/css">
			.header {
				width: 100%;
				height: 40px;
				margin: 20px 20px;
			}
			.footer {
				width: 100%;
				height: 40px;
				margin: 20px 20px;
			}
			.content {
				width: 100%;
				height: 40px;
				margin: 20px 20px;
			}
		</style>
	</head>
	<body>
		{% include "header.html" %}{# 导入模板 #}
		<div class="content">这是网页内容</div>
		{% include "footer.html" %}{# 导入模板 #}
	</body>
</html>

定义主程序

from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')
    
if __name__ == '__main__':
    app.run()

参考资料

https://weread.qq.com/web/reader/0a932660718ac6bc0a9702e

本文作者:tiansz

本文链接:https://www.cnblogs.com/tiansz/p/16326071.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   tiansz  阅读(25)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起