点击名片关注阿尘blog，一起学习，一起成长

本文将继续接着flask第一篇继续学习flask相关

1 flask过滤器

前面讲了在模板中引用变量，那么我们如果要让变量展现为指定格式那么就需要对变量进行过滤，而jinja2之中包含了许多内置的过滤器，过滤器的调用通过管道符|来进行，下面将简单展示一下其中abs(绝对值)的代码示例

@app.get('/booklist/<int:book_id>')
def book_detail(book_id):
    return render_template('book_detail.html',book_id=book_id,username='阿尘',words=-1235)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍详情</title>
</head>
<body>
    <p>欢迎用户{{ username }}</p>
    <p>您正在访问book ID 为{{ book_id }}的书籍详情</p>
    <p>本文一共{{ words|abs }}字</p>
</body>
</html>

除了abs之外，还有其他的内置过滤器，如下：

当下只列举了部分过滤器，如有需要可参考jinja2官方文档

default：如果当前变量没有值或字段，则展示默认值。
escape 或 e：转义符，会将 <、> 等 HTML 标签符号转义成 HTML 中的可展示符号（此功能 Jinja2 是默认开启的）。
autoescape off/on：控制关闭或开启默认的自动转义。
safe：如果开启了全局转义，那么 safe 过滤器将会将变量关掉转义。
first：返回序列的第一个元素。
last：获取序列最后一个值。
format：格式化字符串，和 Python的一样。
length：返回序列或字典的长度。
join：和 Python 的 join 一样。

除了内置的过滤器，我们还可以自定义过滤器，示例代码如下

# 定义自定义过滤器
def dateformat(value,format="%Y-%m-%d %H:%M:%S"):
    return value.strftime(format)
app.add_template_filter(dateformat,'dformat')  
@app.get('/booklist/<int:book_id>')
def book_detail(book_id):
    now_time = datetime.now()
    return render_template('book_detail.html',book_id=book_id,username='阿尘',words=-1235,now_time=now_time)

<body>
    <p>欢迎用户{{ username }}</p>
    <p>您正在访问book ID 为{{ book_id }}的书籍详情</p>
    <p>本文一共{{ words|abs }}字</p>
    <p>当前时间为{{ now_time|dformat }}</p>
</body>

2 控制语句

if循环代码示例：

<body>
    <p>欢迎用户{{ username }}</p>
    <p>您正在访问book ID 为{{ book_id }}的书籍详情</p>
    <p>本文一共{{ words|abs }}字</p>
    <p>当前时间为{{ now_time|dformat }}</p>
{% if book_id == 520 %}
    <p>恭喜你！您正在阅读《爱的博弈》</p>
{% endif %}
{% else %}
    <p>法海！你不懂爱！</p>
</body>

for循环代码示例：

@app.route('/booklist')
def booklist():
    books = [{
        "bookname":"《爱的博弈》",
        "author":"约翰.戈特曼"
    },{
        "bookname":"《认知觉醒》",
        "author":"周岭"
    }]
    return render_template('booklist.html',books=books)

<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
</head>
<body>
    {% for book in books %}
        <div>书名：{{ book.bookname }},作者：{{ book.author }}</div>
    {% endfor %}
</body>
</html>

3 模板继承

大部分网页的模块是重复的，比如导航栏、备案等信息，为了避免代码冗余，我们有必要采用方法解决——模板继承

模板的继承我们通过

先创建一个父模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
{#定义标题，可以继承的时候使用子网页标题#}
    <title>{% block title %}阿尘blog（默认标题）{% endblock %}</title>
</head>
<body>
    <p>欢迎来到阿尘blog</p>
{#    定义子网页自定义内容#}
    {% block content  %}
    {% endblock %}
{#定义页脚#}
    <footer>版权归阿尘所有</footer>
</body>
</html>

下面我们修改登录页的html文件

{% extends "father_base.html" %}
{% block title %}登录页{% endblock %}
{% block content %}
欢迎登录（这是字模板的内容哈）
{% endblock %}

4 加载静态文件

我们一般将css、JavaScript、图片文件放在静态（static）文件目录中，那么我们如何使用静态文件。一般通过url_for()函数来生成一个执行静态文件的url，下面看代码示例

修改booklist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
</head>
<body>
    {% for book in books %}
        <img src="{{ url_for('static',filename=book.image) }}" alt="Image">
        <div>书名：{{ book.bookname }}</div>
        <div>作者：{{ book.author }}</div>
    {% endfor %}
</body>
</html>

修改app.py

@app.route('/booklist')
def booklist():
    books = [{
        "bookname":"《爱的博弈》",
        "author":"约翰.戈特曼",
        "image":'/images/love.png'
    },{
        "bookname":"《认知觉醒》",
        "author":"周岭",
        "image":'/images/known.png'
    }]
    return render_template('booklist.html',books=books)

这样子太大了，看着不舒服，那么我们就通过css来调整一下

在静态文件创一个css目录，接着css目录里面创一个image_style.css的文件如下

.image-container {
  width: 10%;  /* 设置容器宽度 */
  height: 10%; /* 设置容器高度 */
}

.image-container img {
  width: 100%;  /* 设置图片宽度为容器宽度的100% */
  height: auto; /* 设置图片高度自动 */
}

然后修改booklist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/image_style.css') }}">
</head>
<body>
    {% for book in books %}
        <div class="image-container">
            <img src="{{ url_for('static',filename=book.image) }}" alt="Image" >
        </div>
        <div>书名：{{ book.bookname }}</div>
        <div>作者：{{ book.author }}</div>
    {% endfor %}
</body>
</html>