Django 靜態文件配置(static files)


Django version: 1.9

Python versrion: 3.5.2

 

因為據說除了Firefox之外的瀏覽器都會亂碼, 所以放上截圖

 

 

 

 

這幾天Django配置靜態文件(本例是要加載index.css), 總是不對,最后終於試對了,這里記錄下,方便以后查閱

最后實在沒辦法把Django1.9的官方文檔下載下來(網頁版),仔細的閱讀了下相關的章節。

 

首先看下項目的結構圖(pycharm2016 professional):

1.首先在INSTALLED_APPS中要有'django.contrib.staticfiles'

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'news', ]

 



2.在settings.py中加入:
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR,"news/static/"), ]
 
        

3.加載靜態文件時

{% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'news/css/index.css' %}"/>

這里的路徑是根據上面的文件結構來寫的。

事實上在Django官方文檔例子(投票系統Writing your first Django app, part 6中有講到這些內容)


另外,有時出錯誤了可以這樣修改:
  將上面的 href="{% static 'news/css/index.css' %}改成:href="{% static 'css/index.css' %}
  運行命令:python manage.py runserver 可能會有正的結果:

  

  
此時運行:python manage.py findstatic css/index.css

  箭頭指的地方的news是指news這個文件夾,這里要說的是第一條命令:python manage.py findstatic css/index.css找不到css
  文件,那么肯定是這里路徑的問題,這樣修改路徑后,可以找到index.css文件,那就可以到html中修改相應的路徑了。

2017.11.02更新:
最近在寫一個項目時出現了一個bug,開始一直沒找到原因,最后發現是因為app與項目根目錄下的靜態文件同名,
導致沖突。這里更新下具體如何避免沖突的問題。

通常情況下,我們會在項目建立時在項目根目錄建立一個static目錄(上圖中並沒有,上圖指最上面的目錄樹截圖,下同),
創建時默認有一個templates目錄,當項目越來越大時,我們不可能將所有靜態文件都放在這個目錄里,而是各app獨立開來。

那么具體要怎么獨立呢

項目根目錄有
static目錄---> 放公共的靜態文件,如jquery, bootstrap等
templates目錄--->放整個項目初始的網頁等,如首頁

app中,以上面的news為例:
先建立static目錄:
static中建立app名字(上圖中的news)的次級目錄,這是關鍵
news中再分別建立css,js,img等次級目錄
templates與static一樣,也是先建立以當前app名字命名的次級目錄
做完這些,我們需要將app靜態文件路徑加入到setting中:
os.path.join(BASE_DIR, "news/static/"),
 
        

 注意,是在原有的要目錄的靜態文件的基礎上添加。

同樣的道理, 在網頁或者視圖函數中的路徑也就加上對應的app名,例如在網頁的的模板文件中(標簽)

在沒有相互獨立時是這樣的:

{% extends 'index.html' %}

 在設計相互獨立后就該是這樣的:

{% extends 'news/index.html' %}

 html中代碼:

經過django渲染到瀏覽器后:

注意這里的users是與上圖中的news一樣是一個app,(實在找不到原來的代碼了)

對於渲染后的結果我個人傾向於認為第一個 /static/css/bootstrap.min.css中的

static指代根目錄中的static

而 /static/users/css/login.css中的static指代users/static/

因為這里對應你setting中的設置。

經過上面這一系列的設置,各app可以引用公共的靜態文件,同時各app自己的靜態文件也相對獨立開來 ,來容易導致沖突


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM