選單
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Django - 新增靜態檔案


建立 Static 資料夾

在構建 Web 應用程式時,您可能需要新增一些靜態檔案,例如圖片或 CSS 檔案。

首先,在您的專案中建立一個名為 static 的資料夾,與建立 templates 資料夾的目錄相同。

資料夾的名稱必須是 static

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/

static 資料夾中新增一個 CSS 檔案,名稱隨意,本例中我們稱之為 myfirst.css

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/
            myfirst.css

開啟 CSS 檔案並插入以下內容

my_tennis_club/members/static/myfirst.css:

body {
  background-color: lightblue;
  font-family: verdana;
}

修改模板

現在您有了一個包含一些 CSS 樣式的 CSS 檔案。下一步是將其包含在 HTML 模板中。

開啟 HTML 檔案並新增以下內容:

{% load static %}

<link rel="stylesheet" href="{% static 'myfirst.css' %}">

示例

my_tennis_club/members/templates/template.html:

{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'myfirst.css' %}">
<body>

{% for x in fruits %}
  <h1>{{ x }}</h1>
{% endfor %}

</body>
</html>
執行示例 »

重啟伺服器以使更改生效。

py manage.py runserver

並在您自己的瀏覽器中檢視結果: 127.0.0.1:8000/testing/

不起作用?

只是測試? 如果您只是想隨便玩玩,並且不打算部署您的工作,可以在 settings.py 檔案中將 DEBUG = True 設定為 True,那麼上面的示例就會生效。

計劃部署? 如果您計劃部署您的工作,應該在 settings.py 檔案中將 DEBUG = False 設定為 False。上面的示例將失敗,因為 Django 沒有內建的提供靜態檔案的解決方案,但有其他方法可以提供靜態檔案,您將在下一章中學習。

示例(開發中)

my_tennis_club/my_tennis_club/settings.py:

.
.
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
.
.

這將使示例工作,但我們希望您選擇 DEBUG = False,因為這是學習如何使用 Django 的最佳方式。


選擇 Debug = False

在本教程的其餘部分,我們將以 DEBUG = False 執行,即使在開發環境中,因為這是學習如何使用 Django 的最佳方式。

示例

my_tennis_club/my_tennis_club/settings.py:

.
.
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ['*']

.
.
ALLOWED_HOSTS

當使用 DEBUG = False 時,您必須指定允許託管您的作品的主機名。您可以選擇 '127.0.0.1''localhost',它們都代表您本地機器的地址。

我們選擇 '*',這意味著任何地址都允許託管此站點。當您將專案部署到公共伺服器時,應將其更改為實際的域名。


不起作用?

沒錯,示例仍然不工作。

您需要安裝一個第三方庫來處理靜態檔案。

有很多選擇,我們將在下一章中向您展示如何使用名為 **WhiteNoise** 的 Python 庫。



×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援