大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们将打磨首页的文章列表展示问题。
Peekpa.com的官方地址：peekpa.com
上一节，我们把文章详情页弄好了，这一章节，我们把首页弄好，即首页的文章列表。
首页回顾
我们之前设计的首页，长这个样子：
可以看到，首页分为顶部四个大的推荐图，还有下面的文章列表，今天的任务就是要将这几个地方补全。
怎样才能补全呢？我们可以分为以下几步：
- 添加文章，让我们有足够的文章来显示；
- 在有足够文章的基础上，我们需要通过从数据库里面读取文章，然后拍好分类，再返回给前端。
填充文章
那么我们就先第一步，填充文章。
这里简单说明一下文章：
- 用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的数据进行显示。
好了，全部做完之后，最后我们运行服务，来看一下我们的首页：
很完美，点击每一篇文章，都能跳转到不同的文章详情页。颇费！
技术总结
最后总结一下，
首页页面接入文章数据：
- 填充文章数据；
- 修改首页的视图函数，将需要的文章读取数来，再通过context的变量传递给前端；
- 前端通过Django的DLT模板，来显示Post的各个内容，文章详情页的URL，使用
{% url 'post:detail' time_id=xxx.time_id %}来传递； - 完毕。
获取代码的唯一途径：关注『皮爷撸码』，回复『代码』即可获得。
长按下图二维码关注，如文章对你有启发，欢迎在看与转发。
