大家好，這是皮爺給大家帶來的最新的學習Python能幹啥？之Django教程，從零開始，到最後成功部署上線的項目。這一節，我們將打磨首頁的文章列表展示問題。
Peekpa.com的官方地址：http://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 %}來傳遞； - 完畢。
獲取代碼的唯一途徑：關注『皮爺擼碼』，回覆『代碼』即可獲得。
長按下圖二維碼關注，如文章對你有啓發，歡迎在看與轉發。
