摘要：在此之前我們已經(jīng)編寫(xiě)了的首頁(yè)視圖，并且配置了和模板，讓能夠正確地處理請(qǐng)求并返回合適的響應(yīng)。正確引入了靜態(tài)文件后樣式顯示正常了。在真正的博客首頁(yè)視圖追夢(mèng)人物的博客的評(píng)論區(qū)留言。更多教程，請(qǐng)?jiān)L問(wèn)追夢(mèng)人物的博客。

在此之前我們已經(jīng)編寫(xiě)了 Blog 的首頁(yè)視圖，并且配置了 URL 和模板，讓 Django 能夠正確地處理 HTTP 請(qǐng)求并返回合適的 HTTP 響應(yīng)。不過(guò)我們僅僅在首頁(yè)返回了一句話(huà)：歡迎訪(fǎng)問(wèn)我的博客。這是個(gè) Hello World 級(jí)別的視圖函數(shù)，我們需要編寫(xiě)真正的首頁(yè)視圖函數(shù)，當(dāng)用戶(hù)訪(fǎng)問(wèn)我們的博客首頁(yè)時(shí)，他將看到我們發(fā)表的博客文章列表，就像 演示項(xiàng)目 里展示的這樣。

上一節(jié)我們闡明了 Django 的開(kāi)發(fā)流程。即首先配置 URL，把 URL 和相應(yīng)的視圖函數(shù)綁定，一般寫(xiě)在 urls.py 文件里，然后在工程的 urls.py 文件引入。其次是編寫(xiě)視圖函數(shù)，視圖中需要渲染模板，我們也在 settings.py 中進(jìn)行了模板相關(guān)的配置，讓 Django 能夠找到需要渲染的模板。最后把渲染完成的 HTTP 響應(yīng)返回就可以了。相關(guān)的配置和準(zhǔn)備工作都在之前完成了，這里我們只需專(zhuān)心編寫(xiě)視圖函數(shù)，讓它實(shí)現(xiàn)我們想要的功能即可。

首頁(yè)的視圖函數(shù)其實(shí)很簡(jiǎn)單，代碼像這樣：

blog/views.py

from django.shortcuts import render
from .models import Post

def index(request):
    post_list = Post.objects.all().order_by("-created_time")
    return render(request, "blog/index.html", context={"post_list": post_list})

我們?cè)?jīng)在前面的章節(jié)講解過(guò)模型管理器 objects 的使用。這里我們使用 all() 方法從數(shù)據(jù)庫(kù)里獲取了全部的文章，存在了 post_list 變量里。all 方法返回的是一個(gè) QuerySet（可以理解成一個(gè)類(lèi)似于列表的數(shù)據(jù)結(jié)構(gòu)），由于通常來(lái)說(shuō)博客文章列表是按文章發(fā)表時(shí)間倒序排列的，即最新的文章排在最前面，所以我們緊接著調(diào)用了 order_by 方法對(duì)這個(gè)返回的 queryset 進(jìn)行排序。排序依據(jù)的字段是 created_time，即文章的創(chuàng)建時(shí)間。- 號(hào)表示逆序，如果不加 - 則是正序。 接著如之前所做，我們渲染了 blogindex.html 模板文件，并且把包含文章列表數(shù)據(jù)的 post_list 變量傳給了模板。

我們的項(xiàng)目使用了從網(wǎng)上下載的一套博客模板（點(diǎn)擊這里下載全套模板）。這里面除了 HTML 文檔外，還包含了一些 CSS 文件和 JavaScript 文件以讓網(wǎng)頁(yè)呈現(xiàn)出我們現(xiàn)在看到的樣式。同樣我們需要對(duì) Django 做一些必要的配置，才能讓 Django 知道如何在開(kāi)發(fā)服務(wù)器中引入這些 CSS 和 JavaScript 文件，這樣才能讓博客頁(yè)面的 CSS 樣式生效。

