django運(yùn)用css的方法?這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
成都創(chuàng)新互聯(lián)專注于新晃網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供新晃營銷型網(wǎng)站建設(shè),新晃網(wǎng)站制作、新晃網(wǎng)頁設(shè)計(jì)、新晃網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù),打造新晃網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供新晃網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
這個問題出在以Djiango做后臺的前端界面上。按以往的習(xí)慣,css,js,image等靜態(tài)文件直接在前端html中寫好鏈接,直接丟上去就可以,但當(dāng)把含外部css的html在丟到Django后發(fā)現(xiàn),css并沒有載入,自然,其他靜態(tài)文件也是如此。
原因分析
出現(xiàn)這個問題其實(shí)是因?yàn)槌绦騿T太想當(dāng)然了。在以往的php做后端的例子中,我們只要知道url就可以訪問網(wǎng)站根目錄下的任何文件。以外部css為例,在瀏覽器獲得html文件后會對資源進(jìn)行鏈接,鏈接css文件時(shí),將向服務(wù)器請求css的url對應(yīng)的css文件,該css文件確實(shí)存在,于是服務(wù)器將之返回,瀏覽器成功鏈接到外部css文件。整個過程十分簡單。
那么為什么Django鏈接不到?原因出在一開始,css對應(yīng)的url不存在。Django并不像php那樣可以訪問網(wǎng)站根目錄下的文件,它只會對路由所包含的路徑進(jìn)行對應(yīng)的響應(yīng)。簡單來說,你隨便往Django根目錄丟給文件,在不編寫路由的情況下,是不可能通過url獲得的。同樣,如果嘗試訪問沒有寫進(jìn)路由的css文件,那么返回只可能是404。既然資源404了,那么瀏覽器請求不到,導(dǎo)入失敗就是理所當(dāng)然的。
解決方法
在settings.py中導(dǎo)入靜態(tài)資源
既然是url不存在,那么讓它存在就好。理論上只要把css對應(yīng)的url編寫進(jìn)路由使其返回css文件,那么就能請求到了。當(dāng)然我不會這么干,因?yàn)椋珼jango理所當(dāng)然地提供了解決方案。
在settings.py的INSTALLED_APPS中,我們可以找到django.contrib.staticfiles這項(xiàng),它的作用就是管理靜態(tài)文件。它的功能大致可以理解為將settings.py中的STATICFILES_DIRS列表中的路徑變?yōu)榭稍L問。同時(shí)對于路徑,django的settings.py中存在一個保存根路徑的變量:
BASE_DIRos.path.dirname(os.path.dirname(os.path.abspath(__file__)))
對于官方的解決方案,靜態(tài)文件是保存在根目錄下的static文件夾中,所以使用一個變量指向static文件夾(當(dāng)然具體情況可以視實(shí)際路徑而更改):
STATIC_ROOT= os.path.join(BASE_DIR,'static')
然后,在settings.py中,存在這樣一個變量(如果沒有就自己加上吧):
STATIC_URL = '/static/'
這個變量的功能稍后再提。在這些準(zhǔn)備好之后,就可以將靜態(tài)文件路徑加到STATICFILES_DIRS列表中了。比如,如果css文件相對static文件夾的路徑為“css/test.css”,那么寫入后:
STATICFILES_DIRS=[os.path.join(STATIC_ROOT,'css'),]
那么現(xiàn)在試著訪問路徑(以本地端口127.0.0.1:8000為例):127.0.0.1:8000/static/css/test.css,會發(fā)現(xiàn)成功獲取。同樣,在html文件link時(shí)寫 href="static/css/test.css",就可以成功獲得。
這里大概就能看出STATIC_URL的作用了。路徑中存在/static/這一部分,和STATIC_URL有沒有關(guān)系呢?
嘗試這樣修改:
STATIC_URL = '/stardust/'
再訪問127.0.0.1:8000/static/css/test.css,返回404。但改為訪問127.0.0.1/stardust/css/test.css,訪問成功。確認(rèn)這個變量是靜態(tài)文件的url的目錄。
我們再嘗試將圖片文件添加進(jìn)去。比如在static文件夾下有一個src文件夾保存圖片等文件,src/img文件夾保存圖片,其中有mio.jpg,于是如此修改:
STATICFILES_DIRS=[ os.path.join(STATIC_ROOT,'css'), os.path.join(STATIC_ROOT,'src/img'), ]
訪問127.0.0.1:8000/static/src/img/mio.jpg,訪問成功。其他靜態(tài)資源添加方式也是如此,只用添加文件夾,就能訪問內(nèi)部文件。
值得多提的是,STATICFILES_DIRSSTATICFILES_DIRS支持添加二元元組,第一個值作為url中的路徑,第二個值作為實(shí)際路徑舉個例子,將它如此修改
STATICFILES_DIRS=[ ('css',os.path.join(STATIC_ROOT,'css')), ('img',os.path.join(STATIC_ROOT,'src/img')), ]
127.0.0.1:8000/static/css/test.css依然訪問成功,但是127.0.0.1:8000/static/src/img/mio.jpg訪問失敗。而訪問127.0.0.1:8000/static/img/mio.jpg卻能成功。就是這樣。
在上一步前提下使用html導(dǎo)入靜態(tài)資源
以css文件為例,在上一步做到后,href屬性寫為href="static/css/test.css"即可。不過django推薦的方案是使用模板導(dǎo)入。對于模板我的理解并不太少所以只貼方案。
現(xiàn)在文件前方使用{%load static %},之后在使用中(以同樣的css文件為例)如此寫:href="{%static '/css/main.css'%}"。這樣也可以成功訪問。如下是官方文檔給出的關(guān)于圖片的例子:
{% load static %}
其他靜態(tài)資源也是如此。
至此,Django導(dǎo)入靜態(tài)文件的問題得以解決。
感謝各位的閱讀!看完上述內(nèi)容,你們對django運(yùn)用css的方法大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。