django項(xiàng)目引用css的方法

小編給大家分享一下django項(xiàng)目引用css的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

大多數(shù)初學(xué)者都會(huì)疑惑這樣一個(gè)問題：Django中如何引入css，html文件呢？問什么總是報(bào)錯(cuò)呢？下面我們來探討一下這個(gè)問題。

這個(gè)問題出在以Djiango做后臺的前端界面上。按以往的習(xí)慣，css，js，image等靜態(tài)文件直接在前端html中寫好鏈接，直接丟上去就可以，但當(dāng)把含外部css的html在丟到Django后發(fā)現(xiàn)，css并沒有載入，自然，其他靜態(tài)文件也是如此。

原因分析

出現(xiàn)這個(gè)問題其實(shí)是因?yàn)槌绦騿T太想當(dāng)然了。在以往的php做后端的例子中，我們只要知道url就可以訪問網(wǎng)站根目錄下的任何文件。以外部css為例，在瀏覽器獲得html文件后會(huì)對資源進(jìn)行鏈接，鏈接css文件時(shí)，將向服務(wù)器請求css的url對應(yīng)的css文件，該css文件確實(shí)存在，于是服務(wù)器將之返回，瀏覽器成功鏈接到外部css文件。整個(gè)過程十分簡單。

那么為什么Django鏈接不到？原因出在一開始，css對應(yīng)的url不存在。Django并不像php那樣可以訪問網(wǎng)站根目錄下的文件，它只會(huì)對路由所包含的路徑進(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)然我不會(huì)這么干，因?yàn)?，Django理所當(dāng)然地提供了解決方案。

在settings.py的INSTALLED_APPS中，我們可以找到django.contrib.staticfiles這項(xiàng)，它的作用就是管理靜態(tài)文件。它的功能大致可以理解為將settings.py中的STATICFILES_DIRS列表中的路徑變?yōu)榭稍L問。同時(shí)對于路徑，django的settings.py中存在一個(gè)保存根路徑的變量：

BASE_DIRos.path.dirname(os.path.dirname(os.path.abspath(__file__)))

對于官方的解決方案，靜態(tài)文件是保存在根目錄下的static文件夾中，所以使用一個(gè)變量指向static文件夾（當(dāng)然具體情況可以視實(shí)際路徑而更改）：

STATIC_ROOT= os.path.join(BASE_DIR,'static')

然后，在settings.py中，存在這樣一個(gè)變量（如果沒有就自己加上吧）：

STATIC_URL = '/static/'

這個(gè)變量的功能稍后再提。在這些準(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，會(huì)發(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)這個(gè)變量是靜態(tài)文件的url的目錄。

我們再嘗試將圖片文件添加進(jìn)去。比如在static文件夾下有一個(gè)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支持添加二元元組，第一個(gè)值作為url中的路徑，第二個(gè)值作為實(shí)際路徑舉個(gè)例子，將它如此修改

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 %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">

其他靜態(tài)資源也是如此。

至此，Django導(dǎo)入靜態(tài)文件的問題得以解決。

以上是django項(xiàng)目引用css的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！