用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">
                    <p class="h5 mt-3 border-bottom mb-0 pb-2"><a href="{% url 'post:detail' time_id=top_post.0.time_id%}" class="text-decoration-none text-dark" style="">{{ top_post.0.title }}a>
                    p>
                    <div class="d-flex flex-row justify-content-between mt-2">
                        <p class="font-weight-light small pl-1 ">{{ top_post.0.author.username }}p>
                        <p class="font-weight-light small pr-1">{{ top_post.0.publish_time_show | datapicker_format }}p>
                    div>
                    <p class="small" style="font-size: 95%;">{{ top_post.0.description }}p>
                div>
            div>
        {% endif %}

        
        <div class="row mt-2 justify-content-between" style="height: 130px;">
            {% if top_post.1 %}
                
                <div class="col-sm-4 pl-0 pr-1 position-relative h-100">
                    <a href="{% url 'post:detail' time_id=top_post.1.time_id%}" class="w-100 h-100">
                        <img src="{{ top_post.1.thumbnail }}" class="w-100 h-100">
                        <div class="position-absolute mr-1" style="bottom:0;background-color: rgba(58,58,58,0.5)">
                            <p class="small m-1 text-light">
                                {{ top_post.1.title }}
                            p>
                        div>
                    a>
                div>
            {% endif %}
            {% if top_post.2 %}
                
                <div class="col-sm-4 pl-1 pr-1 position-relative h-100">
                    <a href="{% url 'post:detail' time_id=top_post.2.time_id%}" class="w-100 h-100">
                        <img src="{{ top_post.2.thumbnail }}" class="w-100 h-100">
                        <div class="position-absolute mr-1" style="bottom:0;background-color: rgba(58,58,58,0.5)">
                            <p class="small m-1 text-light">
                                {{ top_post.2.title }}
                            p>
                        div>
                    a>
                div>
            {% endif %}
            {% if top_post.3 %}
                
                <div class="col-sm-4 pl-1 pr-0 position-relative h-100">
                    <a href="{% url 'post:detail' time_id=top_post.3.time_id%}" class="w-100 h-100">
                        <img src="{{ top_post.3.thumbnail }}" class="w-100 h-100">
                        <div class="position-absolute" style="bottom:0;background-color: rgba(58,58,58,0.5)">
                            <p class="small m-1 text-light">
                                {{ top_post.3.title }}
                            p>
                        div>
                    a>
                div>
            {% endif %}
        div>
    {% endif %}

    
    <div class="row mt-3">
        <ul class="col-sm-12 d-block">
            {% for post in list_post %}
                
                <li class="row mb-3" style="height: 180px;background-color: white">
                    <div class="col-sm-4 p-3 h-100">
                        <a href="{% url 'post:detail' time_id=post.time_id %}" class="w-100 h-100">
                            <img src="{{ post.thumbnail }}" class="w-100 h-100">
                            <div class="position-absolute mt-3"
                                 style="top:0;background-color: rgba(32,120,255,0.5)">
                                <p class="small m-1 text-light">{{ post.category.name }}p>
                            div>
                        a>
                    div>
                    <div class="col-sm-8 d-flex flex-column">
                        <p class="h5 mt-3 border-bottom mb-0 pb-2">
                            <a href="{% url 'post:detail' time_id=post.time_id %}" class="text-decoration-none text-dark">{{ post.title }}
                            a>
                        p>
                        <p class="small mt-2" style="font-size: 95%;">{{ post.description }}p>
                        <div class="d-flex flex-row justify-content-between mt-auto">
                            <p class="font-weight-light small pl-1 mb-3">{{ post.author.username }}p>
                            <p class="font-weight-light small pr-1 mb-3">阅读({{ post.read_num }})p>
                            <p class="font-weight-light small pr-1 mb-3">{{ post.publish_time_show | datapicker_format }}p>
                        div>
                    div>
                li>
            {% endfor %}

        ul>
    div>

div>

上文可以看到，我们需要注意这么几点：

• 需要对数据进行判断，如果top_post没有数据的时候，就不显示；
• 每一个文章的详情页跳转的写法：{% url 'post:detail' time_id=top_post.0.time_id%}通过最后time_id=xxx的方式传值；
• 最后用个for循环，来对list_post的数据进行显示。

好了，全部做完之后，最后我们运行服务，来看一下我们的首页：

很完美，点击每一篇文章，都能跳转到不同的文章详情页。颇费！

技术总结

最后总结一下，

首页页面接入文章数据：

1. 填充文章数据；
2. 修改首页的视图函数，将需要的文章读取数来，再通过context的变量传递给前端；
3. 前端通过Django的DLT模板，来显示Post的各个内容，文章详情页的URL，使用{% url 'post:detail' time_id=xxx.time_id %}来传递；
4. 完毕。

整套教程源码获取，可以关注『皮爷撸码』，回复『peekpa.com』

长按下图二维码关注，如文章对你有启发，欢迎在看与转发。