Part6 靜態檔案的管理

weixin_34413065發表於2017-12-27

這篇教程從第5節開始,我們已經建立了一個測試過的web投票應用,現在我們會新增一個表格和一張圖片。
除了由伺服器生成的HTML,web應用通常也需要提供額外的檔案 —— 例如圖片、JS或者CSS,這些都是用來渲染完整的Web頁面。在Django裡,我們把這些檔案統一稱為“靜態檔案”。

對於小的專案,這個不是大問題,因為你只需要把靜態檔案放在你的web伺服器可以找到的地方久可以了。然而,在大的專案裡,特別是由多個app組成的專案。處理每個app提供的多個靜態檔案集合就開始變得棘手了。

這就是django.contrib.staticfiles處理的事情:它從你的每個應用(或者你指定的其他位置)裡收集靜態檔案到一個單獨的位置,這個位置在生產環境可以簡單地供客戶端訪問。

定製你的APP的外觀和感覺

首先,在你的polls目錄裡建立一個名為static的目錄,Django會在這裡查詢靜態檔案,這個和Django在polls/templates/裡查詢模板檔案很相似。

Django的STATICFILES_FINDERS設定包含了一個查詢目錄列表,知道怎麼去多個資源位置查詢靜態檔案。預設設定是AppDirectoriesFinder,用來在每個INSTALLED_APPS目錄下面尋找static子目錄。就像我們剛才在polls下面建立的那個。admin站點也是用這種方式管理他的靜態檔案。

在你剛建立的static目錄裡面,建立一個polls目錄,然後在polls目錄裡面建立一個叫做style.css的檔案。換句話說,你的樣式檔案路徑應該是polls/static/polls/style.css。因為AppDirectoriesFinder靜態檔案查詢器的工作方式,以後你可以在Django裡簡單地通過polls/style.css這樣來引用靜態檔案。和你引用模板的路徑相似。

靜態檔案名稱空間

和模板一樣,我們可以直接將靜態檔案放在polls/static裡(而不是建立一個polls子目錄),但這樣做不是很好。因為Django會選擇第一個名稱匹配的靜態檔案,如果你在不同的應用裡有相同名稱的靜態檔案的話,Django是沒用能力分辨這些同名檔案之間的區別的,只會使用第一個找到的檔案。所以最簡單的方式就是把他們放到名稱空間裡。就是把這些靜態檔案放到一個應用名稱的子目錄下面。

把下面的程式碼放到樣式表裡面(polls/static/polls/style.css):

li a {
    color: green;
}

下一步,把下面的程式碼新增到polls/template/polls/index.html檔案的頂端:

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

{% static %}模板標籤生成靜態檔案的絕對url路徑。這就是你在開發中要做的所有事情,重新載入http://localhost:8000/polls/地址,你會看到question的連結是綠色的(Django 風格),意味著你的樣式表正常載入了。

新增一個背景圖象

下一步,我們要為圖象建立一個子目錄,在polls/static/polls/目錄下面建立一個images子目錄,在這個目錄裡面,放一個叫做background.gif的圖片檔案。換句話說,你的圖片檔案位置是:polls/static/polls/images/background.gif.
然後,把下面的程式碼新增到你的樣式表(polls/static/poll/style.css)裡。

body {
    background: white url("images/background.gif") no-repeat right bottom;
}

重新載入http://localhost:8000/polls/你會發現背景圖在螢幕的右上方。

警告

像你的樣式表那樣使用{% static %}模板標籤當然不可用,特別是檔案不是由Django生成的時候。你應該經常使用相對路徑來連結你的靜態檔案。因為這樣後面你才能修改STATIC_URL(被STATIC模板標籤用來生成它自己的URL路徑)而不需要修改你的靜態檔案裡的一堆路徑。

上面這些都是基礎內容,對於更多的設定細節以及其他包含框架的的內容,可以看官方文件怎麼組織靜態檔案靜態檔案引用分發靜態檔案這篇文件則是討論怎麼在一個真實的伺服器上使用靜態檔案。

當你熟悉了怎麼使用靜態檔案以後,就可以學習第7節的內容,關於怎麼定製Django的自動生成式管理站點了。

相關文章