Jinja2模板与模板继承
发布日期:2021-11-02 02:26:46 浏览次数:17 分类:技术文章

本文共 2856 字,大约阅读时间需要 9 分钟。

Jinja2

两个概念:

  • Jinja2:是 Python 下一个被广泛应用的模板引擎,是由Python实现的模板语言,他的设计思想来源于 Django 的模板引擎,并扩展了其语法和一系列强大的功能,其是Flask内置的模板语言。
  • 模板语言:是一种被设计来自动生成文档的简单文本格式,在模板语言中,一般都会把一些变量传给模板,替换模板的特定位置上预先定义好的占位变量名。

渲染模版函数

  • Flask提供的 render_template 函数封装了该模板引擎
  • render_template 函数的第一个参数是模板的文件名,后面的参数都是键值对,表示模板中变量对应的真实值。

使用

  • {
    {}} 来表示变量名,这种 {
    {}} 语法叫做变量代码块

{
{ post.title }}

Jinja2 模版中的变量代码块可以是任意 Python 类型或者对象,只要它能够被 Python 的 str() 方法转换为一个字符串就可以,比如,可以通过下面的方式显示一个字典或者列表中的某个元素:

{
{
your_dict['key']}}{
{
your_list[0]}}

模板变量

  • 代码中传入字符串,列表,字典到模板中
@app.route('/')def index():    # 往模板中传入的数据    my_str = 'Hello word'    my_int = 10    my_array = [3, 4, 2, 1, 7, 9]    my_dict = {
'name': 'xiaoming', 'age': 18 } return render_template('temp_demo1.html', my_str=my_str, my_int=my_int, my_array=my_array, my_dict=my_dict )
  • 模板中代码
    
Title我的模板html内容
{
{ my_str }}
{
{ my_int }}
{
{ my_array }}
{
{ my_dict }}

过滤器

过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用 Python 中的某些方法,那么这就用到了过滤器。

使用方式:

  • 过滤器的使用方式为:变量名 | 过滤器。
{
{
variable | filter_name(*args)}}
  • 如果没有任何参数传给过滤器,则可以把括号省略掉
{
{
variable | filter_name}}

链式调用

在 jinja2 中,过滤器是可以支持链式调用的,示例如下:

{
{
"hello world" | reverse | upper }}

过滤器列表操作

  • first:取第一个元素

{

{
[1,2,3,4,5,6] | first }}

  • last:取最后一个元素

{

{
[1,2,3,4,5,6] | last }}

  • length:获取列表长度

{

{
[1,2,3,4,5,6] | length }}

  • sum:列表求和

{

{
[1,2,3,4,5,6] | sum }}

  • sort:列表排序

{

{ [6,2,3,1,5,4] | sort }}

自定义过滤器

过滤器的本质是函数。当模板内置的过滤器不能满足需求,可以自定义过滤器。自定义过滤器有两种实现方式:

  • 一种是通过Flask应用对象的 add_template_filter 方法
  • 通过装饰器来实现自定义过滤器

重要:自定义的过滤器名称如果和内置的过滤器重名,会覆盖内置的过滤器。

需求:添加列表反转的过滤器

方式一

通过调用应用程序实例的 add_template_filter 方法实现自定义过滤器。该方法第一个参数是函数名,第二个参数是自定义的过滤器名称:

def do_listreverse(li):    # 通过原列表创建一个新列表    temp_li = list(li)    # 将新列表进行返转    temp_li.reverse()    return temp_liapp.add_template_filter(do_listreverse,'lireverse')

方式二

用装饰器来实现自定义过滤器。装饰器传入的参数是自定义的过滤器名称。

@app.template_filter('lireverse')def do_listreverse(li):    # 通过原列表创建一个新列表    temp_li = list(li)    # 将新列表进行返转    temp_li.reverse()    return temp_li

模板继承

模板继承是为了重用模板中的公共内容。一般Web开发中,继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中,子模板直接继承,而不需要重复书写。

  • 继承关键字
{
% extends '父模板名' %}
  • 标签定义的内容
{
% block 块变量名称 %} {
% endblock %}
  • 相当于在父模板中挖个坑,当子模板继承父模板时,可以进行填充。
  • 子模板使用 extends 指令声明这个模板继承自哪个模板
  • 父模板中定义的块在子模板中被重新定义,在子模板中调用父模板的内容可以使用super()

父模板

  • base.html
{
% block top %} 顶部菜单{
% endblock top %}{
% block content %}{
% endblock content %}{
% block bottom %} 底部{
% endblock bottom %}

子模板

  • extends指令声明这个模板继承自哪
{
% extends 'base.html' %}{
% block content %} 需要填充的内容{
% endblock content %}
  • 模板继承使用时注意点:
    • 不支持多继承
    • 为了便于阅读,在子模板中使用extends时,尽量写在模板的第一行。
    • 不能在一个模板文件中定义多个相同名字的block标签。
    • 当在页面中使用多个block标签时,建议给结束标签起个名字,当多个block嵌套时,阅读性更好。

转载地址:https://blog.csdn.net/weixin_43250623/article/details/90702959 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:ORM
下一篇:Flask 正则路由匹配——转换器

发表评论

最新留言

表示我来过!
[***.240.166.169]2024年04月03日 09时48分08秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

Vue计算属性之基本使用---vue工作笔记0004 2019-04-26
Vue监视---vue工作笔记0005 2019-04-26
Vue条件渲染---vue工作笔记0008 2019-04-26
Vue事件处理_vue的事件处理超级方便_功能强大---vue工作笔记0011 2019-04-26
Vue表单数据自动收集---vue工作笔记0012 2019-04-26
Vue生命周期---vue工作笔记0013 2019-04-26
ES6-ES11新特性_ECMAScript_简单介绍---JavaScript_ECMAScript工作笔记001 2019-04-26
ES6-ES11新特性_ECMAScript相关名词介绍_---JavaScript_ECMAScript工作笔记002 2019-04-26
ES6新特性_let变量声明以及声明特性---JavaScript_ECMAScript_ES6-ES11新特性工作笔记003 2019-04-26
Sharding-Sphere,Sharding-JDBC_介绍_Sharding-Sphere,Sharding-JDBC分布式_分库分表工作笔记001 2019-04-26
Sharding-Sphere,Sharding-JDBC_分库分表介绍_Sharding-Sphere,Sharding-JDBC分布式_分库分表工作笔记002 2019-04-26
C++_类和对象_对象特性_构造函数的分类以及调用---C++语言工作笔记041 2019-04-26
C++_类和对象_对象特性_拷贝构造函数调用时机---C++语言工作笔记042 2019-04-26
C++_类和对象_对象特性_构造函数调用规则---C++语言工作笔记043 2019-04-26
C++_类和对象_对象特性_深拷贝与浅拷贝---C++语言工作笔记044 2019-04-26
AndroidStudio_java.util.ConcurrentModificationException---Android原生开发工作笔记237 2019-04-26
AndroidStudio_android中实现对properties文件的读写操作_不把properties文件放在assets文件夹中_支持读写---Android原生开发工作笔记238 2019-04-26
弹框没反应使用Looper解决_the caller should invoke Looper.prepare() and Looper.loop()---Android原生开发工作笔记239 2019-04-26
Command line is too long. Shorten command line for Application---微服务升级_SpringCloud Alibaba工作笔记0067 2019-04-26
AndroidStudio_android实现双击_3击_监听实现---Android原生开发工作笔记240 2019-04-26