[Django] 如何設定static files(css, javascript, images)

請確定設定檔內的參數，通常已經預設寫入。

# project/settings.py
INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles',
]

STATIC_URL = '/static/'

接下來，分此兩種情形：

(1) 開發階段 (DEBUG=True)

首先，在開發階段時，因為static files經常性的修改，因此先讀取STATICFILES_DIRS的設定。

# project/settings.py
DEBUG = True

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    # another directory ...
]

建立一個新的static資料夾，在裡面依照習慣將檔案分類放好，可以參考一下我的分類方式：

當在templates中要使用static資料夾內的資源，請記得加入tag。

# templates/index.html
{% load static %}
<img src="{% static 'images/example.png' %}" alt="My image" />

(2) 佈建正式環境 (DEBUG=False)

在正式環境時，請加入STATIC_ROOT的設定，請注意STATIC_ROOT與STATICFILES_DIRS的名稱不能重複！只要Debug設為False，一定要加入這個設定，否則網頁無法正常開啟。

# project/settings.py
DEBUG = False

STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")

接著，請執行指令，將static裡面的資料輸出到新的資料夾staticfiles內。

python manage.py collectstatic

此時，觀察一下兩個資料夾差別，會發現staticfiles內除了我們自己新增的images，Django內建的admin或其他套件所需的資源，都會一並新增至此。但因為js和css兩個資料夾是空的，所以載入時會被忽略。

若之後static資料夾內有任何修改，必須重複執行collectstatic的指令來更新。

【重點整理】比較三個相似參數的差別

1. STATIC_URL:
設定static files的URL前綴，按照設定的前綴+路徑、檔名產生URL，以本文example.png為例，STATIC_URL='/static/'，因此透過URL 'http://your-ip-address/static/images/example.png'檢視example.png這個檔案。

2. STATICFILES_DIRS:
開發階段，static files存放的位置，可以寫入多個路徑。

3. STATIC_ROOT:
正式環境中，透過collectstatic指令，將STATICFILES_DIRS設定目錄下檔案，收錄到STATIC_ROOT指定目錄。