撰寫你的第一個 Django 應用程式,第 6 部分¶
本教學從教學 5結束的地方開始。我們已經建立了一個經過測試的網路投票應用程式,現在將新增一個樣式表和一張圖片。
除了伺服器產生的 HTML 之外,網頁應用程式通常還需要提供額外的檔案,例如圖片、JavaScript 或 CSS,這些檔案對於呈現完整的網頁是必要的。在 Django 中,我們將這些檔案稱為「靜態檔案」。
對於小型專案來說,這不是什麼大問題,因為您可以將靜態檔案放在您的網路伺服器可以找到的位置。然而,在較大的專案中(特別是那些由多個應用程式組成的專案),處理每個應用程式提供的多組靜態檔案開始變得棘手。
這就是 django.contrib.staticfiles
的用途:它會從您的每個應用程式(以及您指定的任何其他位置)收集靜態檔案,放入一個單一位置,以便在生產環境中輕鬆提供。
哪裡可以取得協助
如果您在完成本教學時遇到困難,請前往常見問題的取得協助章節。
自訂您的應用程式的外觀和風格¶
首先,在您的 polls
目錄中建立一個名為 static
的目錄。Django 會在那裡尋找靜態檔案,就像 Django 在 polls/templates/
內尋找範本一樣。
Django 的 STATICFILES_FINDERS
設定包含一個尋找器列表,這些尋找器知道如何從各種來源發現靜態檔案。預設值之一是 AppDirectoriesFinder
,它會在每個 INSTALLED_APPS
中尋找一個「static」子目錄,就像我們剛在 polls
中建立的子目錄一樣。管理站點對其靜態檔案使用相同的目錄結構。
在您剛才建立的 static
目錄中,再建立一個名為 polls
的目錄,並在其中建立一個名為 style.css
的檔案。換句話說,您的樣式表應該位於 polls/static/polls/style.css
。由於 AppDirectoriesFinder
靜態檔案尋找器的工作方式,您可以在 Django 中將此靜態檔案稱為 polls/style.css
,就像您引用範本的路徑一樣。
靜態檔案命名空間
就像範本一樣,我們可能可以將靜態檔案直接放在 polls/static
中(而不是建立另一個 polls
子目錄),但這實際上是一個不好的主意。Django 會選擇它找到的第一個名稱符合的靜態檔案,如果您在不同的應用程式中也有一個名稱相同的靜態檔案,Django 將無法區分它們。我們需要能夠將 Django 指向正確的檔案,而確保這一點的最佳方法是透過命名空間它們。也就是說,將這些靜態檔案放在另一個以應用程式本身命名的目錄中。
將以下程式碼放入該樣式表 (polls/static/polls/style.css
)
polls/static/polls/style.css
¶li a {
color: green;
}
接下來,在 polls/templates/polls/index.html
的頂部新增以下內容
polls/templates/polls/index.html
¶{% load static %}
<link rel="stylesheet" href="{% static 'polls/style.css' %}">
{% static %}
範本標籤會產生靜態檔案的絕對 URL。
這就是您在開發時需要做的一切。
啟動伺服器(如果伺服器已經在執行,請重新啟動)
$ python manage.py runserver
...\> py manage.py runserver
重新載入 https://#:8000/polls/
,您應該會看到問題連結是綠色的(Django 風格!),這表示您的樣式表已正確載入。
新增背景圖片¶
接下來,我們將為圖片建立一個子目錄。在 polls/static/polls/
目錄中建立一個 images
子目錄。在這個目錄內,新增任何您想要用作背景的圖片檔案。為了本教學的目的,我們使用一個名為 background.png
的檔案,其完整路徑為 polls/static/polls/images/background.png
。
然後,在您的樣式表 (polls/static/polls/style.css
) 中新增對圖片的引用
polls/static/polls/style.css
¶body {
background: white url("images/background.png") no-repeat;
}
重新載入 https://#:8000/polls/
,您應該會在螢幕的左上方看到背景已載入。
警告
{% static %}
範本標籤不適用於非由 Django 產生的靜態檔案,例如您的樣式表。您應該始終使用相對路徑來連結彼此之間的靜態檔案,因為這樣您可以變更 STATIC_URL
(由 static
範本標籤用來產生其 URL),而無需修改靜態檔案中的一堆路徑。
這些是基本知識。如需有關框架中包含的設定和其他細節的更多資訊,請參閱靜態檔案操作說明和靜態檔案參考。部署靜態檔案討論如何在真實伺服器上使用靜態檔案。
當您熟悉靜態檔案時,請閱讀本教學的第 7 部分,以了解如何自訂 Django 自動產生的管理站點。