Templates
上一章的例子，只是很簡單的顯示一行字串。 現在，讓我們加上一些 HTML/CSS 美化網頁，並動態顯示每次進來這個頁面的時間。
第一個 Template
實務上，我們會將前端的程式碼獨立出來，放在 templates 資料夾裡。不僅增加可讀性，也方便與設計師或前端工程師分工。
Template 資料夾
首先建立 Template 資料夾。開啟終端機 (如果不想關閉 web server，可以再開新一個新的終端機視窗)，並確認目前所在位置為 djangogirls/mysite/。
新增一個名為 templates 的資料夾`：
(djangogirls_venv) ~/djangogirls/mysite$ mkdir templates
設定 Templates 資料夾的位置
建立好資料夾以後，我們需要修改 mysite/settings.py 中的 TEMPLATES 設定：
# mysite/settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates').replace('\\', '/')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
我們將 'DIRS' 原本的[]修改成：
[os.path.join(BASE_DIR, 'templates').replace('\\', '/')]
好讓 Django 找得到剛剛建立的 templates 資料夾。
建立第一個 Template
新增檔案 templates/hello_world.html：
mysite
├── mysite
├── templates
│ └── hello_world.html
├── trips
└── manage.py
並將下列的 HTML 複製到 hello_world.html：
<!-- 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 中顯示變數
以上 Template 中，有個地方要特別注意：
<em>{{ current_time }}</em>
在 Template 裡面．我們會使用兩個大括號，來顯示變數current_time。
{{<variable_name>}} 是在 Django Template 中顯示變數的語法。
其它 Django Template 語法，我們會在後面的章節陸續練習到。
使用 render function
最後，將 view function 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': str(datetime.now()),
})
顯示目前時間： 為了顯示動態內容，我們 import datetime 時間模組，並用
datetime.now()取得現在的時間。render： 我們改成用
render這個 function 產生要回傳的HttpResponse物件。
這次傳入的參數有：
- request --
HttpRequest物件 - template_name -- 要使用的 template
- dictionary -- 包含要新增至 template 的變數
render：產生 HttpResponse 物件。
render(request, template_name, dictionary)
大功告成
現在啟動 web server ，連至 http://127.0.0.1:8000/hello/ 後，會發現網頁不再是純文字。除了加上了一些樣式外，也會顯示當下的時間。
你可以重新整理網頁，試試看時間有沒有改變
