用Django全栈开发——18. 首页文章列表展示

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们将打磨首页的文章列表展示问题。

上一节，我们把文章详情页弄好了，这一章节，我们把首页弄好，即首页的文章列表。

首页回顾

我们之前设计的首页，长这个样子：

可以看到，首页分为顶部四个大的推荐图，还有下面的文章列表，今天的任务就是要将这几个地方补全。

怎样才能补全呢？我们可以分为以下几步：

• 添加文章，让我们有足够的文章来显示；
• 在有足够文章的基础上，我们需要通过从数据库里面读取文章，然后拍好分类，再返回给前端。

填充文章

那么我们就先第一步，填充文章。

这里简单说明一下文章：

• 用Django全栈开发——12. 重构前端页面编写文章详情页：这篇文章是顶部文章，is_in_main_page为true，权重100；
• 首页小焦点图文章左一：这篇文章是首页第二行左一文章，is_in_main_page为true，权重99；
• 首页小焦点图文章中：这篇文章是首页第二行中间的文章，is_in_main_page为true，权重98；
• 首页小焦点图文章右：这篇文章是首页第二行右一文章，is_in_main_page为true，权重97；
• 测试文章1 和 Title12：这两篇文章则是下面文章列表的文章。

修改视图函数

接下来，我们就要修改视图函数了，修改index视图函数：

def index(request):
    top_post = Post.objects.filter(is_main_page=True).order_by('-priority')
    list_post = Post.objects.filter(is_main_page=False)
    context = {
   
        'top_post': top_post,
        'list_post': list_post
    }
    return render(request, 'post/index.html', context=context)

这里我们看到，我们将首页的四个位置通过is_main_page是否为True来来判断是否是在顶部的四个位置，同时，他们的排放顺序是按照priority的数值从大到小排列。其他的数据，则是会放在list_post里面。

修改HTML文件

视图函数已经写好，接下来我们就要修改html文件了。通过Django的DTL里面的if标签来判断数据，来填充数据：

<div class="col-md-8">
    {% if top_post %}
        {% if top_post.0 %}
            <!-- 大焦点图 -->
            <div class="row" style="height: 230px;background-color: white">
                <div class="col-md-7 p-0 h-100">
                    <a href="{% url 'post:detail' time_id=top_post.0.time_id%}" class="w-100 h-100">
                        <img src="{
    { top_post.0.thumbnail }}" class="w-100 h-100">
                    </a>
                </div>

                <div class="col-md-5"