免費(fèi)AI編程助手
Templates
Templates
加上 HTML / CSS & 動(dòng)態(tài)內(nèi)容
上一章的例子，只是很簡(jiǎn)單的顯示一行字串。讓我們加上一些 HTML/CSS 美化網(wǎng)頁(yè)，并動(dòng)態(tài)顯示每次進(jìn)來(lái)這個(gè)頁(yè)面的時(shí)間:
# trips/views.py
from datetime import datetime
from django.http import HttpResponse
def hello_world(request):
output = """
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World! <em style="color:LightSeaGreen;">{current_time}</em>
</body>
</html>
""".format(current_time=datetime.now())
return HttpResponse(output)-
多行字串：
"""...""" 或是 '''...''' (三個(gè)雙引號(hào)或三個(gè)單引號(hào)) 是字串的多行寫法，這裡我們使用它表達(dá) HTML，并維持原有的縮排。
-
顯示目前時(shí)間：
為了顯示動(dòng)態(tài)內(nèi)容，我們 import datetime 時(shí)間模組，并用
datetime.now()取得現(xiàn)在的時(shí)間。 -
字串格式化：
使用 format() 格式化字串，將 datetime.now() 產(chǎn)生的值，代入
{current_time}在字串中的位置。
現(xiàn)在啟動(dòng) web server ，連至 http://127.0.0.1:8000/hello/ 后，會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)不再是純文字。除了加上了一些樣式外，也會(huì)顯示當(dāng)下的時(shí)間。
你可以重新整理網(wǎng)頁(yè)，試試看時(shí)間有沒有改變
第一個(gè) Template
在前一個(gè)例子，我們把 HTML/CSS 放在 View function 裡。但在實(shí)務(wù)上，我們會(huì)將前端的程式碼獨(dú)立出來(lái)，放在 templates 資料夾裡。不僅增加可讀性，也方便與設(shè)計(jì)師或前端工程師分工。
Template 資料夾
首先建立 Template 資料夾。開啟終端機(jī) (如果不想關(guān)閉 web server，可以再開新一個(gè)新的終端機(jī)視窗)，并確認(rèn)目前所在位置為 djangogirls/mysite/。
新增一個(gè)名為 templates 的資料夾`：
mkdir templates設(shè)定 Templates 資料夾的位置
建立好資料夾以后，我們需要修改mysite/settings.py，加上TEMPLATE_DIRS：
# mysite/settings.py
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates').replace('\\', '/'),
)建立第一個(gè) Template
新增檔案 templates/hello_world.html ，并將之前寫在 View function 中的 HTML 複製到 hello_world.html
mysite
├── mysite
├── templates
│ └── hello_world.html
├── trips
└── manage.py為了區(qū)別，我們做了一些樣式上的調(diào)整：
<!-- hello_world.html -->
<!DOCTYPE html>
<html>
<head>
<title>I come from template!!</title>
<style>
body {
background-color: lightyellow;
}
em {
color: LightSeaGreen;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<em>{{ current_time }}</em>
</body>
</html>在 Template 中顯示變數(shù)
以上 Template 中，有個(gè)地方要特別注意：
<em>{{ current_time }}</em>仔細(xì)比較，可以發(fā)現(xiàn)變數(shù) current_time 的使用方式與之前不同，在這裡用的是兩個(gè)大括號(hào)。
{{<variable_name>}} 是在 Django Template 中顯示變數(shù)的語(yǔ)法。
其它 Django Template 語(yǔ)法，我們會(huì)在后面的章節(jié)陸續(xù)練習(xí)到。
render
最后，將 hello_world 修改如下：
# trips/views.py
from datetime import datetime
from django.shortcuts import render
def hello_world(request):
return render(request,
'hello_world.html',
{'current_time': datetime.now()})我們改成用 render 這個(gè) function 產(chǎn)生要回傳的 HttpResponse 物件。
這次傳入的參數(shù)有：
- request -- HttpRequest 物件
- template_name -- 要使用的 Template
- dictionary -- 包含要新增至 Template 的變數(shù)
Render ：產(chǎn)生 HttpResponse 物件。
render(request, template_name, dictionary)
大功告成
HTML 程式碼獨(dú)立成 Template 后，程式也變得簡(jiǎn)潔許多了。
重新載入 http://127.0.0.1:8000/hello/，你會(huì)發(fā)現(xiàn)畫面有了小小的改變：
更多建議：