Jinja语法
变量
使用{{ name }}结构表示一个变量,是一个特殊的占位符,告诉模板引擎这个位置的值从渲染模板时使用的数据中获取
<p> hello {{ name }} </p>
<p> value from dicretory {{ dict['key'] }} </p>
<p> value from list hello {{ list[index] }} </p>
<p> value from obj's method {{ obj.method() }} </p>
<p> value {{ name|{filter_name} }} </p>
变量过滤器
过滤器名 | 说明 |
---|---|
safe | 渲染时不转义 |
capitalize | 首字母转换成大写,其余转换成小写 |
lower | 值转换成小写形式 |
upper | 值转换成大写形式 |
title | 值中每个单词首字母都转换成大写 |
trim | 去除首尾空格 |
striptags | 渲染前把值中所有html标签都删除 |
控制结构
条件判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User</title>
</head>
<body>
{% if name=="tao" %}
<h1 style="color:red">Hello, {{name}}</h1>
{% elif name=="tao2" %}
<h1 style="color:green">Hello, 2, {{name}}</h1>
{% else %}
<h1> Hello Stranger!</h1>
{% endif %}
</body>
</html>
for循环
<ul>
{% for item in items %}
<li> {{ item }} </li>
{% endfor %}
</ul>
宏macro
类似于python中的函数
macros.html
// 定义宏
{% macro render_item(item) %}
<li> {{ item }} </li>
{% endmacro %}
// 使用宏
<ul>
{% for item in items %}
{{ render_item(item) }}
{% endfor %}
</ul>
为了重复使用宏,把宏保存在单独文件中,在需要使用模板的时候导入
{% import "macros.html" as macros %}
<!--导入后使用-->
<ul>
{% for item in items %}
{{ macros.render_item(item) }}
{% endfor %}
</ul>
引入include
需要在多处重复使用的模板代码片段可单独写入一个文件,在需要的地方引入,避免重复。
整合重复使用的模板代码片段
template.html
<h1>hello world</h1>
index.html
在需要的地方使用引入代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1 style="color:red">Hello World!</h1>
{% include "template.html" %}
</body>
</html>
模板继承
另一种重复使用代码的方式是模板继承,类似于python代码的继承
定义一个基模板,基模板定义的区块(block)可在衍生模板中覆盖
<html>
<head>
{% block %}
<title>{% block title %} {% endblock %} 测试</title>
{% endblock %}
</head>
<body>
{% block body %}
<h1>base body</h1>
{% endblock %}
</body>
</html>
衍生模板
index.html
{% extends "base.html" %}
{% block title %} new {% endblock %}
<body>
{% block body %}
<div>index body</div>
{{ super() }}
{% endblock %}
</body>
使用 {% extends %} 命令来继承某个模板
衍生模板中,相同区块内容会覆盖基模板数据,若想使用基模板数据,使用 {{ super() }}
Flask-bootstrap
Bootstrap是Twitter开发的一个开源Web框架,它提供的用户界面组件可用于创建整洁且有吸引力的页面。
要想在应用中集成Bootstrap,可参照其文档针对模板进行改动,这个任务可使用Flask拓展完成。
安装与使用
- 安装: pip install flask-bootstrap
- 使用
- 初始化Flask-Bootstrap (hello.py),就可以在应用中使用一个包含Bootstrap的文件和一般结构的基模板 ```python from flask import Flask from flask_bootstrap import Bootstrap
app = Flask(name) bootstrap = Bootstrap(app)
- 模板修改
user.html
```html
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %} {% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
</div>
{% endblock %}
flask-bootstrap定义的区块
区块名 | 说明 |
---|---|
doc | 整个html文档 |
html_attribs | 标签的属性 |
html | 标签中的内容 |
head | 标签中的内容 |
title |