Part6 靜態(tài)文件的管理

這篇教程從第5節(jié)開始,我們已經(jīng)創(chuàng)建了一個(gè)測(cè)試過的web投票應(yīng)用,現(xiàn)在我們會(huì)添加一個(gè)表格和一張圖片。
除了由服務(wù)器生成的HTML,web應(yīng)用通常也需要提供額外的文件 —— 例如圖片、JS或者CSS,這些都是用來渲染完整的Web頁面。在Django里,我們把這些文件統(tǒng)一稱為“靜態(tài)文件”。

對(duì)于小的項(xiàng)目,這個(gè)不是大問題,因?yàn)槟阒恍枰鸯o態(tài)文件放在你的web服務(wù)器可以找到的地方久可以了。然而,在大的項(xiàng)目里,特別是由多個(gè)app組成的項(xiàng)目。處理每個(gè)app提供的多個(gè)靜態(tài)文件集合就開始變得棘手了。

這就是django.contrib.staticfiles處理的事情:它從你的每個(gè)應(yīng)用(或者你指定的其他位置)里收集靜態(tài)文件到一個(gè)單獨(dú)的位置,這個(gè)位置在生產(chǎn)環(huán)境可以簡(jiǎn)單地供客戶端訪問。

定制你的APP的外觀和感覺

首先,在你的polls目錄里創(chuàng)建一個(gè)名為static的目錄,Django會(huì)在這里查找靜態(tài)文件,這個(gè)和Django在polls/templates/里查找模板文件很相似。

Django的STATICFILES_FINDERS設(shè)置包含了一個(gè)查找目錄列表,知道怎么去多個(gè)資源位置查找靜態(tài)文件。默認(rèn)設(shè)置是AppDirectoriesFinder,用來在每個(gè)INSTALLED_APPS目錄下面尋找static子目錄。就像我們剛才在polls下面創(chuàng)建的那個(gè)。admin站點(diǎn)也是用這種方式管理他的靜態(tài)文件。

在你剛創(chuàng)建的static目錄里面,創(chuàng)建一個(gè)polls目錄,然后在polls目錄里面創(chuàng)建一個(gè)叫做style.css的文件。換句話說,你的樣式文件路徑應(yīng)該是polls/static/polls/style.css。因?yàn)?code>AppDirectoriesFinder靜態(tài)文件查找器的工作方式,以后你可以在Django里簡(jiǎn)單地通過polls/style.css這樣來引用靜態(tài)文件。和你引用模板的路徑相似。

靜態(tài)文件命名空間

和模板一樣,我們可以直接將靜態(tài)文件放在polls/static里(而不是創(chuàng)建一個(gè)polls子目錄),但這樣做不是很好。因?yàn)镈jango會(huì)選擇第一個(gè)名稱匹配的靜態(tài)文件,如果你在不同的應(yīng)用里有相同名稱的靜態(tài)文件的話,Django是沒用能力分辨這些同名文件之間的區(qū)別的,只會(huì)使用第一個(gè)找到的文件。所以最簡(jiǎn)單的方式就是把他們放到命名空間里。就是把這些靜態(tài)文件放到一個(gè)應(yīng)用名稱的子目錄下面。

把下面的代碼放到樣式表里面(polls/static/polls/style.css):

li a {
    color: green;
}

下一步,把下面的代碼添加到polls/template/polls/index.html文件的頂端:

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

{% static %}模板標(biāo)簽生成靜態(tài)文件的絕對(duì)url路徑。這就是你在開發(fā)中要做的所有事情,重新加載http://localhost:8000/polls/地址,你會(huì)看到question的鏈接是綠色的(Django 風(fēng)格),意味著你的樣式表正常加載了。

添加一個(gè)背景圖象

下一步,我們要為圖象創(chuàng)建一個(gè)子目錄,在polls/static/polls/目錄下面創(chuàng)建一個(gè)images子目錄,在這個(gè)目錄里面,放一個(gè)叫做background.gif的圖片文件。換句話說,你的圖片文件位置是:polls/static/polls/images/background.gif.
然后,把下面的代碼添加到你的樣式表(polls/static/poll/style.css)里。

body {
    background: white url("images/background.gif") no-repeat right bottom;
}

重新加載http://localhost:8000/polls/你會(huì)發(fā)現(xiàn)背景圖在屏幕的右上方。

警告

像你的樣式表那樣使用{% static %}模板標(biāo)簽當(dāng)然不可用,特別是文件不是由Django生成的時(shí)候。你應(yīng)該經(jīng)常使用相對(duì)路徑來鏈接你的靜態(tài)文件。因?yàn)檫@樣后面你才能修改STATIC_URL(被STATIC模板標(biāo)簽用來生成它自己的URL路徑)而不需要修改你的靜態(tài)文件里的一堆路徑。

上面這些都是基礎(chǔ)內(nèi)容,對(duì)于更多的設(shè)置細(xì)節(jié)以及其他包含框架的的內(nèi)容,可以看官方文檔怎么組織靜態(tài)文件靜態(tài)文件引用分發(fā)靜態(tài)文件這篇文檔則是討論怎么在一個(gè)真實(shí)的服務(wù)器上使用靜態(tài)文件。

當(dāng)你熟悉了怎么使用靜態(tài)文件以后,就可以學(xué)習(xí)第7節(jié)的內(nèi)容,關(guān)于怎么定制Django的自動(dòng)生成式管理站點(diǎn)了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容