在Django中使用css，js等靜態檔案

阿新 • • 發佈：2019-01-17

搗鼓了三個晚上才成功，遇到了好多麻煩，發現別人的部落格都操作不了，趕緊把自己的操作分享出來
下面是方法：
1. settings 中有三個地方要寫

# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'templates/Web/static')

STATICFILES_DIRS = [
    ("css", os.path.join(STATIC_ROOT, 'css')),
    ("img", os.path.join(STATIC_ROOT, 'img' 
)),
    ("js", os.path.join(STATIC_ROOT, 'js')),
]

這裡STATIC_URL通常設為’/static/’，當然設成別的也可以，它的作用其實就是當我們想要引用在STATIC_ROOT中靜態檔案時可以有一個URL值來呼叫，其實我覺得設成空也沒什麼關係吧，具體呼叫在後面講；
STATIC_ROOT 這個很關鍵
通常我們設成STATIC_ROOT = os.path.join(BASE_DIR, "templates/Web/static/")（Linux下這樣，Windows下斜槓不一樣，要用replace換一下），BASE_DIR是整個專案的根目錄，所以後面的設成到你的static資料夾的路徑就行，沒有必要跟我一樣

STATIC_DIRS,這也是我和別人的過程不一樣的地方
格式跟我那個一樣就好，最開始這裡我寫的就是

STATICFILES_DIRS = [
        STATIC_ROOT，
]

結果瀏覽器報錯
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
也就是STATICFILES_DIRS 和 STATIC_ROOT一定不能相同！！！
之後百度一搜寫成最後那樣，發現還是不行，
問題出在當我HTML訪問的是××××/static/××××.css時，我用××××/SpiderWeb/static/××××.css可以訪問到
但是當我把HTML改為××××/SpiderWeb/static/××××.css，我用××××/SpiderWeb/static/××××.css就訪問不到了
F12發現瀏覽器還是找不到靜態檔案，最後搜百度看原始碼檔案，發現這個DIR的作用是
collect static files for deployment.

可以通過collectstatic指令把靜態檔案自動收集一下！！！也就是上面講的STATIC_ROOT 的地址，這裡很關鍵就不用管django怎麼找這些靜態檔案了，Tool下面進 manage.py，然後輸入collectstatic，之後選yes，大功告成！
其實，執行collectstatic命令後，所有static檔案都收在STATIC_ROOT的子目錄css,js,img中，所以我們引用靜態檔案的時候，也可以直接使用/static/css，而不使用…/templates/Web/static/css了
2. urls中直接引用的方法

from django.conf import settings
from django.views.static import serve
#urlpartterns中加
url(r'^static/(?P<path>.*)$',serve,{'document_root': settings.STATIC_ROOT}),

前面講引用就在這裡前面把靜態檔案收集到ROOT裡，現在直接用settings.STATIC_ROOT，在瀏覽器裡輸入http://127.0.0.1:8000/static/style.css 就可以訪問啦（當然要runserver)
3. HTML 中很簡單，大家的部落格都有寫，兩個要點
- load staticfiles
- {% static '*****'%}
比如我的是這樣的：

<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
    <title>1</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- css -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/pace.css' %}">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <!-- js -->
    <script src="{% static 'js/jquery-2.1.3.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/pace.min.js' %}"></script>
    <script src="{% static 'js/modernizr.custom.js' %}"></script>

在Django中使用css，js等靜態檔案

在Django中使用css，js等靜態檔案

Eclipse中maven環境使用jetty啟動後不能儲存更改後的css，js等靜態檔案的解決方法

django專案使用css、js等靜態檔案

Spring Boot thymeleaf模版支援，css,js等靜態檔案新增

springmvc配置後jsp頁面不能載入css,js等靜態檔案

django 解決css，js檔案304導致無法載入顯示問題

Spring Boot無法訪問靜態資源(css，js等)的問題

Spring mvc中不能引入js等靜態檔案問題的解決方案

SpringBoot頁面跳轉訪問css、js等靜態資源引用無效解決（六）

django載入css、js等內容

Jetty啟動時不能修改 js等靜態檔案的解決

spring mvc 頁面訪問圖片或者js等靜態檔案路徑出錯問題

django中template模板、static靜態檔案

PythonWeb框架之Django網頁靜態檔案有效配置(CSS、JS等)

web專案中url-pattern改成'/'後，js、css、圖片等靜態資源（404）無法訪問問題解決辦法

Django套用現成模板，匯入css，js，images等檔案

Django中簡單添加HTML、css、js等文件

python學習之網站的編寫（HTML，CSS，JS）（十一）----------如何利用其它html檔案中的CSS（也就是可以將共同的地方提取出來，放大一個檔案中，利於使用）

SpringMVC框架下前端jsp頁面引入js，css，img等檔案失敗的問題

python2.7的flask框架之引用js&css等靜態檔案

在Django中使用css，js等靜態檔案

相關推薦