首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

python模板入门教程之flask Jinja

Posted in Python onApril 11, 2022

Flask 和 Django 附带了强大的 Jinja 模板语言。

对于之前没有接触过模板语言的人来说，这类语言基本上就是包含一些变量，当准备渲染呈现 HTML 时，它们会被实际的值替换。

这些变量放在标记或分隔符之前。例如：Jinja 模板使用 {% ... %} 表示循环，{{ ... }} 表示一个表达式运算结果返回。

Jinja 模板其实是 html 文件。一般情况下放在 Flask 工程的 /templates 目录下

1、快速体验

跑下面的各种 demo 之前，确保你已经安装了 Jinja (pip install jinja2)

>>> from jinja2 import Template
>>> t = Template("Hello {{ something }}!")
>>> t.render(something="World")
u'Hello World!'

>>> t = Template("My favorite numbers: {% for n in range(1,10) %}{{n}} " "{% endfor %}")
>>> t.render()
u'My favorite numbers: 1 2 3 4 5 6 7 8 9 '

这个 demo 展示了模板中的变量（表达式）是如何最终被替换和渲染的。

2、Flask 最小 DEMO

整个的参考代码可以在这里获得：HERE

不过博主建议按照下面步骤一步步来：

1）安装 flask

➜  pip install flask

2）创建工程目录结构：

➜  mkdir flask_example
➜  cd flask_example 
➜  mkdir templates
➜  cd ..
➜  touch run.py
➜  touch requirements.txt

3）编写 run.py

from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def template_test():
    return render_template('template.html', my_string="Wheeeee!", my_list=[0,1,2,3,4,5])
if __name__ == '__main__':
    app.run(debug=True)

这里，我们创建了一个 / 路由，当我们访问服务器根路由时，会通过 render_template 将 template.html 渲染，其中 my_string 和 my_list 就是准备传给模板的实际的值。

4）编写 template.html 模板

