Django新手教程9,美化頁面

做完前面的主頁,你可能就會想啊,不需要有實體的index.html文件直接由講解員口述,這方便是方便了,可是如果我們需要一個美麗的主頁,比如要設計字體大小,顏色什么的,難道也要讓講解員描述的天花亂墜嗎,這有些不切實際,所以,不需要實體的index.html并不算是django非常大的優點,django的講解員也可以不說話,直接將游客指引到相應的html文件。
這時候,我們也要像傳統的php開發模式一樣,指定某個文件夾來存放這些html文件。我們之前說過,html文件就像一個個展柜,所以,我們就在myCloud文件夾下面新建一個叫templates的文件夾

我們在里面新建一個叫index.html的文件,輸入如下的html代碼

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Home Page</title>
</head>
<body>
  <p>Welcome</p>
</body>
</html>
image.png

你不懂也不要緊,反正這就是一個標準的html文件,相當于就是,我們就是按照展柜的規格,把展柜建起來了。
然后,我們命令我們的index_jiangjieyuan,別逼逼了,把游客指引到這個展柜就得了。在jiangjieyuan_mingdan.py文件中將index_jiangjieyuan函數修改一下

from django.shortcuts import render

# Create your views here.
from django.http import HttpResponse
def index_jiangjieyuan(request):
    return render(request,'index.html')
image.png

這樣一來,你再運行服務器,顯示的就是這個index.html。這就跟傳統的開發模式差不多了。
django靈活的是可以在這個index.html隨時插入講解員的講解,我們先按照django的規則,在 index.html里面放入講解員插話的地方,比如說我們需要出入一句講解語位于主頁中welcome的下面,那么就在index.html中輸入如下的html代碼

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Home Page</title>
</head>
<body>
  <p>Welcome</p>
  <p>{{ jiangjieyu1 }}</p>
</body>
</html>
image.png

然后我們在講解員函數中插入講解員要講的話。比如今天是幾月幾號。

from django.shortcuts import render

# Create your views here.
from django.http import HttpResponse
from datetime import date
def index_jiangjieyuan(request):
    today = str(date.today())
    word = "hello, today is " + today
    return render(request,'index.html',{'jiangjieyu1':word})
image.png
image.png

看到django模式的好玩之處了沒有,你可以使用html文件然后再添加講解員的講解語,是不是很完美,傳統的方式,弄好一個個展柜,直接引領你到那里得了,自個看去,django模式則是,不僅有展柜,而且我們還配有講解員適當做一些講解,當然,你的展館沒有展柜只有講解員,吹得再怎么天花亂墜都是不行的,一定要兩者結合,才能給游客帶來完美的游覽體驗。
如果你不會做html也沒有關系。你可以下載免費的html,人家已經幫你把html設計好,你只要把需要展現內容的地方挖掉換成你的內容,換成講解語就可以了。還有就是,前段后端分的比較開,設計師只要考慮如何設計HTML就可以了,怎么往里面填數據,后面的數據結構則不需要考慮,比如我們這里,設計者只要考慮在網頁的哪個角落放日期,日期的字體如何,顏色如何,至于我們使用什么函數獲得今日的日期則無關緊要,甚至,設計者可以不懂python,只要在他覺得該放日期的地方放一個{{ date_jiangjieyu }}
然后后端的程序員記得把{ 'date_jiangjieyu': today }作為解說語返回就可以了。
這里不是html的教學環節所以不展開多說,我們這里只是用簡單的html文件。
假如,我們的HTML模板使用了CSS外部文件(這是很有可能的)或者需要呈現某些圖片,這時候傳統的開發模式的把這些文件放到HTML模板旁邊,然后根據路徑就可以加載進去了。比如這樣

image.png

django則稍有不同,它認為CSS文件和圖片,視頻這些應該和HTML模板區分開來,這些不是展柜,而是我們網頁的靜態文件,所以我們要把他們放到一個專門的地方來保管,這個地方就叫static,假如現在我們需要使用一個LOGO圖片作為我們云盤的logo,那么我們需要在myCloud目錄下新建一個static文件夾,然后把logo.png放進去,接著在index.html里面寫如下的代碼:

image.png

注:里面的那句'<img scr="static/logo.png" />' 作為HTML代碼插入簡書的時候,總是渲染失敗變成別的東西,所以只貼圖,大家諒解。

image.png

就可以看到云盤的logo了,注意這里用的是/static/logo.png好像只是填入相應的路徑,實際上,你把logo.png放進templates或其他地方,然后使用該路徑引用是不行的,所有的靜態文件都必須設在static文件夾里面。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,791評論 6 545
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,795評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,943評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,057評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,773評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,106評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,082評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,282評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,793評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,507評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,741評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,220評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,929評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,325評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,661評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,482評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,702評論 2 380

推薦閱讀更多精彩內容