前提

模板引擎

过滤器函数

当数据返回到前端时，我们需要在前端做一些数据的过滤。Jinja2 提供了一些函数来对这些数据进行操作。

内置函数

Jinja2 提供了很多函数，如：
| abs() | float() | lower() | round() | tojson() |
| ---- | ---- | ---- | ---- | ---- |
| attr() | forceescape() | map() | safe()| trim() |
| batch()| format() | max() | select() | truncate() |
| capitalize() | groupby() | min() | selectattr() | unique() |
| center() | indent() | pprint() | slice() | upper() |
| default() | int() | random() | sort() | urlencode() |
| dictsort() | join() | reject() | string() | urlize() |
| escape() | last() | rejectattr() | striptags() | wordcount()|
| filesizeformat() | length() | replace() | sum() | wordwrap() |
| first() | list() | reverse() | title() | xmlattr() |

下面介绍一些常用内置函数。（ List of Builtin Filters 点此查看详细文档 ）

default()

{{ name|default('rikka')}}

上面代码的意思是，name 如果有值则显示其值，否则显示 default() 中的值。

sort()

{{[9, 4, 5, 8, 1, 3]|sort}}

上面代码能够将 [...] 中的值按默认增序排列。它不仅能排列数字，也能根据其他属性排列。

自定义函数

在 python 中定义，在前端中使用：

def say(name):
    if name == 'rikka':
        return '无内鬼，可以交易'
    else:
        return '有内鬼，终止交易'

app.add_template_filter(say, 'say')

{{'rikka'|say}} , 可以继续访问
<br>
{{'张三'|say}} , 禁止访问

自定义函数结果

定义宏

在 html 文件中定义函数，可以用来简化 HTML 代码：

{% macro input(name, type, value) %}
  <input type="{{ type }}" name="{{ name }}" value="{{ value }}"></input><br/><br/>
{% endmacro %}

这里，我们定义了 input 方法，传入三个参数，返回一个 input 标签。

 {{input(name='名字', type='text', value='rikka')}}
 {{input(name='文件', type='file', value='上传文件')}}
 {{input(name='按钮', type='button', value='提交')}}

这比写三个复杂的 input 标签方便多了。

宏定义

模板的引用和继承

引用

有些页面可以重复使用，我们并不需要在页面中重复代码，而是用 include 就能直接引用了。

<body>
  {% include header.html %}
    content
  {% include footer.html %}
</body>

继承

<!-- child.html -->

this is child.html, inherit from parent.html 

{% extends 'parent.html' %}

{% block name %} 我复写了 parent.html 的内容 {% endblock %}

<!-- parent.html -->

<p style="color: pink;">
  这是 parent.html ，公用内容模板
</p>

{% block name %}子模板可以替换的内容{% endblock %}

继承模板

加载静态文件

对于一些 css, js, image 这样的静态文件，我们会放到 static 目录中，这样引用：


<link rel="stylesheet" href="{{ url_for('static', filename='css/xxx.css')}}">

<script src="{{ url_for('static', filename='js/xx.js')}}"></script>

总结

本文学习了模板语言的一些进阶用法，作为知识基础的一部分。不纳入项目一部分。

  • 过滤器
  • 宏
  • 引用和继承
  • 静态文件