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 |
若有收获，就点个赞吧
0 人点赞
