Question

我相信你也觉得我刚刚建立的个人主页非常枯燥乏味。为了使它们更加有趣，我将添加用户头像。与其在服务器上处理大量的上传图片，我将使用 Gravatar 为所有用户提供图片服务。

Gravatar 服务使用起来非常简单。 要请求给定用户的图片，使用格式为 https://www.gravatar.com/avatar/ 的 URL 即可，其中 <hash> 是用户的电子邮件地址的 MD5 哈希值。 在下面，你可以看到如何生成电子邮件为 john@example.com 的用户的 Gravatar URL：

>>> from hashlib import md5
>>> 'https://www.gravatar.com/avatar/' + md5(b'john@example.com').hexdigest()
'https://www.gravatar.com/avatar/d4c74594d841139328695756648b6bd6'

如果你想看一个实际的例子，我自己的 Gravatar URL 是 https://www.gravatar.com/avatar/729e26a2a2c7ff24a71958d4aa4e5f35 。Gravatar 返回的图片如下：

默认情况下，返回的图像大小是 80x80 像素，但可以通过向 URL 的查询字符串添加 s 参数来请求不同大小的图片。 例如，要获得我自己 128x128 像素的头像，该 URL 是 https://www.gravatar.com/avatar/729e26a2a2c7ff24a71958d4aa4e5f35?s=128 。

另一个可传递给 Gravatar 的有趣参数是 d ，它让 Gravatar 为没有向服务注册头像的用户提供的随机头像。 我最喜欢的随机头像类型是“identicon”，它为每个邮箱都返回一个漂亮且不重复的几何设计图片。 如下：

请注意，一些 Web 浏览器插件（如 Ghostery）会屏蔽 Gravatar 图像，因为它们认为 Automattic（Gravatar 服务的所有者）可以根据你发送的获取头像的请求来判断你正在访问的网站。 如果在浏览器中看不到头像，你在排查问题的时候可以考虑以下是否在浏览器中安装了此类插件。

由于头像与用户相关联，所以将生成头像 URL 的逻辑添加到用户模型是有道理的。

from hashlib import md5
# ...

class User(UserMixin, db.Model):
    # ...
    def avatar(self, size):
        digest = md5(self.email.lower().encode('utf-8')).hexdigest()
        return 'https://www.gravatar.com/avatar/{}?d=identicon&s={}'.format(
            digest, size)

User 类新增的 avatar() 方法需要传入需求头像的像素大小，并返回用户头像图片的 URL。 对于没有注册头像的用户，将生成“identicon”类的随机图片。 为了生成 MD5 哈希值，我首先将电子邮件转换为小写，因为这是 Gravatar 服务所要求的。 然后，因为 Python 中的 MD5 的参数类型需要是字节而不是字符串，所以在将字符串传递给该函数之前，需要将字符串编码为字节。

如果你对 Gravatar 服务很有兴趣，可以学习他们的 文档 。

下一步需要将头像图片插入到个人主页的模板中：

{% extends "base.html" %}

{% block content %}
    <table>
        <tr valign="top">
            <td><img src="{{ user.avatar(128) }}"></td>
            <td><h1>User: {{ user.username }}</h1></td>
        </tr>
    </table>
    <hr>
    {% for post in posts %}
    <p>
    {{ post.author.username }} says: <b>{{ post.body }}</b>
    </p>
    {% endfor %}
{% endblock %}

使用 User 类来返回头像 URL 的好处是，如果有一天我不想继续使用 Gravatar 头像了，我可以重写 avatar() 方法来返回其他头像服务网站的 URL，所有的模板将自动显示新的头像。

我的个人主页的顶部有一个不错的大头像，不止如此，底下的所有用户动态都会有一个小头像。 对于个人主页而言，所有的头像当然都是对应用户的。我将会在主页面上实现每个用户动态都用其作者的头像来装饰，这样一来看起来就非常棒了。

为了显示用户动态的头像，我只需要在模板中进行一个小小的更改：

{% extends "base.html" %}

{% block content %}
    <table>
        <tr valign="top">
            <td><img src="{{ user.avatar(128) }}"></td>
            <td><h1>User: {{ user.username }}</h1></td>
        </tr>
    </table>
    <hr>
    {% for post in posts %}
    <table>
        <tr valign="top">
            <td><img src="{{ post.author.avatar(36) }}"></td>
            <td>{{ post.author.username }} says:<br>{{ post.body }}</td>
        </tr>
    </table>
    {% endfor %}
{% endblock %}