Flask扩展 – 李辉 / Grey Li https://greyli.com 一个编程和写作爱好者的在线记事本 Thu, 06 Nov 2025 11:36:11 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.9.26 https://greyli.com/wp-content/uploads/2025/03/avatar-500-compressed-144x144.jpg Flask扩展 – 李辉 / Grey Li https://greyli.com 32 32 使用Flask-Avatars在Flask项目中设置头像 https://greyli.com/flask-avatars/ https://greyli.com/flask-avatars/#comments Sun, 22 Jul 2018 02:58:29 +0000 http://greyli.com/?p=1802 Flask-Avatars

大多数Web程序中都会涉及到头像的实现。不同类型的项目，对于头像的需求不同，有些项目可以直接使用Gravatar提供的头像服务，而有的项目则需要提供自定义头像设置。扩展Flask-Avatars几乎满足了所有常见的头像需求：

  • 默认头像
  • Gravatar头像
  • Robohash头像
  • 社交网站头像
  • 生成随机图案头像Identicon
  • 图片裁剪头像

Flask-Avatars

GitHub主页：https://github.com/greyli/flask-avatars

安装与初始化

使用pip安装：

$ pip install flask-avatars

像其他扩展类似，你需要实例化从flask_avatars导入的Avatars类，并传入app实例：

from flask_avatars import Avatars

app = Flask(__name__)
avatars = Avatars(app)

如果你使用工厂函数创建程序实例，那么这里也可以不传入程序实例app，在工厂函数中对这个avatars对象调用init_app()方法时再传入app实例。

默认头像

Flask-Avatars内置了几个默认头像，可以用来作为用户注册后的初始头像，或是作为博客评论者的头像。在模板中调用avatars.default()即可获取URL：

<img src="{{ avatars.default() }}">

你可以通过size参数来设置尺寸，默认为m，其他可选值有l和s。实际的调用示例如下所示：default avatar

 

Gravatar

在模板中调用avatars.gravatar()方法并传入Email散列值即可获取Gravatar（gravatar.com）的头像URL：

<img src="{{ avatars.gravatar(email_hash) }}">

Email散列值可以通过下面的方式获取：

import hashlib

avatar_hash = hashlib.md5(my_email.lower().encode('utf-8')).hexdigest()

实际的调用示例如下所示：gravatar

Robohash

Robohash（robohash.org）是一个生成随机机器人头像的服务（目前Gravatar的默认头像中已经支持这一类型，可以通过将default参数设为robohash获取）。在模板中调用avatars.robohash()并传入随机文本作为参数即可获取Robohash的头像URL：

<img src="{{ avatars.robohash(some_text) }}">

实际的调用示例如下所示：

robohash

社交网站头像

Flask-Avatars通过Avatars.io提供了社交头像获取服务，目前支持Facebook、Twitter、Instagram和Gravatar。通过在模板中调用avatars.social_media()方法并传入用户名（username）即可获取对应的头像URL，通过size参数可以设置尺寸，可选值为small、medium和large：

<img src="{{ avatars.social_media(username) }}">

通过platform参数可以设置平台，默认为twitter，可选值为twitter、facebook、instagram和gravatar：

<img src="{{ avatars.social_media(username, platform='facebook') }}">

实际的调用示例如下所示：

avatars.io

生成随机图案头像Identicon

Gravatar服务可能会有不稳定的情况，这种情况下，你可以在本地为用户生成头像（identicon），下面是一个简单的示例：

app.config['AVATARS_SAVE_PATH '] = 'the/path/to/save/avatar'

avatar = Identicon()
filenames = avatar.generate(text=‘一串唯一字符’)

avatar.generate()会根据传入的随机字符创建三个尺寸（可以通过配置变量AVATARS_SIZE_TUPLE自定义）的头像，保存到指定的位置，并返回三个头像文件名。你可以将这个文件名保存到数据库中，并创建一个视图函数来提供头像文件：

from flask import send_form_directory, current_app

@app.route('/avatars/<path:filename>')
def get_avatar(filename):
    return send_from_directory(current_app.config['AVATARS_SAVE_PATH'], filename)

实际生成的头像示例如下所示：identicon

裁剪头像

Flask-Avatars基于Jcrop提供了头像裁剪功能，具体步骤可以参考文档中的相关部分。下面是示例程序中的裁剪页面：裁剪

 

裁剪后的结果：裁剪完成

配置

Flask-Avatars支持的配置列表如下所示：

配置 默认值 说明
AVATARS_GRAVATAR_DEFAULT identicon Gravatar默认头像类型
AVATARS_SAVE_PATH None 头像保存路径
AVATARS_SIZE_TUPLE (30, 60, 150) 头像尺寸三元素元组，格式为 (small, medium, large)，用于生成identicon头像和裁剪头像
AVATARS_IDENTICON_COLS 7 Identicon头像一行的色块数量
AVATARS_IDENTICON_ROWS 7 Identicon头像一列的色块数量
AVATARS_IDENTICON_BG None Identicaon头像的背景颜色，传入RGB元组，比如(125, 125, 125)。默认使用随机颜色
AVATARS_CROP_BASE_WIDTH 500 裁剪图片的显示宽度
AVATARS_CROP_INIT_POS (0, 0) 裁剪框起始位置，两元素元组(x, y)，默认为左上角
AVATARS_CROP_INIT_SIZE None  裁剪框的尺寸，默认为尺寸元组中设置的l尺寸大小，即AVATARS_SIZE_TUPLE[0]
AVATARS_CROP_MIN_SIZE None 裁剪框的限制最小尺寸，默认无限制
AVATARS_CROP_PREVIEW_SIZE None 预览窗口的尺寸，默认为尺寸元组中设置的m尺寸大小，即AVATARS_SIZE_TUPLE[1]
AVATARS_SERVE_LOCAL False 是否从本地加载Jcrop资源，默认从CDN加载

