用Django全栈开发——18. 首页文章列表展示
发布时间
阅读量：
阅读量
您好！今天由皮纳特为大家带来最新的一期Python学习指南系列课程——Django应用开发实战教程。从零起步到最终实现了从零到完整的项目部署与上线流程。本次课程中的一节核心内容是围绕如何优化首页文章列表展示功能展开分析与实践。
上一节我们完成了文章详情页的设置；在这一章里，则致力于打造一个整洁美观的首页；这个首页包含多篇文章列表。
首页回顾
我们之前设计的首页，长这个样子：
可以看到，在首面页面上分为顶部四个较大的推荐板块以及下面的文章列表区段 today 的工作重点就是要完善这些区域
怎样才能补全呢？我们可以分为以下几步：
- 增加内容以确保能够满足展示需求的文章数量；
- 基于已经拥有足够多的文章，我们计划获取并整理这些材料，并按照类别进行排序或分组处理后返回给前端。
填充文章
那么我们就先第一步，填充文章。
这里简单说明一下文章：
- 基于Django全栈开发——第十二章 重构前端页面编写文章详情页：这篇博客属于顶部位置的文章，在阅读时请确保将此字段设置为true；优先级设置为满分。
- 在首版块的小焦点图片左侧的第一篇正向内容中讨论了这一主题。
- 在首版块的小焦点图片中间位置上介绍了这一主题。
- 在首版块的小焦点图片右侧的第一篇正向内容中讨论了这一主题。
- 测试系列（包括Title1到Title2）则位于正文区域的列表中。
修改视图函数
接下来，我们就要修改视图函数了，修改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未赋值，则系统将不会进入后续操作
- 如果在运行过程中发现变量
- 在实现具体的页面跳转功能时
- 我们采用最后通过
time_id=xxx的方式传递参数到URL路径中
- 我们采用最后通过
- 最后可以使用一个for循环来遍历并显示list\_post中的所有数据项
好了，全部做完之后，最后我们运行服务，来看一下我们的首页：
很完美，点击每一篇文章，都能跳转到不同的文章详情页。颇费！
技术总结
最后总结一下，
首页页面接入文章数据：
- 录入文章信息；
- 修改首页视图函数，在处理时考虑文章数量，并通过context将相关变量传递给前端。
- 前端使用Django DLT模板呈现Post信息，并通过
{% url 'post:detail' time_id=xxx.time_id %}获取文章详情页URL。 - 至此已完成整个操作流程。
整套教程源码获取，可以关注『皮爷撸码』，回复『peekpa.com』
长按下图二维码关注，如文章对你有启发，欢迎在看与转发。
全部评论 (0)
还没有任何评论哟~