按照慣例，我們把 CSS 和 JavaScript 文件放在 blog 應(yīng)用的 static 目錄下。因此，先在 blog 應(yīng)用下建立一個(gè) static 文件夾。同時(shí)，為了避免和其它應(yīng)用中的 CSS 和 JavaScript 文件命名沖突（別的應(yīng)用下也可能有和 blog 應(yīng)用下同名的 CSS 、JavaScript 文件），我們?cè)僭?static 目錄下建立一個(gè) blog 文件夾，把下載的博客模板中的 css 和 js 文件夾連同里面的全部文件一同拷貝進(jìn)這個(gè)目錄。最終我們的 blog 應(yīng)用目錄結(jié)構(gòu)應(yīng)該是這樣的：

blog
    __init__.py
    static
        blog
            css
                .css 文件...
            js
                .js 文件...
    admin.py
    apps.py
    migrations
        __init__.py
    models.py
    tests.py
    views.py

用下載的博客模板中的 index.html 文件替換掉之前我們自己寫(xiě)的 index.html 文件。如果你好奇，現(xiàn)在就可以運(yùn)行開(kāi)發(fā)服務(wù)器，看看首頁(yè)是什么樣子。

如圖所示，你會(huì)看到首頁(yè)顯示的樣式非常混亂，原因是瀏覽器無(wú)法正確加載 CSS 等樣式文件。需要以 Django 的方式來(lái)正確地處理 CSS 和 JavaScript 等靜態(tài)文件的加載路徑。CSS 樣式文件通常在 HTML 文檔的 head 標(biāo)簽里引入，打開(kāi) index.html 文件，在文件的開(kāi)始處找到 head 標(biāo)簽包裹的內(nèi)容，大概像這樣：

templates/blog/index.html



  
      

      
      
      

      
      
      
      
      

      
      
      
      
      
  
  
      
      
  

