现在虽然博客的功能大都实现了,但是界面还是比较朴素,特别是首页的文章列表几乎全是文字,看多了难免疲劳。因此,给每个文章标题配一张标题图,不仅美观,用户也能通过图片快速了解文章内容。实际上大部分社交网站也都是这么干的,毕竟人的天性就是懒,能看图就坚决不看字。
在上传用户头像章节中,我们已经接触过上传、展示图片了。标题图的实现也差不多,不同的是本章会更近一步,对图片进行缩放等处理,使页面整洁美观、并且高效。
准备工作
与用户头像类似,标题图是属于每篇博文自己的“资产”,因此需要修改model,新建一个字段:
article/models.py
class ArticlePost(models.Model):
...
# 文章标题图
avatar = models.ImageField(upload_to='article/%Y%m%d/', blank=True)
...
注意上传地址中的%Y%m%d
是日期格式化的写法。比如上传时间是2019年2月26日,则标题图会上传到media/article/20190226
这个目录中。
记得数据迁移。
标题图通常在创建新文章的时候就设置好了,而新文章是通过表单上传到数据库中的。因此接下来就是修改发表文章的表单类:
article/forms.py
...
class ArticlePostForm(forms.ModelForm):
class Meta:
...
fields = ('title', 'body', 'tags', 'avatar')
增加了avatar
字段而已,没有新内容。
下一步就是修改视图。因为POST的表单中包含了图片文件,所以要将request.FILES
也一并绑定到表单类中,否则图片无法正确保存:
article/views.py
...
def article_create(request):
if request.method == "POST":
# 增加 request.FILES
article_post_form = ArticlePostForm(request.POST, request.FILES