免费AI编程助手
Templates
Templates
加上 HTML / CSS & 动态内容
上一章的例子，只是很简单的显示一行字串。让我们加上一些 HTML/CSS 美化网页，并动态显示每次进来这个页面的时间:
# 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)-
多行字串：
"""...""" 或是 '''...''' (三个双引号或三个单引号) 是字串的多行写法，这裡我们使用它表达 HTML，并维持原有的缩排。
-
显示目前时间：
为了显示动态内容，我们 import datetime 时间模组，并用
datetime.now()取得现在的时间。 -
字串格式化：
使用 format() 格式化字串，将 datetime.now() 产生的值，代入
{current_time}在字串中的位置。
现在启动 web server ，连至 http://127.0.0.1:8000/hello/ 后，会发现网页不再是纯文字。除了加上了一些样式外，也会显示当下的时间。
你可以重新整理网页，试试看时间有没有改变
第一个 Template
在前一个例子，我们把 HTML/CSS 放在 View function 裡。但在实务上，我们会将前端的程式码独立出来，放在 templates 资料夹裡。不仅增加可读性，也方便与设计师或前端工程师分工。
Template 资料夹
首先建立 Template 资料夹。开启终端机 (如果不想关闭 web server，可以再开新一个新的终端机视窗)，并确认目前所在位置为 djangogirls/mysite/。
新增一个名为 templates 的资料夹`：
mkdir templates设定 Templates 资料夹的位置
建立好资料夹以后，我们需要修改mysite/settings.py，加上TEMPLATE_DIRS：
# mysite/settings.py
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates').replace('\\', '/'),
)建立第一个 Template
新增档案 templates/hello_world.html ，并将之前写在 View function 中的 HTML 複製到 hello_world.html
mysite
├── mysite
├── templates
│ └── hello_world.html
├── trips
└── manage.py为了区别，我们做了一些样式上的调整：
<!-- 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>仔细比较，可以发现变数 current_time 的使用方式与之前不同，在这裡用的是两个大括号。
{{<variable_name>}} 是在 Django Template 中显示变数的语法。
其它 Django Template 语法，我们会在后面的章节陆续练习到。
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 这个 function 产生要回传的 HttpResponse 物件。
这次传入的参数有：
- request -- HttpRequest 物件
- template_name -- 要使用的 Template
- dictionary -- 包含要新增至 Template 的变数
Render ：产生 HttpResponse 物件。
render(request, template_name, dictionary)
大功告成
HTML 程式码独立成 Template 后，程式也变得简洁许多了。
重新载入 http://127.0.0.1:8000/hello/，你会发现画面有了小小的改变：
更多建议：