在 templates 目录下，创建一个 template.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Flask Template Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style type="text/css">
      .container {
        max-width: 500px;
        padding-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>My string: {{my_string}}</p>
      <p>Value from the list: {{my_list[3]}}</p>
      <p>Loop through the list:</p>
      <ul>
        {% for n in my_list %}
        <li>{{n}}</li>
        {% endfor %}
      </ul>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

5）运行观察效果

➜  python run.py

效果如下：

python模板入门教程之flask Jinja

可以看到，将模板中的 my_string、my_list[3] 替换掉了，并且用 for 循环语句，生成了一个 list。

3、模板继承

模板通常利用继承，继承包括定义所有后续子模板基本结构的单个基础模板。您可以使用标记 {% extends %} 和 {% block %} 来实现继承。

这样做的用例很简单：随着应用程序的增长，以及您继续添加新模板，您将需要保持公共代码（如HTML导航栏、Javascript库、CSS样式表等）同步，这可能需要大量工作。使用继承，我们可以将这些公共部分移动到父/基模板，这样我们就可以创建或编辑这样的代码一次，所有子模板都将继承该代码。

注意：您应该总是尽可能多地向基本模板添加重复代码，以节省将来的时间，这将远远超过初始时间投资。

让我们给我们的 DEMO 增加模板：

1）创建基础模板（保存为 layout.html）

<!DOCTYPE html>
<html>
  <head>
    <title>Flask Template Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style type="text/css">
      .container {
        max-width: 500px;
        padding-top: 100px;
      }
      h2 {color: red;}
    </style>
  </head>
  <body>
    <div class="container">
      <h2>This is part of my base template</h2>
      <br>
      {% block content %}{% endblock %}
      <br>
      <h2>This is part of my base template</h2>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

你注意到 {%block%} 标记了吗？这定义了子模板可以填充的块或区域。此外，也可实现覆盖的作用。

2）用模板更新 template.html：

{% extends "layout.html" %}
{% block content %}
  <h3> This is the start of my child template</h3>
  <br>
  <p>My string: {{my_string}}</p>
  <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul>
    {% for n in my_list %}
    <li>{{n}}</li>
    {% endfor %}
  </ul>
  <h3> This is the end of my child template</h3>
{% endblock %}

这样 layout.html 模板中的 content 块就会被 template.html 中的新定义给替换掉，最终效果如下：

python模板入门教程之flask Jinja

那么，我们就可以通过修改 layout.html 给其添加通用导航栏了：（将下列代码插入到 layout.html 的 <body> 标签之后）

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="/">Jinja!</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

现在，从基础扩展的每个子模板都将具有相同的导航栏。借用Java哲学的一句话："Write once, use anywhere."

python模板入门教程之flask Jinja

4、Super Blocks

如果需要从基础模板渲染块，使用 super block：

{{ super() }}

给基础模板增加一个页脚：

<body>
<div class="container">
 ...
  <h2>This is part of my base template</h2>
  <br>
  <div class="footer">
    {% block footer %}
      Watch! This will be added to my base and child templates using the super powerful super block!
      <br>
      <br>
      <br>
    {% endblock %}
  </div>
</div>
...

此时，我们可以给 template.html 增加 super block，从而实现子模板复用父模板中的块：

{% extends "layout.html" %}
{% block content %}
  <h3> This is the start of my child template</h3>
  <br>
  <p>My string: {{my_string}}</p>
  <p>Value from the list: {{my_list[3]}}</p>
  <p>Loop through the list:</p>
  <ul>
    {% for n in my_list %}
    <li>{{n}}</li>
    {% endfor %}
  </ul>
  <h3> This is the end of my child template</h3>
  {% block footer %}
  {{super()}}
  {% endblock %}
{% endblock %}

效果如下：

python模板入门教程之flask Jinja

super block 用于模块共享父模块的 block，当然还有一些高级玩法，比如下面的例子：

父模板：

{% block heading %}
  <h1>{% block page %}{% endblock %} - Flask Super Example</h1>
{% endblock %}

子模板：

{% block page %}Home{% endblock %}
{% block heading %}
  {{ super() }}
{% endblock %}

这样当访问子模块时，会拼接一个 <h1>Home - Flask Super Example</h1> 字段。发现没，我们通过这样的方法，实现了标题的继承（有一定的继承，也有一定的子模块自己的信息）。

回归正轨，对于更新标题，我们这里这样设计（修改 template.html 中的两行代码）

{% block title %}{{title}}{% endblock %}
...
{% block page %}{{title}}{% endblock %}

这样我们可以通过 python 进来直接修改标题了（修改 run.py）:

@app.route("/")
def template_test():
    return render_template(
        'template.html', my_string="Wheeeee!", 
        my_list=[0,1,2,3,4,5], title="Home")

5、Macros

在 Jinja 中，我们可以使用宏来抽象常用的代码段，这些代码段被反复使用以避免重复。例如，通常会在导航栏上突出显示当前页面的链接（活动链接）。否则，我们必须使用 if/elif/else 语句来确定活动链接。使用宏，我们可以将这些代码抽象成一个单独的文件。

新增一个 macros.html 文件：

{% macro nav_link(endpoint, name) %}
{% if request.endpoint.endswith(endpoint) %}
  <li class="active"><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
{% else %}
  <li><a href="{{ url_for(endpoint) }}">{{name}}</a></li>
{% endif %}
{% endmacro %}

这里，我们使用了 Flask 的 request object（Jinja 的默认一部分），用来检查请求端点，然后将活动 class 分配给该端点。

使用基础模板中的nav navbar nav类更新无序列表：

<ul class="nav navbar-nav">
  {{ nav_link('home', 'Home') }}
  {{ nav_link('about', 'About') }}
  {{ nav_link('contact', 'Contact Us') }}
</ul>

此外，请确保在模板顶部添加导入：{% from "macros.html" import nav_link with context %}

最后，让我们向控制器添加三个新端点：

@app.route("/home")
def home():
    return render_template(
        'template.html', my_string="Wheeeee!", 
        my_list=[0,1,2,3,4,5], title="Home")

@app.route("/about")
def about():
    return render_template(
        'template.html', my_string="Wheeeee!", 
        my_list=[0,1,2,3,4,5], title="About")

@app.route("/contact")
def contact():
    return render_template(
        'template.html', my_string="Wheeeee!", 
        my_list=[0,1,2,3,4,5], title="Contact Us")

刷新页面。测试顶部的链接。当前页面是否突出显示？(每次点击 Home, About, Contact Us，浏览器会自动跳转到对应的 url，并加载页面)

6、自定义过滤器

Jinja 使用过滤器修改变量，主要用于格式化目的。

这有个例子；

{{ num | round }}

这将使 num 变量四舍五入。因此，如果我们将参数 num=46.99 传递到模板中，那么将输出47.0。(把大括号中的语句当做 shell，就明白了，竖线是传递作用，round是个过滤器，这里是所有的过滤器)

再来个例子：

{{ list|join(', ') }}

可以给 list 数组中的变量加个逗号。

其实，除了自带的过滤器，我们也可以自定义：

1）在 run.py 的所有函数前增加 app = Flask(__name__) 用于创建一个 app
2）增加一个 datetimefilter 函数，并将其注册到 app 的过滤器

@app.template_filter() # 声明，这是个过滤器
def datetimefilter(value, format='%Y/%m/%d %H:%M'):
    """Convert a datetime to a different format."""
    return value.strftime(format)

app.jinja_env.filters['datetimefilter'] = datetimefilter

3）这样，我们在子模板中插入如下代码：

<h4>Current date/time: {{ current_time | datetimefilter }}</h4>

4）最后，只要在 python 中将时间传入模板即可：

current_time = datetime.datetime.now()

5）效果如下：

python模板入门教程之flask Jinja

7、结论

这样，就送大家快速入门了 Jinja，源码：https://github.com/mjhea0/thinkful-mentor/tree/master/python/jinja/flask_example

参考链接

[1]. 本文源码
[2]. Primer on Jinja Templating（本文翻译并参考这篇）
[3]. Flask 官方文档
[4]. 真正搞明白Python中Django和Flask框架的区别
[5]. Flask 主页
[6]. 一个 Soft UI Dashboard - Free Jinja Template
[7]. Appseed 这个网站有很多 Flask 模板
[8]. Nginx 服务器 SSL 证书安装部署
[9]. python django web 开发 —— 15分钟送到会用（只能送你到这了）

python模板入门教程之flask Jinja

- Author -

beautifulzzzz

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python正则表达式re模块详细介绍
May 29 Python
简洁的十分钟Python入门教程
Apr 03 Python
利用Python开发微信支付的注意事项
Aug 19 Python
matplotlib绘图实例演示标记路径
Jan 23 Python
对python操作kafka写入json数据的简单demo分享
Dec 27 Python
python快排算法详解
Mar 04 Python
Python 计算任意两向量之间的夹角方法
Jul 05 Python
pytorch 自定义数据集加载方法
Aug 18 Python
对Django的restful用法详解(自带的增删改查)
Aug 28 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
Jan 25 Python
JupyterNotebook 输出窗口的显示效果调整方法
Apr 13 Python
python双向链表实例详解
May 25 Python
使用Python解决图表与画布的间距问题
Python的property属性详细讲解
Apr 11 #Python
OpenCV项目实践之停车场车位实时检测
Python进程池与进程锁之语法学习
Python进程间的通信之语法学习
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
浅析Python OpenCV三种滤镜效果
Vue(10) Vue3(1) Set接口(1) OutputStream(1) HashSet集合(1) Storage(1) axios(1) InputStream(1) persistedstate(1) vuex(1)
You might like
无限级别菜单的实现
2006/10/09 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Python API 自动化实战详解(纯代码)
2019/06/11 Python
OpenCV 模板匹配
2019/07/10 Python
python实现图片九宫格分割
2021/03/07 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python接口开发实现步骤详解
2020/04/26 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
abstract是什么意思
2012/02/12 面试题
语文教育专业推荐信范文
2013/11/25 职场文书
档案接收函范文
2014/01/10 职场文书
化工操作工岗位职责
2014/04/29 职场文书
公关活动策划方案
2014/05/25 职场文书
社区志愿者活动总结
2014/06/26 职场文书
志愿者事迹材料
2014/12/26 职场文书
领导参观欢迎词
2015/01/26 职场文书
签订劳动合同通知书
2015/04/16 职场文书
采购员工作总结范文
2015/08/12 职场文书
感恩的心主题班会
2015/08/12 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技