您的位置：首页 > Web前端

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

2017-08-31 15:29 330 查看
参考

基础

{{ }}
——访问变量或变量的属性

{# #}
——注释

{% 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 %}
© 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 %}


{% extends "base.html" %}
——这个模板将继承base.html.

在随后的内容中包含了很多跟base.html中相同的block，如title,content，这些block中的内容将会替换 base.html的内容后输出.

:extends模板名称
的写法依赖于此模板使用的模板加载器, 比如如果要使用FileSystemLoader,你可以在模板文件名中加入文件的文件夹名,如：
{% extends "layout/default.html" %}


在base.html中，我们定义了
{% block footer %}
,这个block在子模板中没有被重定义，那么Jinja会直接使用父模板中的内容输出。

同一个模板中不能定义名称相同的block。

如果你要在模板中多次打印同一个block，可以用self变量加上block的名字：

<title>{% block title %}{% endblock %}</title>
<h1>{{ self.title() }}</h1>
{% block body %}{% endblock %}


如果要在子模板中重写父模板的block中打印被重写的block的内容，调用supe
4000
r关键字。

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


变量

你可以传递python的变量给模板，用来替换模板中的标记。这些变量可以是任何Python对象。在模板中可以直接操作传入的变量对象，也可以 访问这些变量的属性。

访问变量属性有两种方式，一种是用”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>


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

VariableDescription
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 %}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  模板引擎 前端 jinja2
相关文章推荐
新的分享
章节导航