Jinja模版渲染

Jinja模版

在之前,使用了render_template()这个函数。然后去看了看,发现又要接触一块完全陌生的东西。。。Jinja模版。慢慢看好了。。
先附上官网介绍这玩意儿的地址

首先,官网给了一个最小模版。那就ctr c+v先拿来再说

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Webpage</title>
</head>
<body>
    <ul id="navigation">
    {% for item in navigation %}
        <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
    {% endfor %}
    </ul>

    <h1>My Webpage</h1>
    {{ a_variable }}

    {# a comment #}
</body>
</html>

在这里插入图片描述

运行先看看得到啥玩意儿。
在这里插入图片描述
就这?看着之前的html,有一个for循环,那应该会循环展示一些东西。
肯定是我没有传参数

<ul id="navigation">
{% for item in navigation %}
    <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>

从参数上来看,item.href, item.caption有点像字典。href和caption是里面的key值
那就传一个字典看看
在这里插入图片描述
然后就报错。。。。
在这里插入图片描述
在这里插入图片描述
看了看这个函数,好像我得传一个参数名字。
在这里插入图片描述
估摸着传一个navigation就行吧。试试。
在这里插入图片描述
在这里插入图片描述
emmm,真香。那这就可以弄一个列表,里面放多个字典,就实现了循环了。
在这里插入图片描述

从头开始学习

主要分为 变量,控制块,过滤器,模版复用进行学习

变量

变量使用{{xxx}},并且在render_template时传入
举个栗子🌰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
</head>
<body>
    <p>{{ name }}--{{ pawd }}--{{ age }}</p>
</body>
</html>

在这里插入图片描述
得到的结果中,没有传入age,所以展示的时候直接为空白
在这里插入图片描述
同理,也可传入列表,元组,字典以及他们的操作等
在这里插入图片描述

在这里插入图片描述
值得注意的是:
{{ list.0 }} == {{ list[0] }}
{{ dict.key }} == {{ dict.get(key) }}

控制块

一个语法除了变量,就是逻辑。jinjia也是。
{% if}
{% for}

for循环

{% for 变量 in 可迭代对象%}

{% endfor %}
在这里插入图片描述
在这里插入图片描述
每遍历一个人,就创建一个li展示
在这里插入图片描述

if判断

{% if 条件%}

{%else%}

{% endif% }
在这里插入图片描述
通过加入if判断,可以对不同的内容进行渲染
在这里插入图片描述

loop

在for 循环中,默认存在一个loop变量
loop.index 序号从1开始
loop.index 序号从0开始
loop.revindex 序号反转,最小为1
。。。。。
在这里插入图片描述

<table border="1" cellpadding="0" cellspacing="0" width="40%">
    {% for user in users %}
        <tr {% if loop.index % 2 == 0 %} bgcolor="#6495ed" {% endif %} >
            <td>{{ loop.index }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.address }}</td>
            <td>{{ user.phone }}</td>
        </tr>

    {% endfor %}
</table>

在这里插入图片描述

过滤器

{{ 变量|过滤器 }}
过滤器本质就是函数
正常python能用的自带函数,在模版中不一定能用,例如{{ len(变量)}}
在模版中需要使用 {{变量|len}}

常见过滤器:

safe 禁用转译
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器使用</title>
</head>
<body>
{{ msg }}
<hr>
{{ msg | safe }}
</body>
</html>
@app.route('/show2')
def show_msg():
    msg = '<h1> flask学习 </h1>'
    return render_template('show2.html', msg = msg)

在这里插入图片描述

关于字符串的过滤器使用:

  • capitalize 首字母大写
  • lower 和 upper 全部大小写
  • tittle 一句话中每个单词首字母大写
  • reverse 反转
  • format 格式化:{{ ‘%s is %s’ | format(‘john’,‘18’) }}
  • truncate 字符串截断
    在这里插入图片描述

关于常用的列表过滤器

{# 列表过滤器的使用 #}
{{ person|first }}<br>
{{ person|last }}<br>
{{ person|length }}<br>
{# {{ person|first }} 针对整形求和#}
{{ [1,5,2,4]|sum }}<br>
{{ [1,8,5,7,3]|sort }}<br>

在这里插入图片描述

字典过滤器

获取键,值,都获取

<p>
    {% for v in users.0.values() %}
        <p>{{ v }}</p>
    {% endfor %}<br>

    {% for v in users.0.keys() %}
        <p>{{ v }}</p>
    {% endfor %}<br>

    {% for v,k in users.0.items() %}
        <p>{{ v }}----{{ k }}</p>
    {% endfor %}<br>
</p>

在这里插入图片描述

自定义过滤器

1.通过flask对象中的add_template_fliter

1.定义函数,带参数和返回值
2.添加过滤器,app.add_template_filter(函数名, name)
3.在模版中使用{{ 变量|name }}

@app.route('/')
def index():
    msg = 'hello a,hello b,helloo!'
    return render_template('define_filter.html',msg=msg)

def replace_hello(value):
    print('------->', value)
    value = value.replace('hello', '')
    print('======>', value)
    return value.strip()

app.add_template_filter(replace_hello, 'replace_hello')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
</head>
<body>
{{ msg }}
<hr>
{{ msg|replace_hello }}
</body>
</html>

在这里插入图片描述

2. 通过装饰器完成

1.定义函数,带参数和返回值
2.通过装饰器完成,@app.template_filter(name)
3.在模版中使用{{ 变量|name }}

@app.template_filter('rev_list')
def reverse_list(li):
    temp_list = list(li)
    temp_list.reverse()
    return temp_list

@app.route('/')
def index():
    msg = 'hello a,hello b,helloo!'
    li = [1,3,5,7,9]
    return render_template('define_filter.html',msg=msg,li=li)
----------------------------------------------
define_filter.html

{{ li }}
<br>
{{ li|rev_list }}

在这里插入图片描述

模版复用

  • 模版继承 *重点
  • include

模版继承

使用的场景:

  • 多个模版具有相同的顶和底
  • 多个模版具有相同内容,只是某一部分值不一样
  • 多个模版完全相同

标签:
{% block %}

{ % endblock % }

1.定义父模版base.html
分析父模版中哪些是变化的,使用block进行预留位置(挖坑)
样式和脚本需要提前预留位置{% block myscript %} {% endblock %}
2.子模版继承父模版
{% extends '父模版名称.html' %}将夫模版继承
找到对应的block进行填充,每一个block都是有名字的

include

在A,B,C页面有共同部分,其他页面没有。使用include

1.先定义一个公共的模版部分 xxx.html
2.谁使用,就include
{% include 'common/head.html' %}

宏 macro

可以看成jinja2的一个函数,返回一个html字符串
目的:代码复用,避免代码冗余

1.在模版中直接定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏的使用</title>
</head>
<body>
{#定义宏#}
{% macro form(action,value='登录',method='POST') %}
<form action="{{ action }}" method="{{ method }}">
    <input type="text" placeholder="用户名" name="username">
    <br>
    <input type="password" placeholder="密码" name="password">
    <br>
    <input type="submit" value="{{ value }}">
</form>
{% endmacro %}
{#引用宏#}
{{ form('/') }}

</body>
</html>

2.将所有宏定义到一个html文件中
使用时再导入

{% import 'macro.html' as f %}
{{ f.form('/',value='xx',method='xx') }}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值