示例程序

Flask-Avatars的Git仓库中包含三个实例程序，也就是文中的截图对应的程序：

  • examples/basic —— 基本示例
  • examples/identicon —— Identicon示例
  • examples/crop —— 裁剪示例

你可以通过下面的方式来运行实例程序：

$ git clone https://github.com/greyli/flask-avatars.git
$ cd flask-avatars/examples
$ pip install flask flask-avatars
$ cd basic  # 切换到identicon和crop目录可以运行对应的示例程序
$ flask run

这篇文章属于“Flask常用扩展介绍系列”，这个系列的文章目录索引可以在《Flask常用扩展介绍系列文章索引》看到。

相关链接

]]> https://greyli.com/flask-avatars/feed/ 2 使用Bootstrap-Flask在Flask项目中集成Bootstrap https://greyli.com/integrate-bootstrap-in-flask-application-with-bootstrap-flask/ https://greyli.com/integrate-bootstrap-in-flask-application-with-bootstrap-flask/#comments Sun, 15 Jul 2018 09:41:55 +0000 http://greyli.com/?p=1751 Bootstrap-Flask是一个简化在Flask项目中集成前端开源框架Bootstrap过程的Flask扩展。使用Bootstrap可以快速的创建简洁、美观又功能全面的页面，而Bootstrap-Flask让这一过程更加简单和高效。尤其重要的是，Bootstrap-Flask支持最新版本的Bootstrap 4版本。

Bootstrap-Flask logo

Bootstrap-Flask logo

GitHub项目主页：https://github.com/greyli/bootstrap-flask

和Flask-Bootstrap的区别

简单来说，Bootstrap-Flask的出现是为了替代不够灵活且缺乏维护的Flask-Bootstrap。它的主要设计参考了Flask-Bootstrap，其中渲染表单和分页部件的宏基于Flask-Bootstrap中的相关代码修改实现。和Flask-Bootstrap相比，前者有下面这些优点：

  • 去掉了内置的基模板，换来更大的灵活性，提供了资源引用代码生成函数
  • 支持Bootstrap 4
  • 标准化的Jinja2语法
  • 提供了更多方便的宏，比如简单的分页导航部件、导航链接等
  • 宏的功能更加丰富，比如分页导航支持传入URL片段
  • 统一的宏命名，即“render_*”，更符合直觉

安装与初始化

你如果使用过Flask-Bootstrap，那么除了安装时的名称外，这个过程基本没有不同。

安装： 

$ pip install bootstrap-flask

初始化： 

from flask_bootstrap import Bootstrap
from flask import Flask

app = Flask(__name__)

bootstrap = Bootstrap(app)

如果你使用工厂函数创建程序实例，那么可以使用下面的方式初始化扩展： 

from flask_bootstrap import Bootstrap
from flask import Flask

bootstrap = Bootstrap()

def create_app():
    app = Flask(__name__)
    bootstrap.init_app(app)
    
    return app

Bootstrap-Flask提供了哪些功能

2个资源加载函数

在简单的示例程序中，或是在开发时，你可以使用它提供的两个快捷方法来生成Bootstrap资源引用代码，如下所示： 

<head>
{{ bootstrap.load_css() }}
</head>
<body>
...
{{ bootstrap.load_js() }}
</body>

7个快捷渲染宏

目前，Bootstrap-Flask一共提供了7个宏，分别用来快捷渲染各类Bootstrap页面组件，并提供了对扩展Flask-WTF、Flask-SQLAlchemy的支持。

宏 模板路径 说明
render_field() bootstrap/form.html 渲染一个WTForms表单字段
render_form() bootstrap/form.html 渲染一个WTForms表单类
render_pager() bootstrap/pagination.html 渲染一个简单分页导航，包含上一页和下一页按钮
render_pagination() bootstrap/pagination.html 渲染一个标准分页导航部件
render_nav_item() bootstrap/nav.html 渲染一个导航条目
render_breadcrumb_item() bootstrap/nav.html 渲染一个面包屑条目
render_static() bootstrap/utils.html 渲染一个资源引用语句，即 <link>或<script>标签语句

使用方法相当简单，以渲染Flask-WTF（WTForms）的表单类的render_form()宏为例，你只需要从对应的模板路径导入宏，然后调用即可并传入必要的参数： 

{% from 'bootstrap/form.html' import render_form %}

{{ render_form(form) }}

你可以在项目仓库的examples目录下找到一个完整的示例程序，示例程序的运行方式如下： 

$ git clone https://github.com/greyli/bootstrap-flask.git
$ pip install flask flask-wtf flask-sqlalchemy bootstrap-flask
$ cd bootstrap-flask/examples
$ flask run

现在访问http://localhost:5000即可看到示例程序主页。示例程序包含所有宏的实际调用示例，其中分页宏示例页面如下图所示：

分页宏示例

分页宏示例

欢迎贡献代码

这个项目还刚刚起步，各方面都有需要完善的地方，近期我会为它编写一份完善的文档，欢迎有兴趣的朋友贡献代码！

]]> https://greyli.com/integrate-bootstrap-in-flask-application-with-bootstrap-flask/feed/ 20