欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端需要知道的jinja2模板引擎知识

程序员文章站 2022-06-17 15:07:53
...

参考

基础

{{ }}——访问变量或变量的属性
{# #}——注释
{% include 'footer.html' %} ——导入另外一个模板到当前模板中
{% import 'forms.html' as forms %} ——导入模板,与上面的有部分不同
{% extends "base.html"%}——继承模板
{{url_for("static",filename="....")}}——访问static文件夹中的文件

模板继承

创建一个包含有所有公共元素的页面基本骨架,在子模板中可以重用这些公用的元素。

基础模板

//我们首先写一个名为"base.html"的模板,它包含下面的内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    {% block head %} 
    <link rel="stylesheet" href="style.css" /> 
    <title>{% block title %}{% endblock %} - My Webpage</title> 
    {% endblock %} 
</head> 
<body> 
    <div id="content">{% block content %}{% endblock %}</div> 
    <div id="footer"> 
        {% block footer %} 
        &copy; Copyright 2008 by <a href="http://domain.invalid/">you</a>. 
        {% endblock %} 
    </div> 
</body> 

在这个模板中有很多’block’, 这些block中间的内容,我们将会在子模板中用其它内容替换。

子模板

//我们再写一个名为"child.html"的模板,内容如下:
{% extends "base.html" %} 
{% block title %}Index{% endblock %} 
{% block head %} 
    {{ super() }} 
    <style type="text/css"> 
        .important { color: #336699; } 
    </style> 
{% endblock %} 
{% block content %} 
    <h1>Index</h1> 
    <p class="important"> 
      Welcome on my awsome homepage. 
    </p> 
{% endblock %} 
  1. {% extends "base.html" %}——这个模板将继承base.html.
    在随后的内容中包含了很多跟base.html中相同的block,如title,content,这些block中的内容将会替换 base.html的内容后输出.
  2. :extends模板名称的写法依赖于此模板使用的模板加载器, 比如如果要使用FileSystemLoader,你可以在模板文件名中加入文件的文件夹名,如:{% extends "layout/default.html" %}
  3. 在base.html中,我们定义了{% block footer %},这个block在子模板中没有被重定义,那么Jinja会直接使用父模板中的内容输出。
  4. 同一个模板中不能定义名称相同的block。
  5. 如果你要在模板中多次打印同一个block,可以用self变量加上block的名字:

    <title>{% block title %}{% endblock %}</title> 
    <h1>{{ self.title() }}</h1> 
    {% block body %}{% endblock %} 
  6. 如果要在子模板中重写父模板的block中打印被重写的block的内容,调用super关键字。

    {% block sidebar %} 
       <h3>Table Of Contents</h3> 
       ... 
      {{ super() }} 
    {% endblock %} 

变量

  1. 你可以传递python的变量给模板,用来替换模板中的标记。这些变量可以是任何Python对象。在模板中可以直接操作传入的变量对象,也可以 访问这些变量的属性。
  2. 访问变量属性有两种方式,一种是用”obj.attr”的方式,另一种是类似字典的方式:”obj[‘attr’]”.

     {{ foo.bar }} 
     {{ foo['bar'] }} 

    注意,上面的{{ .. }}是Jinja的用来打印变量标记。如果要在其它标签中访问变量,则不能在变量名旁边加花括号。

结构控制标记

Jinja中的控制标记包括:条件判断标记(if/elif/else),循环控制(for-loop),另外还有macro(宏)和上文中提到 的block。

for

//for 循环打印一个序列,例如: 
<h1>Members</h1> 
<ul> 
{% for user in users %} 
  <li>{{ user.username|e }}</li> 
{% endfor %} 
</ul> 

在循环内部,你可以访问一些特殊的变量

Variable Description
loop.index 当前迭代的索引,从1开始算
loop.index0 当前迭代的索引,从0开始算
loop.revindex 相对于序列末尾的索引,从1开始算
loop.revindex0 相对于序列末尾的索引,从0开始算
loop.first 相当于 loop.index == 1
loop.last 相当于 loop.index == len(seq) - 1
loop.length 序列的长度
loop.cycle 是一个帮助性质的函数,可以接受两个字符串参数,如果当前循环索引是偶数,则显示第一个字符串,是奇数则显示第二个字符串。它常被在表格中用来用不同的背景色区分相邻的行
//loop.cycle:
{% for row in rows %} 
    <li class="{{ loop.cycle('odd', 'even') }}">{{ row }}</li> 
{% endfor %} 

需要注意的是,Jinja的循环不支持break和continue标记。你可以对需要迭代的sequence使用过滤器来达到与break和 continue相同的目的。

//下面的例子中,如果user.hidden属性为true的则continue 
{% for user in users if not user.hidden %} 
   <li>{{ user.username|e }}</li> 
{% endfor %} 

Jinja的for语句有一个和python相同的用法,那就是“else’:当无循环时显示else中的内容,如下例:

<ul> 
{% for user in users %} 
  <li>{{ user.username|e }}</li> 
{% else %} 
   <li><em>no users found</em></li> 
{% endif %} 
</ul> 

if

if语句用来在Jinja中做比较判断,比较常见的用法是判断一个变量是否已定义,是否非空,是否为true

{% if users %} 
<ul> 
{% for user in users %} 
   <li>{{ user.username|e }}</li> 
{% endfor %} 
</ul> 
{% endif %}