CSS 樣式文件的路徑在 link 標(biāo)簽的 href 屬性里，而 JavaScript 文件的路徑在 script 標(biāo)簽的 src 屬性里?？梢钥吹街T如 `href="css/bootstrap.min.css" 或者 src="js/jquery-2.1.3.min.js" 這樣的引用，由于引用文件的路徑不對(duì)，所以瀏覽器引入這些文件失敗。我們需要把它們改成正確的路徑。把代碼改成下面樣子，正確地引入 static 文件下的 CSS 和 JavaScript 文件：

templates/blog/index.html

+ {% load staticfiles %}


  
      

      
      
      

      
      - 
      
      - 
      - 
      + 
      + 
      + 

      
      - 
      - 
      - 
      - 
      + 
      + 
      + 
      + 
  
  
      
      - 
      + 
  

這里 - 表示刪掉這一行，而 + 表示增加這一行。

我們把引用路徑放在了一個(gè)奇怪的符號(hào)里，例如：href="{% static "blog/css/bootstrap.min.css" %}"。用 {% %} 包裹起來(lái)的叫做模板標(biāo)簽。我們前面說(shuō)過(guò)用 {{ }} 包裹起來(lái)的叫做模板變量，其作用是在最終渲染的模板里顯示由視圖函數(shù)傳過(guò)來(lái)的變量值。而這里我們使用的模板標(biāo)簽的功能則類(lèi)似于函數(shù)，例如這里的 static 模板標(biāo)簽，它把跟在后面的字符串 "css/bootstrap.min.css" 轉(zhuǎn)換成正確的文件引入路徑。這樣 css 和 js 文件才能被正確加載，樣式才能正常顯示。

為了能在模板中使用 {% static %} 模板標(biāo)簽，別忘了在最頂部 {% load staticfiles %} 。static 模板標(biāo)簽位于 staticfiles 模塊中，只有通過(guò) load 模板標(biāo)簽將該模塊引入后，才能在模板中使用 {% static %} 標(biāo)簽。

替換完成后你可以刷新頁(yè)面并看看網(wǎng)頁(yè)的源代碼，看一看 {% static %} 模板標(biāo)簽在頁(yè)面渲染后究竟被替換成了什么樣的值。例如我們可以看到

這一部分最終在瀏覽器中顯示的是：

這正是 pace.css 文件所在的路徑，其它的文件路徑也被類(lèi)似替換?？梢钥吹?{% static %} 標(biāo)簽的作用實(shí)際就是把后面的字符串加了一個(gè) /static/ 前綴，比如 {% static "blog/css/pace.css" %} 最終渲染的值是 /static/blog/css/pace.css。而 /static/ 前綴是我們?cè)?settings.py 文件中通過(guò) STATIC_URL = "/static/" 指定的。事實(shí)上，如果我們直接把引用路徑寫(xiě)成 /static/blog/css/pace.css 也是可以的，那么為什么要使用 {% static %} 標(biāo)簽?zāi)?？想一下，目?URL 的前綴是 /static/，如果哪一天因?yàn)槟承┰颍覀冃枰?/static/ 改成 /resource/，如果你是直接寫(xiě)的引用路勁而沒(méi)有使用 static 模板標(biāo)簽，那么你可能需要改 N 個(gè)地方。如果你使用了 static 模板標(biāo)簽，那么只要在 settings.py 處改一個(gè)地方就可以了，即把 STATIC_URL = "/static/" 改成 STATIC_URL = "/resource/"。

有時(shí)候按 F5 刷新后頁(yè)面還是很亂，這可能是因?yàn)闉g覽器緩存了之前的結(jié)果。按 Shift + F5（有些瀏覽器可能是 Ctrl + F5）強(qiáng)制刷新瀏覽器頁(yè)面即可。

注意這里有一個(gè) CSS 文件的引入

我們沒(méi)有使用模板標(biāo)簽，因?yàn)檫@里的引用的文件是一個(gè)外部文件，不是我們項(xiàng)目里 staticblogcss 目錄下的文件，因此無(wú)需使用模板標(biāo)簽。

正確引入了靜態(tài)文件后樣式顯示正常了。

目前我們看到的只是模板中預(yù)先填充的一些數(shù)據(jù)，我們得讓它顯示從數(shù)據(jù)庫(kù)中獲取的文章數(shù)據(jù)。下面來(lái)稍微改造一下模板：

在模板 index.html 中你會(huì)找到一系列 article 標(biāo)簽：

templates/blog/index.html

...

  ...



  ...



  ...

...

這里面包裹的內(nèi)容顯示的就是文章數(shù)據(jù)了。我們前面在視圖函數(shù) index 里給模板傳了一個(gè) post_list 變量，它里面包含著從數(shù)據(jù)庫(kù)中取出的文章列表數(shù)據(jù)。就像 Python 一樣，我們可以在模板中循環(huán)這個(gè)列表，把文章一篇篇循環(huán)出來(lái)，然后一篇篇顯示文章的數(shù)據(jù)。要在模板中使用循環(huán)，需要使用到前面提到的模板標(biāo)簽，這次使用 {% for %} 模板標(biāo)簽。將 index.html 中多余的 article 標(biāo)簽刪掉，只留下一個(gè) article 標(biāo)簽，然后寫(xiě)上下列代碼：

templates/blog/index.html

...
{% for post in post_list %}
  

    ...
  
{% empty %}
  
暫時(shí)還沒(méi)有發(fā)布的文章！
{% endfor %}
...

可以看到語(yǔ)法和 Python 的 for 循環(huán)類(lèi)似，只是被 {% %} 這樣一個(gè)模板標(biāo)簽符號(hào)包裹著。{% empty %} 的作用是當(dāng) post_list 為空，即數(shù)據(jù)庫(kù)里沒(méi)有文章時(shí)顯示 {% empty %} 下面的內(nèi)容，最后我們用 {% endfor %} 告訴 Django 循環(huán)在這里結(jié)束了。

你可能不太理解模板中的 post 和 post_list 是什么。post_list 是一個(gè) QuerySet（類(lèi)似于一個(gè)列表的數(shù)據(jù)結(jié)構(gòu)），其中每一項(xiàng)都是之前定義在 blogmodels.py 中的 Post 類(lèi)的實(shí)例，且每個(gè)實(shí)例分別對(duì)應(yīng)著數(shù)據(jù)庫(kù)中每篇文章的記錄。因此我們循環(huán)遍歷 post_list ，每一次遍歷的結(jié)果都保存在 post 變量里。所以我們使用模板變量來(lái)顯示 post 的屬性值。例如這里的 {{ post.pk }}（pk 是 primary key 的縮寫(xiě)，即 post 對(duì)應(yīng)于數(shù)據(jù)庫(kù)中記錄的 id 值，該屬性盡管我們沒(méi)有顯示定義，但是 Django 會(huì)自動(dòng)為我們添加）。

現(xiàn)在我們可以在循環(huán)體內(nèi)通過(guò) post 變量訪(fǎng)問(wèn)單篇文章的數(shù)據(jù)了。分析 article 標(biāo)簽里面的 HTML 內(nèi)容，h1 顯示的是文章的標(biāo)題，

    Adaptive Vs. Responsive Layouts And Optimal Text Readability

我們把標(biāo)題替換成 post 的 title 屬性值。注意要把它包裹在模板變量里，因?yàn)樗罱K要被替換成實(shí)際的 title 值。

    {{ post.title }}

下面這 5 個(gè) span 標(biāo)簽里分別顯示了分類(lèi)（category）、文章發(fā)布時(shí)間、文章作者、評(píng)論數(shù)、閱讀量。

  Django 博客教程
  2017年5月11日
  追夢(mèng)人物
  4 評(píng)論
  588 閱讀

再次替換掉一些數(shù)據(jù)，由于評(píng)論數(shù)和閱讀量暫時(shí)沒(méi)法替換，因此先留著，我們?cè)谥髮?shí)現(xiàn)了這些功能后再來(lái)修改它，目前只替換分類(lèi)、文章發(fā)布時(shí)間、文章作者：

  {{ post.category.name }}
  {{ post.created_time }}
  {{ post.author }}
  4 評(píng)論
  588 閱讀

這里 p 標(biāo)簽里顯示的是摘要

  
免費(fèi)、中文、零基礎(chǔ)，完整的項(xiàng)目，基于最新版 Django 1.10 和 Python 3.5。帶你從零開(kāi)始一步步開(kāi)發(fā)屬于自己的博客網(wǎng)站，幫助你以最快的速度掌握 Django
    開(kāi)發(fā)的技巧...
  

    繼續(xù)閱讀 →
  

替換成 post 的摘要：

  
{{ post.excerpt }}
  

    繼續(xù)閱讀 →
  

再次訪(fǎng)問(wèn)首頁(yè)，它顯示：暫時(shí)還沒(méi)有發(fā)布的文章！好吧，做了這么多工作，但是數(shù)據(jù)庫(kù)中其實(shí)還沒(méi)有任何數(shù)據(jù)呀！接下來(lái)我們就實(shí)際寫(xiě)幾篇文章保存到數(shù)據(jù)庫(kù)里，看看顯示的效果究竟如何。

本章節(jié)的代碼位于：Step6: real blog index view。

如果遇到問(wèn)題，請(qǐng)通過(guò)下面的方式尋求幫助。

在 真正的 Django 博客首頁(yè)視圖 - 追夢(mèng)人物的博客 的評(píng)論區(qū)留言。

將問(wèn)題的詳細(xì)描述通過(guò)郵件發(fā)送到 djangostudyteam@163.com，一般會(huì)在 24 小時(shí)內(nèi)回復(fù)。

更多Django 教程，請(qǐng)?jiān)L問(wèn) 追夢(mèng)人物的博客。