Django的靜態檔案圖片、CSS、JS配置和模板展示及URL訪問
阿新 • • 發佈：2019-02-13
我們在通過設定settings.py檔案來實現靜態檔案在模板中調取和url直接訪問
①Django專案資料夾下建立static/images 兩個資料夾
②配置settings.py （添加了變數STATIC_DIR 、STATICFILES_DIRS 兩個變數，這裡需要注意變數名稱如果不對的話無法訪問到靜態檔案）
# ...省略程式碼... # Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) TEMPLATE_DIR = os.path.join(BASE_DIR,'templates') STATIC_DIR = os.path.join(BASE_DIR,'static') # 本次新建 # ...省略程式碼... TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [TEMPLATE_DIR,], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] STATICFILES_DIRS = [STATIC_DIR,] # 本次新建 # ...省略程式碼... STATIC_URL = '/static/' # 注意檢查有沒有這個變數
③重啟Django伺服器即可通過url訪問
重點剖析：
STATIC_DIR 和 STATICFILES_DIRS 這兩個變數是用於伺服器內部呼叫檔案的路徑位置；
STATIC_URL 是用於客戶端通過url來訪問靜態檔案的位置。
【將靜態檔案寫入html模板中】
配置好上面之後我們就可以在html模板中進行呼叫了
<!DOCTYPE html> {% load staticfiles %} <!-- 表示要引入靜態檔案，需要放在html標籤前面，避免無法通過驗證 --> <html> <head> <title>Rango</title> </head> <body> <h1>Rango says...</h1> <div> hey there partner! <br /> <strong>{{ boldmessage }}</strong><br /> </div> <div> <a href="/rango/about/">About</a><br /> <img src="{% static "images/rango.jpg" %}" alt="picturt of Rango" /> <!-- 引入指定的靜態檔案 --> </div> </body> </html>
【呼叫css和js】
<!DOCTYPE html> {% load staticfiles %} <!-- 表示要引入靜態檔案，需要放在html標籤前面，避免無法通過驗證 --> <html> <head> <title>Rango</title> <!-- 呼叫CSS --> <link rel="stylesheet" href="{% static "css/base.css" %}" /> <!-- 呼叫JS --> <script src="{% static "js/jquery.js" %}"></script> </head> <body> <h1>Rango says...</h1> <div> hey there partner! <br /> <strong>{{ boldmessage }}</strong><br /> </div> <div> <a href="/rango/about/">About</a><br /> <img src="{% static "images/rango.jpg" %}" alt="picturt of Rango" /> <!-- 引入指定的靜態檔案 --> </div> </body> </html>
[29/Jul/2018 22:34:20] "GET / HTTP/1.1" 200 640
[29/Jul/2018 22:34:21] "GET /static/css/base.css HTTP/1.1" 404 1649
[29/Jul/2018 22:34:21] "GET /static/js/jquery.js HTTP/1.1" 404 1649
因為我們沒有這個CSS和JS檔案，所以伺服器和客戶端都會報404錯誤。