Django靜態檔案
靜態檔案
在一個Django專案中，我們可能用到很多靜態檔案（圖片，前端庫，框架），那麼如何去呼叫這些靜態檔案其實在Django裡面有了非常高明的處理方式。
下面就看一看如何在Django專案中配置自己的靜態檔案，以及如何去使用它們。
建立目錄
首先我們需要在根目錄下創建出一個static的資料夾用於存放靜態檔案，其次可以按照下面的規則進行建立目錄以方便管理。
-- static 靜態檔案根目錄 -- public 公用資料夾，存放所有APP共有的資源 -- js -- css -- imges -- modules -- app01 APP01自己用的一些靜態檔案 -- js -- css -- imges -- modules -- app02 -- js -- css -- imges -- modules
建立好目錄之後，可以在public中放入一些靜態檔案了，如jQuery，bootstrop等等。
那麼我這裡就放一個自己寫的css檔案吧，放在app01的css中，命名為h1-style.css
h1{
background: red;
color: #fff;
}
配置檔案
靜態檔案建立好了之後需要進行配置，開啟專案全域性資料夾中的settings.py，找到最下面
STATIC_URL = '/static/' # 靜態檔案路徑對映別名（十分重要，預設都是static，一般不更改） STATICFILES_DIRS = ( # 必須是這個名字 os.path.join(BASE_DIR,"static"), # 真實的靜態檔案路徑，注意逗號 )
引用檔案
測試工作
在配置完成後，我們可以對靜態檔案進行測試工作了。
第一步：建立urls路由檢視解析關係
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^static_test/', views.static_test),
]
第二步：編寫檢視函式
from django.shortcuts import render def static_test(request): return render(request,"static_test.html")
第三步：編寫HTML文件static_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>static_test</h1>
</body>
</html>
此時我們啟動Django服務後發現<h1>並沒有樣式，這是由於還沒對css檔案進行引入。
靜態解析
現在在HTML文件中，我們就可以引用這個h1-style.css檔案了。
以下方式屬於靜態解析，是根據STATIC_URL這個變數值來進行查詢的，也就是說如果你真實的靜態檔案根目錄名字不叫static而是叫其他的，只要你在配置檔案中進行了配置，那麼在引入的時候通通使用STATIC_URL的變數值進行引入。
注意靜態引入的方式十分依賴於STATIC_URL起的別名，你的別名是什麼，引入的目錄名就應該是什麼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/app01/css/h1-style.css"> <!-- 靜態解析，依賴別名 -->
<title>Document</title>
</head>
<body>
<h1>static_test</h1>
</body>
</html>
動態解析
動態解析也依賴於STATIC_URL這個變數，不過在使用動態解析時STATIC_URL變數值（拼接路徑對映別名）可以隨意進行更換。
他相當於找到這個變數，然後再用{% static '/app01/css/h1-style.css' %}後面的部分去與這個變數的別名對映即我們配置的路徑做拼接，拼接上就找到了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
<link rel="stylesheet" href="{% static '/app01/css/h1-style.css' %}"> <!-- 動態解析，不依賴別名 -->
<title>Document</title>
</head>
<body>
<h1>static_test</h1>
</body>
</html>