Jinja2引擎模板(二)
宏的定义以及使用
Jinja2中的宏功能有些类似于传统语言中的函数,他跟python中的函数类似,可以传递参数,但是它不能有返回值。
宏有调用和声明俩个部分
声明一个宏
{% macro input(name,type='text',value='') %}
<input type='{{ type }}'name="{{ name }}" value="{{ value }}">
{"%- endmacro%"}
调用一个人宏
{{input('username')}}
{{input('password',type='password')}}
index.html
<!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"></div>
<p>用户名:{{ input('uername') }}</p>
<p>密码:{{ input('passsword',type='password') }}</p>
<p>登录:{{ input('submit',type='submit',value='登录') }}
</p>
</body>
</html>
app.py
# encoding:utf-8
from flask import Flask # 导入flask框架模板
from flask import render_template
app = Flask(__name__) # flask实例化
@app.route('/') # 定义路由
def index(): # 定义试图函数
return render_template('index.html')
if __name__ == '__main__': # 运行
app.run(debug=True)
注意:根据实际情况,还可以在宏的定义中加入size和placeholder等属性
宏的导入
{% import 'from html' as from %}
<div style="color:#0000FF"></div>
<p>用户名:{{ input('uername') }}</p>
<p>密码:{{ input('passsword',type='password') }}</p>
<p>登录:{{ input('submit',type='submit',value='登录') }}
</p>
from.html
{% macro input(name,type='text',value='') -%}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{%- endmacro %}
app.py
from flask import Flask # 导入flask框架模板
from flask import render_template
app = Flask(__name__) # flask实例化
@app.route('/') # 定义路由
def index(): # 定义试图函数
return render_template('index.html')
if __name__ == '__main__': # 运行
app.run(debug=True)
注意:{% import 'from.html' as from'%}这种方法导入也可以,也可以使用{% form 'from.html import input'%}实现导入
**include的使用**
在宏文件中引用其他文件宏,可以使用include语句。include语句可以把一个模板引入到另一个模板之中,类似于把一个人模板的代码复制到另一个人模板的指定位置。
<body>{% include "header.html"%}
<div class="content">
网页的内容
{%include "footer.html"%}
</body>
#这里是把头部文件header和尾部文件footer引入到文件中
set和with语句的使用
set 与with可以在Jinja中定义变量并且赋值,set定义在整个模板中的变量内都有效。with关键字在定义并且变量赋值的同时,限制了with定义变量的作用范围。
set关键字的用法
1.给变量赋值
{% set telephone='1333333333' %}
2.给列表或者数组赋值
{% set nav=[('index.html',index),('product.html'),('product')]%}
可以在模板中使用{{telephone}}和{{nav}}来应用这些变量
with定义的变量的作用的范围{% with%}和{%endwith%}代码块内,在模板的其他的地方无效
静态文件的加载
1.加载js文件
在静态文件index.html中在之前引入jquery.js文件
<script src="{{url_for('static',filename='js/jquery-3.3/jquery-3.3.1')}}"></script>
#这里使用的是url函数的实现
2.加载图片文件
<img scr='{{ url_for("static",filename='image/car/jpg')}}'><img>
3.加载css文件
加载外部css文件
<link rel="styleheet"href="{{url_for('static',filename='css/car.css')}}">
模板的继承
一个网站往往需要一个统一的结构,这样看起来比较整洁。
1.模板继承的语法
{% extend "模板名称"%}
模板继承包含基本模板和字模板,其中基本模板里包含网站的基本元素和基本骨架,但是有一些空的或者不完善的块需要子模块来填充。
在父模板中
{%block block的名称%}
{%endblock%}
在字模板中
{%block block的名称%}
{%endblock%}
子模板中的代码在默认的情况下,子模板如果实现父模板定义block,那么子模板block覆盖父模板中的代码。如果想要在子模板中任然保持父模板的代码那么使用{{super()}}来实现。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!