撰寫你的第一個 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 自動產生的管理站點。

回到頂部